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!
- How to Install Node on Windows, macOS and Linux
- Managing PHP Dependencies with Composer
- Git Tutorial: Learn how to use Version Control
- How to deploy a .NET app using Docker
- Best Visual Studio Code Extensions for 2022
- How to deploy a PHP app using Docker
- How to deploy a Node app using Docker
- Getting Started with Handlebars.js
- Using Push.js to Display Web Browser Notifications
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up a Local Web Server using Node.js