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 →