Limit file upload input to specific types

This one is really easy.

You can use the accept attribute to define which file types a user can upload.

Be aware though. You should be validating this in the code which receives the upload too. This isn’t foolproof and it’s very easy to change HTML markup from a browser.

This then, it is a helpful measure because when users go to choose a file, their operating system will show which file types may be uploaded – removing the step of a user having to submit a form and arrive at an error message.

Here’s the code:

<input type="file" accept="">

Now you need to know what to put in the accept attribute:

Value	Description
image/*	Any image
video/*	Any video.
image/png	Any PNG image
image/webp,image/avif	A WebP or an AVIF image

These values are MIME types and there’s a really good list of MIME types on the mdn web docs.

Separate values with commas to use more than one or use the first part (e.g., image) and then an asterisk (image/*) for any type of images.

And accept multiple files in a single upload input like this:

<input type="file" accept="" multiple>