Detect if is supported

I’m building a mobile version of my site which has a file upload facility, accessed via an ‘Upload Button’

I would like to hide the button from iPhone users, as the control just appears greyed out – is this possible?

I don’t really want to detect the iPhone; I feel it would be much better to detect the feature – making it start to work automatically should Apple enable this (or the phone is Jailbroken, or something…)

Function to check whether input[type=file] is implemented:

function isInputTypeFileImplemented() {
    var elem = document.createElement("input");
    elem.type = "file";
    if (elem.disabled) return false;
    try {
        elem.value = "Test"; // Throws error if type=file is implemented
        return elem.value != "Test";
    } catch(e) {
        return elem.type == "file";
    }
}

Fiddle: http://jsfiddle.net/8EqEE/9

UPDATE: This is now part of Modernizr now.

There is a pull request for modernizr that seems to work. Essentially it just checks:

var elem = document.createElement('input');
elem.type="file";
return !elem.disabled;

Create a <input type="file"> and check to see if it’s disabled.

function isFileUploadImpossible() {
    var el = document.createElement("input");
    el.setAttribute("type", "file");
    return el.disabled;
}

Tested in iOS 4.2.1, Android 2.3.4, Chrome 17, Firefox 11, IE7.

Note that I haven’t tested this, so I’m not sure if it would work. This is basically how you test support for HTML5 input types (e.g. <input type="color" />). But you can try it:

function upload_supported() {
  var file_input = document.createElement("input");
  file_input.setAttribute("type", "file");
  return file_input.type !== "text";
}

This is based on the browser’s behavior of resetting the type attribute to text when it encounters an unknown input type. However, since you say that it appears grayed out, it would mean that it’s not unknown, per se.

Read More:   Why does (0 < 5 < 3) return true?

A hybrid of the value based error checking (try/catch) plus a check for disabled seems to give good coverage across all the PC and mobile browsers we tested.

alert((function isInputTypeFileImplemented(){
  var elem;
  try {
    elem = document.createElement("input");
    elem.type = "file";
  } catch(e) {
    return -1; // type=file is not implemented  
  }
  try {
    elem.value = "Test";
    if (elem.value == "Test") {
      return -2; // type=file should throw an error on line above
    } else {
      if (elem.disabled) {
        return -3; // type=file disabled in iOS < 6
      } else {
        return true;
      }
    }
  } catch(e){
    return true; // type=file implemented correctly
  }
})())

NOTE: You could change the logic order around if you prefer a different flow.

Fiddle: http://jsfiddle.net/BRk5J/

Update to Rob W’s solution above that supports iOS 5 + iOS 6 Beta too. (Causing an exception isn’t what I would recommend, but this works):

     function isInputTypeFileImplemented(){
        var elem = document.createElement("input");
        elem.type = "file";
        try {
            elem.value = "Test"; //If type=file is implemented, this would throw an 
            if (elem.disabled) {
                return false;
            } else {
                return true;
            }
        } catch(e){
            return false;
        }
    }

I too have been searching for a solution to this problem. It is not as simple as the solutions suggested here already. Some of the browsers claim to support certain types but some of those types have been disabled due to incompleteness. So what ends up happening is that when you return InputElement.type it may return as the “file” type or “tel” or “number” but it is still treated by the browser as “text”.. Sadly I do not think you can do this atm unless you can talk the browser devs into fixing it so that the disabled types return as text..

Read More:   Chrome Console: reload page

as an added note IE returns all unsupported types as text. I have tested this with lastest versions of Chrome and FF aswell. Chrome “lies” about support for numbers, telphone types i know so far and FF also returns tel when it is not supported. I am sure this happens with other types as well.


The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts