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

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/*">

• Use image/png to accept .png images:

  <input type="file" accept="image/png" />
  

• Use image/jpg to accept .jpg images:

  <input type="file" accept="image/jpg" />
  

• Use image/jpeg to accept .jpeg images:

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

This same thing goes for video and audio:

• For video:

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

• For audio:

  <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!