Multiple files selected when using EditForm with File Upload

Question

I'm implementing on Blazor WASM using the examples provided in https://www.syncfusion.com/forums/153253/upload-file-on-editform-submit

I'm using multiple files in my solution.

This works fine unless the user browses for a file twice.

So if I add a file and submit it's fine, if I add multiple files and submit it's fine.

The issue occurs if I browse for a file and then I browse for a file again.

Whilst the list will show both files, $('#files').get(0).files only contains the last file(s) selected and not all files.

Sureshkumar P · Answer

Hi Bob, 
 
The reported issue is not an issue, this is the default behavior of uploader component. The uploader will not allow same file again and again continuously. Also you can prevent the same file selection multiple times in the selected event. 
 
If you want to get all selected files details, then you can store all the selected files in the private variable using our fileselected event. 
 
To know more about file selected event, please refer the documentation link: https://blazor.syncfusion.com/documentation/file-upload/events#fileselected  
 
Regards, 
Sureshkumar p

Bob Vale · Answer

It's not the same file a second time. I never noticed the issue initially because I hit the browse button and selected multiple files. However when a non savvy user had a go, their instinctive approach was browse for the file and click add, then browse for another file to add a second file.

This shows 2 files in the list, however the javascript with only find the second file.

My issue is that because the files are part of an add form I need them submitted along with the rest of the details of the form. The workaround of using javascript to build a formdata object and submit the file was working great until I found out you cannot click browse twice.

Sureshkumar P · Answer

Hi Bob, 
 
Based on your shared information, we suggest you use our January 17th,2022 updated sample to upload multiple files in the single submit click. 
 
Please find the screen shot for multiple file uploaded details. 




  
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Server1728449534   
 
 
Regards, 
Sureshkumar P

Bob Vale · Answer

Isn't that project a server side blazor? I'm using WASM

Sureshkumar P · Answer

Hi Bob,

Please find the WASM application with uploader component inside editform.

Sample link: https://www.syncfusion.com/downloads/support/forum/172258/ze/Uploader1011880648

Regards,

Sureshkumar P