Input accept = "image / png" does not work in Firefox
<input type="file" accept="image/png"> It was expected that only png files would be accepted in the file dialog box. But accept="image/png" does not work in Firefox. How can i do this? Postscript It works in Chrome.
There seems to be a problem with Firefox with some types of extensions. You can learn more about this error here .
The last update of this error comes from a few months ago, and it seems that it has not yet been resolved. At the moment, I would suggest checking files on the server side, or at least you can use JavaScript to check the file extension before downloading it.
As the other answers describe, Firefox does not yet support type="image/png" . Instead, it ignores the attribute and does not apply a file filter. Using type="image/*" will work, but then the filter will allow all image files.
Perhaps the best practical solution is to use JavaScript code that checks the file name extension. This proves nothing, but close to 100% certainty, PNG files have names ending in .png and other files. Sample code (replace the rough alert with a function that matches your interface design):
<form action="..." enctype=multipart/form-data method=post onsubmit="return checkPNG(document.getElementById('img'))"> <label for=img>Your image (.png):</label> <input type=file id=img name=img accept= "image/png, .png" onchange="return checkPNG(this)"> <input type=submit value=Send> </form> <div id=f></div> <script> function checkPNG(el) { if(el.value) { var parts = el.value.split('.'); if(parts[parts.length - 1].toLowerCase() === 'png') { return true; } else { alert('Please specify a PNG file.'); return false; } } else { return true; } } </script> The downside is that when you turn off scripts, Firefox will accept any file, although accept="image/*" will at least limit files to image files. However, disabled JavaScript is probably quite rare compared to browser-related issues requiring a server for different type attributes for different browsers.
You should, of course, check the file types on the server before doing anything with the files, since any filtering of file types is easy to bypass, by accident or intentionally -
To partially comply with the Firefox accept attribute, you can use this code copied and modified from Jukka K. Korpela, reply (thanks! +1), with the added bonus of respect for the attribute of the original attribute, and not for clippings for PNG, not just one extension .
function checkFileExt(el) { var accept=el.getAttribute("accept"); if(el.value && el.value!="" && accept && accept!="") { var parts = el.value.split('.'); if(parts.length==1) { alert("File with no extension: '"+el.value+"'. Allowed: "+accept); return false; } var ext=parts[parts.length - 1].toLowerCase(); accept=accept.split(','); var found=false; for(var i=0;i<accept.length;i++) { if("."+ext==accept[i]) { found=true; break; } } if(found) { return true; } else { alert("Wrong file: '"+el.value+"'. Allowed: "+accept); return false; } } else { return true; } } You can use it as follows:
<input name="fle_txt" value="" accept=".txt,.doc,.docx,.xls,.xlsx" onchange="checkFileExt(this);" type="file"> It will not work with mime types or groups of type image/* (it will simply ignore them), but can be modified to add a list of extensions for each type of mime [for example, add .jpg,.jpeg to the accept array if it finds image/jpeg in it]
Read the Mozilla document here. Currently, not all browsers go so deep as to support a specific file extension, but they all support a file type, such as image / video.
accept If the value of the type attribute is file, this attribute indicates the types of files that the server accepts; otherwise it is ignored. The value must be a comma-separated list of unique content type specifiers: A valid MIME type with no extensions audio/* representing sound files HTML5 video/* representing video files HTML5 image/* representing image files HTML5 the accept attribute does not match supported by one of the main browsers.
You must use php or javascript to validate the form.