How to only accept images in an input file field

Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!

Of course you could add a server-side filter, but also having a client-side filter is a great UX for your users - no time wasted and no resources wasted to send a file to you and get back with an error.

You can do so by using the accept attribute, and specifying the MIME type of the files you accept.

image/* should catch all images.

<input type="file" name="myImage" accept="image/*" />

If you want to only allow some specific file types, list them:

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

You can check the browser support for this attribute here: https://caniuse.com/#feat=input-file-accept

The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!

More browser tutorials:

• Some useful tricks available in HTML5
• How I made a CMS-based website work offline
• The Complete Guide to Progressive Web Apps
• The Fetch API
• The Push API Guide
• The Channel Messaging API
• Service Workers Tutorial
• The Cache API Guide
• The Notification API Guide
• Dive into IndexedDB
• The Selectors API: querySelector and querySelectorAll
• Efficiently load JavaScript with defer and async
• The Document Object Model (DOM)
• The Web Storage API: local storage and session storage
• Learn how HTTP Cookies work
• The History API
• The WebP Image Format
• XMLHttpRequest (XHR)
• An in-depth SVG tutorial
• What are Data URLs
• Roadmap to learn the Web Platform
• CORS, Cross-Origin Resource Sharing
• Web Workers
• The requestAnimationFrame() guide
• What is the Doctype
• Working with the DevTools Console and the Console API
• The Speech Synthesis API
• How to wait for the DOM ready event in plain JavaScript
• How to add a class to a DOM element
• How to loop over DOM elements from querySelectorAll
• How to remove a class from a DOM element
• How to check if a DOM element has a class
• How to change a DOM node value
• How to add a click event to a list of DOM elements returned from querySelectorAll
• WebRTC, the Real Time Web API
• How to get the scroll position of an element in JavaScript
• How to replace a DOM element
• How to only accept images in an input file field
• Why use a preview version of a browser?
• The Blob Object
• The File Object
• The FileReader Object
• The FileList Object
• ArrayBuffer
• ArrayBufferView
• The URL Object
• Typed Arrays
• The DataView Object
• The BroadcastChannel API
• The Streams API
• The FormData Object
• The Navigator Object
• How to use the Geolocation API
• How to use getUserMedia()
• How to use the Drag and Drop API
• How to work with scrolling on Web Pages
• Handling forms in JavaScript
• Keyboard events
• Mouse events
• Touch events
• How to remove all children from a DOM element
• How to create an HTML attribute using vanilla Javascript
• How to check if a checkbox is checked using JavaScript?
• How to copy to the clipboard using JavaScript
• How to disable a button using JavaScript
• How to make a page editable in the browser
• How to get query string values in JavaScript with URLSearchParams
• How to remove all CSS from a page at once
• How to use insertAdjacentHTML
• Safari, warn before quitting
• How to add an image to the DOM using JavaScript
• How to reset a form
• How to use Google Fonts