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.

Natnael Getenew • Oct 22 '20

Learned a lot! Thanks

Tapas Adhikary • Oct 22 '20

Thank you Natnael. Very glad as it was useful to you!

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!

Shaiju T • Oct 20 '20

Very useful post, 😄

Tapas Adhikary • Oct 21 '20

Glad it was useful, Shaijut.

Paweł Kowalski • Oct 20 '20

Heh, file upload has so many weird quirks, especially when dealing with images, i just use Uppy and go on with more important tasks ;)

z3r0 • Oct 21 '20

Great artical, Thanks so much :)

Tapas Adhikary • Oct 21 '20

Thank you for reading and liking!

artydev • Oct 21 '20

Thank you very much

Brian Juul Andersen • Oct 22 '20

Good article. Thank you 🙂👍

Tapas Adhikary • Oct 22 '20

Thank you, Brian!

Chidiebere Ogujeiofor • Oct 22 '20

Wonderful article!

Tapas Adhikary • Oct 22 '20

Thank you very much!

Nicholas @ 127.0.0.1 (::1) • Oct 22 '20

Think this is the best HTML article ive read.

Tapas Adhikary • Oct 22 '20

Yaay... That's huge! Thank you very much.

olsard • Oct 20 '20

Great, thanks for sharing!

Tapas Adhikary • Oct 20 '20

Thank you!

Yagizhan Avci • Oct 20 '20

Thank you so much for the explanation.

Tapas Adhikary • Oct 20 '20

Thank you very much.. Glad it was useful!

Mustafa Onur Çelik • Oct 20 '20

good one 👍🏻✨

Neelam • Oct 20 '20

Thanks so much for this post. I now have a much better understanding of the file upload system.

Tapas Adhikary • Oct 20 '20

Wow, Thanks Neelam! Glad it was useful.

Mateen Gbadamosi • Oct 26 '20

Thanks a lot for this. Best article I've read today

Tapas Adhikary • Oct 26 '20

Thank you Mateen!

kritikaramesh • Oct 22 '20

Thankyou so much! 😇

Tapas Adhikary • Oct 22 '20

Thank you!

Tapas Adhikary • Oct 21 '20

Thanks Jordan.

Maxwell Morrison • Oct 20 '20

Thank you for such an amazing tips.

Tapas Adhikary • Oct 20 '20

Thanks Maxwell.. Glad it was helpful.

Yahaya Oyinkansola • Jun 22 '24

This was quite an insightful read of HTML file upload functionality, even in 2024, this is very valuable! Has anything changed about this over the years?