Input type=File "Accept" property does not work in Chrome?

Question

Have been through quite some documentation but don't seem to get this very basic thing working in Chrome.

<input type="file" accept=".jpg, .png"/>

The dialog that opens just shows "Custom Files" in the extension drop-down. See this Fiddle.

It only seems to work with a single extension specification. Also tried using some mime types to no avail.

Answer 1

I am agree with @Eugenio comment. You can validate it at client-side and server-side.

if you use accept="image/*" instead Custom Files it will show Image Files

 function validate() {
  var fileName = document.getElementById("fileType").value;
  var dot = fileName.lastIndexOf(".") + 1;
  var extFile = fileName.substr(dot, fileName.length).toLowerCase();
  if (extFile == "jpg" || extFile == "jpeg") {
   //accepted
  } else {
   alert("Only jpg and jpeg image files allowed!");
  }
 }

<input type="file" id="fileType" accept="image/*" onchange="validate()"/>