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

You can use it like this:

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]