Dhairya Shah
Dhairya Shah's Blog

Dhairya Shah's Blog

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

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

Dhairya Shah's photo
Dhairya Shah
·Aug 28, 2022·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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!

 
Share this