Detect browser support of html file input element

Question

Is there a way with a javascript/jquery/crazy-css-hack to detect if the user's browser supports rendering a functional <input type="file" /> file upload element? For example, the safari browser on iOS won't render the element and I would like to instead show a message to the user that the functionality isn't supported. I know I can inspect the user agent and check to see if it an iphone/ipad/etc but I don't know what other browsers do or do not support it or will or will not support it in the future.

Answer 1

Galambalazs' answer pointed me in the right direction for iOS only. I ended up using this:

function supportsFileInput() {
  var dummy = document.createElement("input");
  dummy.setAttribute("type", "file");
  return dummy.disabled === false;
}

However, it doesn't work for most Android devices, as this function always returns true but renders the button with the text "Uploads disabled".

Answer 2

iOS renders the file input element as "disabled". So you can test if there is a disabled input field. I used jQuery to do so.

jQuery(function($) {
    $(this).find('[type=file]').each(function () {
        if ($(this).attr('disabled')) {
        // do sth.
        }    
    })
});

Answer 3

You can write a function to do dummy test:

function supportInputType(type) {
  var dummy = document.createElement("input");
  dummy.setAttribute("type", type);
  return dummy.type !== "text";
}

Better yet if you want to execute only once:

var SUPPORT_INPUT_FILE = supportInputType("file");

Then you can use this "constant" in all your code.

The way the test works: First it creates a dummy element. It will have the default type = "text". Next you try to set it to file. In case the browser doesn't support this type it will remain text.

Have fun!