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.

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.

• javascript
• html

3 Answers 3

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".

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!

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.
        }    
    })
});