How to upload multiple files

Question

Hi all, I'm using the file upload control but i have to upload a good number of files, more than 200 files, now, I hae some custom logic on the ValueChange event and I'm creating a chunk of 15 files to send in one request to the server, however it's taking a lot of time between the BeforeUpload event and the ValueChange event.

Any advices on how to improve the process?
The following is the general code that i have in the ValueChange event:

protected async Task OnChange(UploadChangeEventArgs args)
{
var chuncks = ChunkBy(files, 15);
var filesToUpload = new List<FileInfoModel>();
foreach (List<UploadFiles> group in chuncks)
{
foreach (var fileToUpload in group)
{
fileToUpload.Stream.Seek(0, SeekOrigin.Begin);
var fileInfoModel = new FileInfoModel
{
FileName = fileToUpload.FileInfo.Name,
Stream = fileToUpload.Stream,
Size = fileToUpload.FileInfo.Size,
MimeType = fileToUpload.FileInfo.Type,
};
}
await DocumentService.AddFiles(filesToUpload);
filesToUpload = new();
}
}

Thanks,

Mohanraj Mathaiyan · Answer

Hi julio,We are validating the requirement. We will update the further details in two business days (12th September 2022).Regards,Mohanraj M

UdhayaKumar Duraisamy · Answer

Hi julio,The ValueChange event triggers when the file is uploaded to the server successfully. The time between the BeforeUpload event and the ValueChange event depends on the size of the file and network speed. We suggest you increase the chunk size of the uploader component.Kindly try the above suggestion and let us know if this meets your requirement. If we misunderstood the requirement. We request you to provide additional details about the query as mentioned below, This will help us validate the query further and provide you with a better solution.1. Are you using FileUpload Templates?2. Is the File Upload component rendered within any other component or alone?3. Issue reproducing runnable sample (or modify the shared sample).4. Issue replication steps.5. Video illustration of the issue.Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorUploader-515963507.zipRegards,Udhaya Kumar D

julio Avellaneda · Answer

Thanks for the answer, the code that i have is:As you can see, I need to read the files and send those files to the api because i need to run some validation and add some extra data in the request that send the files, maybe, can i use another event different to ValueChange to trigger my custom logic to upload the files?Thanks

UdhayaKumar Duraisamy · Answer

Hi julio,We are validating the requirement. We will update the further
details in two business days (15th September 2022). Regards,Udhaya
Kumar D

UdhayaKumar Duraisamy · Answer

Hi julio,We can use the FileSelected event or BeforeUpload event for validation purposes and for manual upload we suggest you use the UploadAsync method. Please refer to the documentation and sample for more details.FileSelected : FileSelected event triggers after selecting or dropping the files by adding the files in upload queue.BeforeUpload : BeforeUpload event triggers when the upload process before. This event is used to add additional parameter with upload request. @page "/" @using Syncfusion.Blazor.Inputs @using Syncfusion.Blazor.Buttons Upload @code { SfUploader UploaderObj; private async Task FileUpload() { await UploaderObj.UploadAsync(); } private void FileSelectedHandler(SelectedEventArgs args) { // Here, you can customize your code. } private void BeforeUploadHandler(BeforeUploadEventArgs args) { // Here, you can customize your code. } private void ValueChangeHandler(UploadChangeEventArgs args) { // Here, you can customize your code. } } Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileUpload1180316146Kindly try the above suggestion and let us know if this meets your requirement. If we misunderstood the requirement, we request you to provide additional details about the requirement as mentioned below. This will help us validate the requirement further and provide you with a better solution. Exact Requirement details. Requirement use case scenario. If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.Regards,Udhaya Kumar D

julio Avellaneda · Answer

I was playing with those events, however my results are not good, for example, the user choose 100 files to upload, yo be able to start the upload process as far as i know i need to use the ValueChange event (because i have custom code), but, the component first show the "file uploaded successfully" message before triggering the handler for the ValueChange event and in my case for 100 or more files the amount of time is huge.

A

UdhayaKumar Duraisamy · Answer

Hi julio,We are
validating the requirement. We will update the further details in one business
day (21st October 2022). Regards,Udhaya Kumar D

UdhayaKumar Duraisamy · Answer

Hi julio,In the File Upload component, the ValueChange event will be
triggered after the files are successfully uploaded to the server (after the success
event). This is the intended behavior of the component.Regards,Udhaya
Kumar D

julio Avellaneda · Answer

Hello, thanks, so, for my specific case, is there any other event that I can use to achieve my requirement instead the ValueChange?Thanks

UdhayaKumar Duraisamy · Answer

Hi julio,We suggest you try a success event. The Success event triggers before the ValueChange event. Please refer to the below documentation for more information. @using Syncfusion.Blazor.Inputs @code { private void SuccessHandler(SuccessEventArgs args) { // Here, you can customize your code. } } Documentation : https://blazor.syncfusion.com/documentation/file-upload/events#success If we misunderstood the requirement, we request you to provide additional details about the requirement as mentioned below. This will help us validate the requirement further and provide you with a better solution.Exact Requirement details.Requirement use case scenario.Please modify the previously shared sample as per your scenario.Regards,Udhaya Kumar D

julio Avellaneda · Answer

Thanks, I was checking the Success event, and this event is trigger per each file selected, is it possible to access to all the files? also in the success event, how can I get the file stream? I can read the name, size and type, but not the stream.

Thanks

UdhayaKumar Duraisamy · Answer

Hi julio,Sorry for the inconvenience caused.We are
validating the requirement. We will update the further details in two business
days (28th October 2022). Regards,Udhaya
Kumar D

Mohanraj Mathaiyan · Answer

Hi julio,Query 1 : Is it possible to access to all the files?As per your requirement we have prepared the sample to handle all file in Success event. Please find the attached sample for your reference. @code{ List filesdata = new List(); private void SuccessHandler(SuccessEventArgs args) { filesdata.Add(args.File); // Here, you can customize your code. } } Sample : https://www.syncfusion.com/downloads/support/common/3182/ze/FileUpload_81ccd196.zipQuery 2 : How can I get the file stream?Please find the below documentation link to get the file stream, for your reference.Documentation: https://blazor.syncfusion.com/documentation/file-upload/getting-started#without-server-side-api-endpointRegards,Mohanraj M