AI Workshop: learn to build apps with AI →
File APIs: Accept only images in file input

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


You should still validate on the server, but a client-side hint improves UX—users do not upload a file only to get an error.

Use the accept attribute with the MIME types you accept. image/* accepts all image types.

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

To allow only specific image 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

Lessons in this unit:

0: Introduction
1: The File object
2: FileList
3: FileReader
4: Blob
5: FormData
6: ▶︎ Accept only images in file input
7: Check if checkbox is checked
8: Reset a form
9: File upload with server handling
10: Drag and drop file upload
11: Validating file size before upload