Aug 28th, 2022

How to allow the input field to accept only image files?

Author Picture

Dhairya Shah

Software Engineer

To let users upload files, we need the use of the <input type="file"> tag:

<input type="file" />

Now, I want to only allow images to be uploaded. So, to do that:

<input type="file" accept="image/*">
<input type="file" accept="image/png" />
<input type="file" accept="image/jpg" />
<input type="file" accept="image/jpeg" />

This same thing goes for video and audio:

<input type="file" accept="video/*">
<input type="file" accept="audio/*">

It can be also in a combination,

<input type="file" accept="image/*,video/*,audio/*">

Note: This is client-side and the file upload type can be changed. You need to configure and validate the MIME type in your server when the file is received.

Thanks for reading

Follow me on Twitter

Thanks for reading!