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

To make Firefox partially respect the accept attribute you can use this code, copied and modified from Jukka K. Korpela's answer (thanks!+1), with the added bonus of respecting the original item accept attribute, not juts for PNGs, 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 like this:

<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 like image/* (it will just ignore them), but could be modified to add a list of extensions for every mime type [like appending .jpg,.jpeg to the array accept if it finds image/jpeg in it]

Answer 2

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):

<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 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-

Answer 3

Apparently there's an issue specific to Firefox with some extension types. You can read more about this bug here.

The latest update on this bug is from a couple of months ago and it seems to not yet be resolved. For now, I would suggest server-side file-checking, or at the very minimum you can use JavaScript to verify the file's extension before it gets uploaded.

Answer 4

Read Mozilla Doc here Currently not all browsers go to that deep to support specific file extention, but they all support a file type, like 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

Answer 5

the 'accept' attribute is not properly supported by any of the major browsers.
For form validation you should use php, or javascript.