How to Accept Only Image for File Input Type in HTML
The web allows you to create inputs to accept things like text, email, password, and files simply by changing the type attribute.
When it comes to files, by default it will accept all file types.
However, you can restrict the types of files that can be uploaded to just images if you want.
In this post, we'll learn how to only allow images to be uploaded into a file input field in HTML.
How to only accept images in a file input field
As mentioned before, you can use an input type of
file to accept file uploads.
It looks like this:
<input type="file" name="file-input">
This will accept all file extensions but if you add an
accept attribute, you can restrict the extensions that it will accept, like this:
<input type="file" name="file-input" accept="image/*">
You can even be more specific and add MIME types to the
accept attribute, like so:
<input type="file" name="file-input" accept="image/jpeg, image/png">
This attribute will only accept files that are of type
If you only want to accept
gif files, you can use this:
<input type="file" name="file-input" accept="image/gif">
Either way, you have full control over what files are accepted by specifying the file extensions in that attribute.
In this post, we learned how to specify the types of files that are allowed to be uploaded to a file input field.
To only allow for images, you can use the
accept attribute and pass it the file formats you want.
Thanks for reading and happy coding!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!