How to upload multiple files in ONE request?

[Stanislav]

Hello!

I researched the documentation for the UploadBox.

As I see in the example here https://help.syncfusion.com/aspnet-core/uploadbox/file-actions

I can upload multiple files in one request.

public IActionResult UploadFiles (IList <IFormFile> UploadDefault)

I see that this is a list of uploaded files IList <IFormFile> UploadDefault. Not one file, this is a list of files.

Next, this list of uploaded files is processed in a loop

foreach (var file in UploadDefault)

{

// processing each file ...

}

I implemented the logic of  my app based on fact, that I have a LIST of files. But then I saw that the files are loaded one at a time in each request.

So I have a  list which contains only one file.

For example here I choose 3 files and press upload button. And I see 3 request to upload 3 files.

But I need that all files be sent to the server in ONE query.

I also read the documentation from here https://help.syncfusion.com/api/js/ejuploadbox but did not find anything related to this problem.

How can i do this? Is it possible to send multiple files in one request? Thank you.

[Prince Oliver]

Hi Stanislav, 

Thank you for contacting Syncfusion support. 

We have checked your requirement for uploading all the selected file in one request. It is not possible with our control’s behavior as we will upload the file individually and track the success, error and progress for every file. This data will be updated in the dialog or can be accessed in the events. Your requirement will affect this behavior and if one file upload fails to upload, then the entire batch of files will fail to upload. But we can achieve your requirement in our control by overriding the internal methods. We can override the _xhrOnUploadButtonClick method and perform the upload manually there. Kindly refer to the following code snippet. 

<script type="text/javascript"> 

    ej.Uploadbox.prototype._xhrOnUploadButtonClick = function (e) { 

        var xhrUpload = this; 

        var form_data = new FormData(); 

        var ins = this.inputupload[0].files.length; 

        for (var x = 0; x < ins; x++) { 

            form_data.append(this.control.id+"_data", this.inputupload[0].files[x]); 

        } 

        $.ajax({ 

            url: this.model.saveUrl,  

            dataType: 'text',  

            cache: false, 

            contentType: false, 

            processData: false, 

            data: form_data, 

            type: 'post' 

        }); 

        this._dialogclose() 

    }; 

</script> 

We have prepared a sample for your convenience, kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/131641/ze/CoreUpload-574325451 

Regards, 

Prince 

[Stanislav]

"Hi!

Thanks for trying to help.

But the problem still exists.

For example here I choose few files and press upload button.

I see one request, but only with one file.

At this line of your code:

var ins = this.inputupload[0].files.length; 

Variable "ins" always equals 1.

And in the controller action:

Collection"files" respectively consist only one file.

[Prince Oliver]

Hi Stanislav, 

Thank you for your update. 

We are able to upload multiple files in single request, we are unable to reproduce the issue you reported. We have attached a video of the upload process and screenshot of the request payload. Kindly refer to the following link for the video:  http://www.syncfusion.com/downloads/support/forum/131641/MULTIP~1-651331263.ZIP 

Regards, 

Prince 

[Stanislav]

Hi Prince,

Thanks for video.

If I select several files from one folder at once, like on a video - then everything is ok.

But if after that I want to add more files and press the "Browse "button again, then not all files will be sent in reality.

Also, if after sending the files I go again to select other files without page reloading - the previous files are sent again, and not the ones I just selected.

[Prince Oliver]

Hi Stanislav,   

  

Thank for your update.   

  

We can reproduce the reported issue in a sample. We have modified a sample by changing the this.inputupload to $(“ input.e-uploadinput”), since we have modified the default behavior of the control, newly selected items are not updated in this.inputupload. Kindly refer to the following code snippet. 

<script type="text/javascript"> 

    ej.Uploadbox.prototype._xhrOnUploadButtonClick = function (e) { 

        var xhrUpload = this; 

        var form_data = new FormData(); 

        var ins = $("input.e-uploadinput")[0].files.length; 

        for (var x = 0; x < ins; x++) { 

            form_data.append(this.control.id + "_data", $("input.e-uploadinput")[0].files[x]); 

        } 

        $.ajax({ 

            url: this.model.saveUrl,  

            dataType: 'text',  

            cache: false, 

            contentType: false, 

            processData: false, 

            data: form_data, 

            type: 'post' 

        }); 

        this._dialogclose() 

    }; 

</script> 

Kindly refer to the following link for the modified sample: http://www.syncfusion.com/downloads/support/forum/131641/ze/CoreUpload-37518725 

Regards, 

Prince 

[Divyesh]

Hello Prince,

Do you have something similar for Angular as well?

Thanks & Regards,
Divyesh

[Ashokkumar Balasubramanian]

Hi Divyesh, 

 

By default, the default Uploadbox will allow for multiple upload but not in a single request. As mentioned earlier updates, source can be overridden for this. As the same JS code alone is to be overridden, the format in which the code is to be included alone varies with Angular. Include the method as shown below within constructor of TS file. 

 

constructor() { 

        ej.Uploadbox.prototype["_xhrOnUploadButtonClick"] = function (e) { 

            var xhrUpload = uploadObj; 

            var form_data = new FormData(); 

            var ins = $("input.e-uploadinput")[0].files.length; 

            for (var x = 0; x < ins; x++) { 

                form_data.append(uploadObj.control.id + "_data", $("input.e-uploadinput")[0].files[x]); 

            } 

            $.ajax({ 

                url: uploadObj.model.saveUrl, 

                dataType: 'text', 

                cache: false, 

                contentType: false, 

                processData: false, 

                data: form_data, 

                type: 'post' 

            }); 

            uploadObj._dialogclose() 

        } 

    } 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B. 

[Divyesh]

Hi Divyesh, 

 

By default, the default Uploadbox will allow for multiple upload but not in a single request. As mentioned earlier updates, source can be overridden for this. As the same JS code alone is to be overridden, the format in which the code is to be included alone varies with Angular. Include the method as shown below within constructor of TS file. 

 

constructor() { 

        ej.Uploadbox.prototype["_xhrOnUploadButtonClick"] = function (e) { 

            var xhrUpload = uploadObj; 

            var form_data = new FormData(); 

            var ins = $("input.e-uploadinput")[0].files.length; 

            for (var x = 0; x < ins; x++) { 

                form_data.append(uploadObj.control.id + "_data", $("input.e-uploadinput")[0].files[x]); 

            } 

            $.ajax({ 

                url: uploadObj.model.saveUrl, 

                dataType: 'text', 

                cache: false, 

                contentType: false, 

                processData: false, 

                data: form_data, 

                type: 'post' 

            }); 

            uploadObj._dialogclose() 

        } 

    } 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B. 

Hi Ashok,

Thanks for your response. 

On copying the code in the constructor I'm getting errors on the lines below:

"ej.Uploadbox.prototype["_xhrOnUploadButtonClick"] = function (e) { 

            var xhrUpload = uploadObj; "

I'm getting error messages as 

Cannot find name 'ej' and Cannot find name 'uploadObj' in my .ts file. Could you please help me with this?

I need to get 'ej' and 'uploadObj' objects before using this code. How should I get them?

Thanks,

Divyesh

[Ashokkumar Balasubramanian]

Hi Divyesh, 

 

On further analysis of your reported problem, we suspect that the “ej” packages are not installed correctly in your project. Kindly confirm this and refer to the note section of below document for resolving “ej” undefined issue. 

 

https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli#render-syncfusion-angular-component 

 

“uploadObj” used in the code is instance of Uploadbox. You can replace it directly with “this” which represents the Uploadbox instance. We have prepared a sample with the provided code for your reference which can be downloaded from the below given link. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Uploadbox707175810 

 

If the issue persists, kindly share us the details on type of Angular project (Webpack or Angular CLI) used along with Angular version to proceed further on this. 

 

Regards, 

Ashokkumar B.