The HTML5 file API allows you to restrict which kind of files are accepted by simply setting the accept attribute on a file input, e.g.:
<input type="file" accept="image/jpeg">
Specifying multiple MIME types separated by a comma (e.g.
image/jpeg,image/png) or using wildcards (e.g.
image/* for allowing all types of images) give you a quick and powerful way to restrict the type of files you want to select. Here's an example for allowing any image or video:
<input type="file" accept="image/*,video*">
By default, the file input lets the user select a single file. If you want to enable multiple file selection, simply add the
<input type="file" multiple>
You can then read all the selected files via the file input's
files array. See read file as dataUrl