I had the need to have a file upload for images, so I added my little input type="file" field:

<input type="file">

I only wanted images to be allowed to be uploaded by the browser.

It’s a common thing, but I always forget how to do it.

Use the accept attribute and pass image/* to allow all images:

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

Or image/png to only accept PNG images:

<input type="file" accept="image/png">

The same syntax can be done to only accept videos:

<input type="file" accept="video/*">

or audio:

<input type="file" accept="audio/*">

Or a combination of them:

<input type="file" accept="image/*,audio/*,video/*">

One common thing - add multiple to allow uploading more than one:

<input type="file" multiple accept="image/*">

Of course this is only client-side validation, and you should also validate the mime type on the server when you receive the files.

Lessons in this unit:

0:	Introduction
1:	Preserving white space and line breaks in a string in HTML
2:	HTML, avoid displaying a broken image if the image is not found
3:	The HTML figure tag
4:	Change image source in dark mode
5:	▶︎ Accept only images in file input
6:	HTML comments
7:	Some useful tricks available in HTML5
8:	How to make an hr invisible
9:	Conditionally set an HTML attribute
10:	An HTML element id is a global variable