10 useful HTML file upload tips for web developers

A bit of an older post, but still relevant: Tapas Adhikary goes over some HTML attributes one can set on an input[type="file"], and uses of the File API:

  1. Simple file upload
  2. Multiple file uploads
  3. Know about file metadata
  4. Know about file accept property
  5. Manage file content
  6. Validate file size
  7. Show file upload progress
  8. How about directory upload?
  9. Let’s drag, drop and upload
  10. Handle files with objectURLs

10 useful HTML file upload tips for web developers →


Not covered in Tapas’s article is the capture attribute. Combined with accept you can have a user on a mobile device immediately take a picture or video:

<!-- Capture photo using the front/selfie camera -->
<input type="file" accept="image/*" capture="user">

<!-- Capture photo using the back camera -->
<input type="file" accept="image/*" capture="environment">

HTML Media Capture Examples →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.