Input accept=“image/png” is not working in Firefox

Question

jsbin

It\'s expected that the file dialog accepts png files only. But accept=\"image

Answer 1

As other answers describe, Firefox just does not support type="image/png" yet. Instead, it ignores the attribute and does not apply any file filter. Using type="image/*" would work, but then the filter would allow all image files.

Perhaps the best practical workaround is to use JavaScript code that checks for the file name extension. It does not really prove anything, but close to 100% certainty, PNG files have names ending with .png and other files don’t. Sample code (replace the rude alert by a function that suit your UI design):

Your image (.png):

The downside is that when scripting is turned off, Firefox will accept any file, even though accept="image/*" would at least restrict the files to image files. However, JavaScript being disabled is probably rare enough, as compared with the trouble of browser sniffing needed to server different type attributes to different browsers.

You should naturally check the file types on the server before doing anything with the files, since any filtering of file types is easily bypassed, by accident or intentionally-