1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. File Upload progressbar goes to 100% long before the transaction completes.

File Upload progressbar goes to 100% long before the transaction completes.

Hi,

I am using the file upload component as follows. I have 2 questions.

1- It successfully saves with SaveUrl. The process takes a long time because the file I am uploading is large and I am processing the data. The transaction completes, but the progressbar goes to 100% long before the transaction completes. How can I get the Progressbar to be 100% with the result returned from the save operation?


2- How can I disable the Upload and Browse buttons from the moment I press the Upload button?


@{

    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings();

    asyncSettings.SaveUrl = "/TestController/SaveAction";

    asyncSettings.RemoveUrl = "/TestController/RemoveAction";

}

<div class="upload-wrapper">

    <ejs-uploader id="uploadFiles" allowedExtensions=".xlsx" asyncSettings="@asyncSettings" multiple="false" autoUpload="false"></ejs-uploader>

</div>


3 Replies
UD UdhayaKumar Duraisamy Syncfusion Team June 30, 2022 03:25 PM UTC

Hi John,


Query 1 :


It successfully saves with SaveUrl. The process takes a long time because the file I am uploading is large and I am processing the data. The transaction completes, but the progressbar goes to 100% long before the transaction completes. How can I get the Progressbar to be 100% with the result returned from the save operation?


The progress bar shows the status that how much amount of data is transferred to the server. The speed of the progress bar status also depends on the network speed. The success event will be triggered once the process is completed which is handled at the server endpoint.


Query  2 :


How can I disable the Upload and Browse buttons from the moment I press the Upload button?


We can disable the Upload and Browse button by making the disabled attribute true in the BeforUploade event and making the disable attribute false in the Success event of the component. Please refer to the documentation for more information.


<ejs-uploader id="uploadFiles" BeforeUpload="ProgressHandler" Success="SuccessHandler" asyncSettings="@asyncSettings" autoUpload="false"></ejs-uploader>

 

<script>

 

    function ProgressHandler()

    {

       document.getElementsByTagName("button")[1].disabled = true;

       document.getElementsByTagName("button")[3].disabled = true;

    }   

    function SuccessHandler()

    {

       document.getElementsByTagName("button")[1].disabled = false;

       document.getElementsByTagName("button")[3].disabled = false;

    }

</script>



Regards,

Udhaya Kumar D



Attachment: UploaderCore_3ebe737c.zip

JT John Taylor July 1, 2022 06:37 PM UTC

Hi,

1-) Is it normal for the progressbar to be 100% without any return from the Action method I called in asyncSettings.SaveUrl? The process in Action takes about 2 minutes to complete. However, the Progressbar becomes 100% in 3-5 seconds.


2- It worked. Thank you.


UD UdhayaKumar Duraisamy Syncfusion Team July 4, 2022 02:32 PM UTC

Hi John,


Query 1:


Is it normal for the progressbar to be 100% without any return from the Action method I called in asyncSettings.SaveUrl? The process in Action takes about 2 minutes to complete. However, the Progressbar becomes 100% in 3-5 seconds



We suggest you use chunk upload for your requirement. The chunk upload functionality separates the selected files into blobs of data or chunks. These chunks are transmitted to the server using an AJAX request. The chunks are sent in sequential order, and the next chunk can be sent to the server according to the success of the previous chunk. If any one of the chunk failed, then the remaining chunk cannot be sent to the server. The chunkSuccess or chunkFailure event will be triggered when the chunk is sent to the server successfully or failed. If all the chunks are sent to the server successfully, the uploader success event is triggered.


For more details about the chunk upload please refer to the documentation.


Online Demo : https://ej2.syncfusion.com/aspnetcore/Uploader/ChunkUpload#/bootstrap5


Query 2:


It worked. Thank you.


We are glad that your requirement has been fulfilled on your end. We are always happy to assist you.


Regards,

Udhaya Kumar D



Loader.
Up arrow icon