File Upload Progress does not start

[dsapo]

Hi Support:

I have a  view  that uses the upload box as follows:

<ej-upload-box id="UploadDefault" name="UploadDefault" save-url="Save"

                           multiple-files-selection="true" async-upload="false" 

                           allow-drag-and-drop="true" drop-area-height="200px"></ej-upload-box>

As you can the async-upload property is set to false, because we need to start the upload process when the user clicks the Submit button in order to transmit the data and files at the same time.

The files are uploaded properly but the progress bar does not change (never starts), so when a file is huge, the user does not know how much  left to be uploaded.

Any idea why the progress bar does not change in our scenario.

Thanks

David

[Keerthana Rajendran]

Hi David, 

 

Thank you for contacting Syncfusion support, 

 

Query: As you can the async-upload property is set to false, because we need to start the upload process when the user clicks the Submit button in order to transmit the data and files at the same time. The files are uploaded properly but the progress bar does not change (never starts) 

 

This is the behavior of synchronous upload. Because, we are doing the form submit for this case. So, we won’t get any progress event to show case the progress bar value change simultaneously as like asynchronous upload and all the files will be uploaded at the same time on submit. 

 

Query: so when a file is huge, the user does not know how much  left to be uploaded. 

 

In case of uploading huge files , we suggest to use asynchronous upload to know the change in progress of upload action  

 

Regards, 

Keerthana. 

[dsapo]

Hi Keerthana:

Thanks for your reply.

In our scenario, we need to upload several files with form data, so how can I do that in async fashion, because we need to process the files on the server with the data in one action method.

How can I achieve that using the async upload?

Thanks again

David

[Keerthana Rajendran]

Hi David,   

 

In Uploadbox we can get the details of the file selected for upload in arguments of fileSelect event. We can process the files in that event before uploading to server. Please refer to the below given code 

 

<ej-upload-box id="uploadbox1" width="100px" save-url="//js.syncfusion.com/ejServices/api/uploadbox/Save" remove-url="//js.syncfusion.com/ejServices/api/uploadbox/Remove" file-select="onselect"> 

    <e-button-text browse="File Browse" /> 

    <e-dialog-text size="filesize" /> 

</ej-upload-box> 

<script> 

    function onselect(args) 

    { 

        for(i=0;i<args.files.length;i++) 

        { 

            console.log(args.files[i].name); 

            console.log(args.files[i].extension); 

 

        } 

 

    } 

</script> 

 

We have attached sample for your reference. Please download the sample from  

 

https://www.syncfusion.com/downloads/support/forum/132302/ze/Uploadbox-1544899800.zip 

 

 

Regards, 

Keerthana