File Upload - Save file paths in sql

[Unikan]

Hello,
I am using blazor and the syncfusion file upload component, I save the files in the file system and after that, I try to save the file path in the database. I am trying to achieve this without using API, I'm using dapper to insert the data into the database.

The problem is that I need to wait for the files to be saved in the file system then get the file paths to insert them into the database.
To be more specific I need to wait for UploaderObj.Upload() to finish completely and then to get the file paths so I can save them in the database.

Before the UploaderObj.Upload function finishes executing, the compilation skips to the next line, and then goes back to the ValueChange function of the UploaderObj.

[Berly Christopher]

Hi Uni, 

Greetings from Syncfusion support. 

We have checked your query. We would like to inform you that the file upload initiates when the upload() method is called. When the file upload completes, we get the files from the DOM which is available in the Change event arguments of the uploader. This process is not awaitable. hence the code executes after the upload method and does not wait. the await will not wait for the corresponding method call to complete. Please refer to the below answer provided in the Stack overflow community for further reference.   

Stack overflow Link :  https://stackoverflow.com/a/15151444/9133493   

So, we suggest you to perform the external method in the Change event which triggers when the upload is completed. 

Else, set the delay (Task.Delay(1000)) for the process between calling the Upload() and external method based on the ValueChange event execution time.  

Regards, 

Berly B.C 

[Unikan]

Hi  Berly,
Is there any event that executes after ValueChange? I tried the events: Success, OnActionComplete but they execute before the ValueChange event.
I can't use Task.Delay because the time to finish the upload and call the external method depends on the file size.

Thanks for your help :D

[Berly Christopher]

Hi Uni,  

Greetings from Syncfusion support.  

When using the Uploader without server end point, the ValueChange event will be fired after the successful completion of uploaded files. For ex. If we upload 5 files into the Uploader component, the ValueChange event will be fired after the successful completion of selected 5 files. Because we will save all selected file at a time after the ValueChange event fired. This is the default behavior of the component. The ActionComplete event will be fired after ValueChange event will be fired. For your convenience, we have prepared the sample and attached it below. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Server_164337575724703  

Screenshot: 

 

If you want to fire the ValueChange event after file getting saved, we suggest you to use the Uploader with server-end point. Please refer the below documentation to know more about File Upload component with server-end point below.  

UG Link: https://blazor.syncfusion.com/documentation/file-upload/getting-started/#with-server-side-api-endpoint   

  

Regards,  

Berly B.C  

[Boot Dat]

Hi Chris, 

in my case, I'm using web assembly and using the API found in your documentation for the files(image) upload. The uploads are working perfectly, I have an edit form to collect data of an idem and upload images. 

I'm using dapper and I'm able to save the items data

[Required]
public int ItemIDNumber { get; set; }
[Required]
public string ItemName { get; set; }
[Required]
public string? ItemDescription { get; set; }

the item IDNumber is created automatically by sql

but I'm trying to find a way to save the image paths of the uploaded item to sqlserver database where each image associated with the item should have the itemIDNumber to its column

[Required]
public Guid ItemImageID { get; set; }
[Required]
public int ItemIDNumber { get; set; }
[Required]
public string ItemImageUrl { get; set; }

[UdhayaKumar Duraisamy]

You can get the destination file path from the valuechange event.  However, due to security concerns, the file path from the client machine is restricted.

[Boot Dat]

Okay understood. But how can i save images to the server project directory without the API ?

i want to upload photos to a folder "Uploads" in the Server directory but before the upload, i want to be able to create guid for each file to rename the filename and save as the guid with its extension then get the new guid file name

[UdhayaKumar Duraisamy]

You can refer to the below Syncfusion forum for more information about your requirement.

https://www.syncfusion.com/forums/157285/blazor-file-upload-not-working-webassembly?reply=NtVBkQ