Excess fields of <Input> attribute “accept” in Internet Explorer

Question

I want to specify whose files I can upload, for example only certificates . In Firefox and Chrome this behavior is ok, but when I try to specify file type in IE, there are two additinal fields: images and html. Why? I wanna remove them.

The code is:

 <input accept=".cer,.pem,.der" id="certRegField" name="user_cert" type="file"> 

Answer 1

Since it is possible for someone from IE to add another format, even from other browsers by choosing "all files", I would suggest you to add a check for the file type that was added after the user added the file, using javascript and jquery. The code below checks if the user added a file with one of your accepted extensions and if not it alerts a message and the user has to choose a file again.

Code:

// To add the jquery library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

// HTML:

<input accept=".cer,.pem,.der" id="certRegField" name="user_cert" type="file">

// Javascript:

<script type="text/javascript">

$(function(){
  $('#certRegField').change(function(){
    var url = $(this).val();
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (!(ext == "cer" || ext == "pem" || ext == "der")){
      document.getElementById("certRegField").value = "";
      alert("Unaccepted file format, try again.");
    }
  });
});

</script>

JSFiddle: http://jsfiddle.net/stN8U/222/

Sources:

• linking jquery in html
• onchange file input change img src and change image color