Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement file upload progress bar on web?

I would like display something more meaningful that animated gif while users upload file to my web application. What possibilities do I have?

Edit: I am using .Net but I don't mind if somebody shows me platform agnostic version.

like image 388
Jakub Šturc Avatar asked Sep 08 '08 12:09

Jakub Šturc


People also ask

How do I insert a file upload into my website?

HTML allows you to add the file upload functionality to your website by adding a file upload button to your webpage with the help of the <input> tag. The <input type=”file”> defines a file-select field and a “Browse“ button for file uploads.

How do I create a progress bar in HTML?

Use the <progress> tag to create a progress bar in HTML. The HTML <progress> tag specifies a completion progress of a task. It is displayed as a progress bar. The value of progress bar can be manipulated by JavaScript.

Can we show progress bar when upload image via HTTP flutter?

The progress bar would just go from 0-100 in an instant because it only has two states, Future incomplete and Future complete. Without any way to get the number of bytes transferred vs the total number of bytes or the progress of the request, there's no way to do this.


1 Answers

If you are interested how all this generally works client-site, this is it:

All the solutions hook up the form via javascript and change the forms target to a newly created, invisible IFRAME. Then they are free to use AJAX to request some status about the file from the server.

The IFRAME trick is needed because all the scripts running in the window that is doing the upload will hang until the the request is completed at which time the file is fully uploaded.

like image 131
pilif Avatar answered Oct 16 '22 08:10

pilif