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