Upload with progressbar

In 2009, showing an upload progress bar in the browser meant Flash. The XMLHttpRequest spec had no upload progress events yet, so a small Flash shim read the file and reported progress back to JavaScript. This post originally compared the three big options of the era: swfUpload, jqUploader and Uploadify.

Flash is gone (Adobe ended support on December 31, 2020, and browsers removed the plugin shortly after), so the comparison below is a retrospective — but it is also a nice case study in how completely the open web platform ate another plugin’s job.

The 2009 contenders

swfUpload

The classic, and probably the predecessor of them all. My original notes: great features (multi-select, callbacks on every event, client-side size checks), but I stopped using it because there were too many divergent builds, each broken in some browser — and I had to hack in database insertion for uploaded media anyway. The project was abandoned for years; WordPress eventually had to maintain its own security fork. The original swfupload.org site still stands as a museum piece, and the WordPress secure-swfupload fork is on GitHub.

jqUploader

Worked with jQuery 1.2.x (and never with anything newer), but it was the most compatible of the lot at the time — I ran it happily across Firefox, IE, Opera, Chrome, Sleipnir and Safari, with Flash 9 and 10, and being able to pass form variables along was a real advantage. The original demo page is, surprisingly, still online — though the project itself is Flash-era abandonware.

Uploadify

This was the reason for the original post: it looked like the best of all worlds. Multi-select, queue events (onSelect, onProgress, onComplete, onError…), simultaneous-upload limits, domain restriction, form data, size and extension limits, even a wmode option for the Flash object — and it worked with jQuery 1.3.x. For years it was the default answer to “how do I add a progress bar”. Today uploadify.com is a “coming soon” placeholder with no downloads, and there is no maintained successor — treat it as discontinued. (One screenshot from the original post is gone; the rest are kept below as period detail.)

The modern way: no Flash, no library

Everything those tools did is now native. XMLHttpRequest fires progress events on the upload object, and the FormData API handles the multipart encoding. The whole progress bar reduces to a few lines (see MDN: XMLHttpRequest.upload and Using files from web applications):

const file = document.querySelector('input[type="file"]').files[0];

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');

xhr.upload.addEventListener('progress', (e) => {
  if (e.lengthComputable) {
    const pct = Math.round((e.loaded / e.total) * 100);
    bar.style.width = pct + '%';
  }
});

xhr.addEventListener('load', () => console.log('done:', xhr.status));
xhr.send(file);

fetch() still has no upload progress (only XMLHttpRequest does), so for a real progress bar XHR remains the tool. If you want drag-and-drop, chunking, resumable uploads and retry logic out of the box, today’s equivalents of those Flash widgets are Uppy (GitHub) and FilePond (GitHub) — both pure JS, no plugin in sight.

The 2009 lesson still holds: whenever you reach for a plugin to fake a platform capability, check whether the platform caught up. This one did, thoroughly.