DEV Community

10 useful HTML file upload tips for web developers

Tapas Adhikary on October 20, 2020

Introduction The ability to upload files is a key requirement for many web and mobile applications. From uploading your photo on social ...

Read full post

Payton Bice • Oct 23 '20 • Edited

Something to note about the progress bar example is that it may not finish for users who have fast connections. I was testing it out and noticed that a progress event was fired around the 1% mark for a couple of files, but wasn't fired again before readyState indicated that the file upload was done. For a production implementation, you'll probably also want to hook into the loadend event to account for this. Here's a slightly modified version of the above example that demonstrates this:

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];
  reader.readAsDataURL(file);

  reader.addEventListener('progress', updateProgressBar);
  reader.addEventListener('loadend', updateProgressBar);

  function updateProgressBar(event) {
    if (! event.loaded || ! event.total) {
      return;
    }

    const percent = (event.loaded / event.total) * 100;
    progress.value = percent;
    document.getElementById('progress-label').innerHTML = Math.round(percent) + '%';

    if (percent === 100) {
      let msg = `<span style="color:green;">File <u><b>${file.name}</b></u> has been uploaded successfully.</span>`;
      feedback.innerHTML = msg;
    }
  }
});

Tapas Adhikary • Oct 24 '20

Great point Payton! I am gonna look into that and modify. Thanks for reading and commenting.

Daniel Finke • Oct 23 '20 • Edited

What specifies the domain of the Object URLs? In the embedded CodePen example #10, the URL ends up something like blob:https://cdpn.io/5a61e13d-0c89-490c-8cce-d6bf06483b9b. Not understanding how it came up with cdpn.io

Tapas Adhikary • Oct 24 '20

Hey Daniel, thanks for mentioning that. The object url doesn't mention any domain for this example. It is just expected to get the image converted for this example.

I have rechecked and found it working when I upload an image. Could you please elaborate the steps to get the problem mentioned? I am interested to know that and check.

Daniel Finke • Oct 24 '20

Hi Tapas, I was just examining the src attribute of the image in the iframe after the image was uploaded.

I figured out why I was confused though. In your post, the CodePen iframe has the src value https://codepen.io/atapas/embed/BazzaoN?height=600&default-tab=result&embed-version=2. But I didn't notice last time that there was a sub-iframe that CodePen put in with src value https://cdpn.io/atapas/fullembedgrid/BazzaoN?animations=run&type=embed. So it seems like the blob URL is just based on the URL of the page or frame that the JS is running in.

Seems kind of weird that the browser adds the domain in when the blob is local to you machine only anyway

Tapas Adhikary • Oct 24 '20

Sure, thanks Daniel.

John Horner • Oct 22 '20

This is very interesting but a true upload would write the file out to a server, with all the complexities that involves. File name rules, permissions, paths, umasks etc. Using this code what have we actually uploaded to? The browser’s memory?

Tapas Adhikary • Oct 23 '20

Yes John, you are right.

The scope of the article was to introduce the basics and focusing on the Html file upload tag and client side file object.

I am writing a series now to build on top of it to showcase with server side pieces using Node.js. Hoping that will get you what you are asking for. Please stay tuned.

Thanks for reading and commenting!