How to get a list of uploaded files on Blazor File upload?

[Syncfusion Support]

Query: How to get a list of uploaded files on Blazor File upload?

Answer:

We can get the list of the uploaded files using GetFilesData method as like below code snippet.  

<SfUploader @ref="UploadObj" ID="UploadFiles" Multiple=false> 

    <UploaderAsyncSettings SaveUrl="https://ej2.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://ej2.syncfusion.com/services/api/uploadbox/Remove" ChunkSize="500000"></UploaderAsyncSettings> 

</SfUploader> 

 

<SfButton CssClass="e-button" OnClick="OnButtonClick">Convert</SfButton> 

 

@code{ 

    SfUploader UploadObj; 

    public int count { get; set; } 

    public List<FileInfo> Files = new List<FileInfo>() {}; 

 

    public async Task OnButtonClick() 

    { 

        Files = await UploadObj.GetFilesData(); 

        count = Files.Count; 

    } 

} 

Find the sample for get list of uploaded files on Blazor File upload from here.

[Unikan]

I'm trying to use this method to get the list and validate it, but if I use this and after this block of code I call UploaderObj.Upload() I always get "File type not allowed"

[Sevvandhi Nagulan]

Hi Uni, 

Greetings from Syncfusion support. 

We checked your issue “File type not allowed”. We would like to let you that if we use the AllowedExtensions property for the uploader component and try to upload files that are not allowed by the value set in the AllowedExtensions property, we will get this validation message. The uploader component validates selected files against the specified file types and notifies that “File type not allowed”, if a file is not allowed as per the allowed extension property.  So, we suggest that you to ensure the file you are uploading is one of the file types defined in the AllowedExtensions property.  If these details does not help you in resolving the reported issue, please share the issue replicating sample to investigate the issue further at our end. 

Regards, 

Sevvandhi N 

[Boot Dat]

How can i assign the file(image) path to variables?

lets say I have 3 variables

image1, image2 and image3

I want the user to be able to select and upload max of 3 images

if the user selects only one image and uploads, I want its URL to be given to image1 

if the user selects and uploads two or three images

I want the URLs of those 2 or 3 images to be given to image1, image2 and image3 respectively 

[UdhayaKumar Duraisamy]

You can refer to the below Syncfusion blog for your requirement.

https://www.syncfusion.com/blogs/post/how-to-preview-images-in-syncfusion-blazor-file-upload-component.aspx

Also, you can get the data of the selected files in the FileSelected event. Please refer to the below documentation for more information.

https://blazor.syncfusion.com/documentation/file-upload/events#fileselected