How to allow input type=file accept only images

In this short post, we will see how to allow the input field with type=file to accept only images from users.

Let's say we have an input field as type=file.

<input id="upload" type="file">

Now, to make the input field accept only images, we add the accept attribute and specify the MIME type of files we want it to accept, here images.

If you want it to accept all formats of images, we can do this.

<input id="upload" type="file" accept="image/*">

This will allow it to accept all image formats like jpg, jpeg, png, gif, etc.

To make it accept only a specific image format, we can do this.

<input id="upload" type="file" accept="image/jpeg">

Now, it will only accept jpeg format images.

We can also add multiple image formats like this.

<input id="upload" type="file" accept="image/jpeg, image/png, image/gif">

It's highly recommended to do a validation check on the server-side too once the file is uploaded from the client side.