Progress Bar v08: What the Free Upload Progress Demo Does
The free upload progress demo on this page shows you exactly how a file upload reports its progress in real time: you pick a file, the demo uploads it to nothing (it stays in your browser), and you watch a progress bar fill as the browser reads the file. It is a teaching tool, not a real uploader—it demonstrates the mechanics of progress reporting so you can see how the percentage, speed, and time remaining are calculated.
Background: Why Upload Progress Is Tricky
Uploading a file from a browser to a server normally gives you very little feedback. The browser knows the file size, but it does not tell you how much data has actually reached the server. This is because the classic XMLHttpRequest object only reports when the upload is complete—not during the process. Developers have worked around this for years by using Flash or Java applets, or by polling the server with separate requests to ask “how much have you received?�
The modern solution is the XMLHttpRequest upload object, which fires a progress event as data is sent. The demo on this page uses that event, but since there is no real server, it simulates the upload by reading the file locally and updating the progress bar based on how many bytes have been read. That is why it is called a “demo�—it shows the logic without needing a backend.
How the Demo Works
When you select a file, the demo does the following:
- Reads the file’s
sizeproperty to get the total bytes. - Uses the
FileReaderAPI (or a similar method) to read the file in chunks. - After each chunk, it calculates the percentage:
(bytesRead / totalBytes) * 100. - It updates the progress bar’s width and the text label with that percentage.
- It also estimates the upload speed by dividing bytes read by elapsed time, and the remaining time by dividing remaining bytes by that speed.
Because the file never leaves your computer, the “upload� is instant for small files. To make the demo feel realistic, it may add a small artificial delay or throttle the reading speed. The exact behavior depends on the version, but the core logic is the same as a real upload progress bar.
What the Progress Bar Actually Measures
The progress bar measures bytes read from the local file, not bytes sent to a server. In a real upload, those two are nearly identical—the browser reads the file and sends it over the network. But in the demo, the “send� part is skipped, so the bar reflects the read speed of your hard drive or SSD, not your internet connection.
This is an important distinction: if you run the demo on a very fast NVMe SSD, the bar will fill almost instantly. On a slow spinning hard drive, it will take a bit longer. Neither reflects your actual upload speed. To test real upload speed, you would need a server that receives the data and reports back—which is what the demo does not do.
Common Problems and Misconceptions
One common misconception is that the demo is uploading your file to a server. It is not. The file stays in your browser’s memory and is discarded when you close the page. Another is that the percentage is based on time, but it is based on bytes. The bar can jump from 10% to 90% quickly if the file is compressed or if the read speed varies.
If the bar stalls at a certain percentage, it is usually because the browser is reading a large chunk and the progress event fires only after the chunk is processed. The demo may also pause if the tab is in the background, as browsers throttle JavaScript timers to save battery.
How to Use the Demo Effectively
To see the progress bar work, choose a file that is at least 10–50 MB. Small files (under 1 MB) will complete too fast to see the bar move. If the demo has a “simulate slow network� option, turn it on to see the speed and time-remaining calculations in action. Try different file types—a large video file will read slower than a small text file, which shows how the bar responds to real data.
If you are a developer, open the browser’s developer console (F12) and watch the console logs. The demo may print the chunk size, bytes read, and calculated speed, which helps you understand the underlying code.
Comparing to Real Upload Progress
In a real upload, the progress event fires from the XMLHttpRequest.upload object, and the event.loaded property gives you the bytes sent. The demo mimics this by using FileReader’s onprogress event, which also provides loaded and total. The logic is identical, but the source of the data differs.
Real uploads also have to deal with network latency, server response time, and connection drops—none of which the demo simulates. So while the demo teaches you the progress calculation, it does not teach you how to handle network errors or retries. Those are separate concerns you would need to implement in a production system.
Alternatives and Related Tools
If you want to see real upload progress, you can use a service like transfer.sh or a local test server. Alternatively, you can build your own with a simple Node.js server and the multer package. For a purely client-side demonstration, the demo on this page is the simplest option.
There are also libraries like axios that provide upload progress callbacks out of the box, and frameworks like React have components that wrap this functionality. But the underlying principle is always the same: listen to the progress event, calculate the percentage, and update the UI.
Frequently Asked Questions
Does the demo upload my file anywhere?
No. The file is read entirely in your browser using the FileReader API. It is never sent to any server. You can verify this by disconnecting your internet after the page loads—the demo will still work, because it only reads the local file.
Why does the progress bar jump to 100% instantly for small files?
Because the file is read so quickly that the progress events fire in rapid succession, often within a single frame. The browser may batch multiple events into one update, making it appear as if the bar jumped from 0% to 100%. Use a larger file to see smoother progress.
Can I use this demo to test my real upload speed?
No. The demo measures local file read speed, not network speed. To test your upload speed, use a service like Speedtest or a tool that uploads to a server and measures the time.
What does the “speed� number in the demo mean?
It is the estimated transfer speed in megabytes per second, calculated as bytes read divided by elapsed time. In the demo, this is the local read speed; in a real upload, it would be the network throughput.
Is the demo’s progress calculation accurate?
Yes, for what it measures. The percentage is based on exact byte counts, so it is mathematically correct. The time-remaining estimate is an average, so it can fluctuate if the read speed varies.
Can I use the demo’s code in my own project?
Yes, the code is free to use and modify. The core logic—using FileReader’s onprogress event to update a progress bar—is a standard technique that you can adapt to your needs.
Related
Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.