Detect browser file input support

Question

I understand that Mobile Safari does not support <input type="file" />. I'd like to be able to display some sort of 'not supported' information if the user is unable to upload files via my HTML form.

I have looked through this question and although BK's answer is good, it isn't conclusive.

Is it perhaps wiser to remove the form based on device width? By that I mean test for device width with @media (max-device-width: 480px) {}. Is this a bad approach? Are there mobile devices on the market that support file uploads directly in the browser?

I know that iOS6 will support media uploads, but it isn't yet released. Are there others? How about Android? Windows Mobile?

Are you using a server side language at all? Are you even using a server? Your use case is a little vague... — FrankieTheKneeMan, Sep 18 '12 at 15:33
possible duplicate of [Detect browser support of html file input element](http://stackoverflow.com/questions/4127829/detect-browser-support-of-html-file-input-element) — Jukka K. Korpela, Sep 18 '12 at 15:41
It is non-constructive to post a duplicate when you are dissatisfied with the answers of an old question. Rather, contribute to improve the answers. — Jukka K. Korpela, Sep 18 '12 at 15:42
Is `$_SERVER['HTTP_USER_AGENT']` an option? ( http://www.php.net/manual/en/reserved.variables.server.php ) — FrankieTheKneeMan, Sep 18 '12 at 15:50
@JukkaK.Korpela How do you come to that conclusion? Asking the question again clearly *was* constructive, since scunliffe provided a different answer. The selected answer on the question that I linked to admits that it doesn't work on Android. Conversely, I don't understand why you think it's constructive to link to a “possible duplicate”, when *I had already linked to it*. — Jezen Thomas, Sep 18 '12 at 16:11
@FrankieTheKneeMan Yes, it is an option, though [I would rather not use browser-sniffing](http://www.quirksmode.org/js/support.html). — Jezen Thomas, Sep 18 '12 at 16:22
@JezenThomas, part of its being non-constructive is that the old question would remain with the unsatisfactory answer, and people who search for answers to their questions will be puzzled by the duplicates. — Jukka K. Korpela, Sep 18 '12 at 16:26
@JukkaK.Korpela And just how do you suggest I encourage people to contribute to the old question when I don't have the authority to unselect the incorrect answer? If that is your only gripe, then why not encourage scunliffe (assuming his solution works — I haven't tested on Android yet) to copy his answer to the old question as well? — Jezen Thomas, Sep 18 '12 at 16:43
@JezenThomas the code I posted works on a Samsung Galaxy Tab running Android 4.0.4 (not sure about previous versions) — scunliffe, Sep 18 '12 at 18:14

score 17 · Accepted Answer · edited Mar 26 '13 at 09:43

I just tried this out... and it works...

Try it yourself! http://fiddle.jshell.net/nmGRu/show/ (if you find any browsers that fail to report the correct result I'd like to know... ditto for any additional that do work it would help complete this answer)

Safari (iOS 5 and below) will return false as it does not support file uploads (specifically it lets you add the input, but flags it as disabled)... yet mobile browsers that support it like the Samsung Galaxy Tab (Android), BlackBerry PlayBook / BlackBerry 10 (I'm testing on the Dev Alpha) will return true as their browser does support uploads.

Correct test results so far:

Apple iPhone iOS 5 and below Safari (detects NO support)
Apple iPhone iOS 6 Safari (detects support - allows for photo/video selection)
Apple iOS 4/iOS 5, jailbroken, Safari Upload Enabler installed (detects support)
Apple iPhone w/Chrome (detects NO support)
Apple iPhone w/Opera Mini (detects support - allows for photo selection)
Android version of Chrome (detects support)
Android version of Firefox (detects support)
Android version of Opera (detects support)
BlackBerry OS7 SmartPhones (detects support)
BlackBerry PlayBook (detects support)
BlackBerry 10 (Dev Alpha and Z10) (detects support)
HTC Desire (detects support)
Samsung Galaxy Nexus (detects support)
Samsung Galaxy Nexus S (detects support)
Samsung Galaxy Nexus 7 Tablet (detects support)
Samsung Galaxy Note (detects support)
Samsung Galaxy S2 (detects support)
Samsung Galaxy S3 (detects support)
Samsung Galaxy Tab (detects support)
Tizen (detects support)

Incorrect detection test results so far:

Windows Phone {Tango} (detects support, but it does not actually have support)

Note: I'm working on a revision to this code to solve the detection on windows phone

Here's a clean version that just returns a boolean... and doesn't pollute the page.

function hasFileUploadSupport(){
  var hasSupport = true;
  try{
    var testFileInput = document.createElement('input');
    testFileInput.type = 'file';
    testFileInput.style.display = 'none';
    document.getElementsByTagName('body')[0].appendChild(testFileInput);
    if(testFileInput.disabled){
      hasSupport = false;
    }
  } catch(ex){
     hasSupport = false;
  } finally {
    if(testFileInput){
      testFileInput.parentNode.removeChild(testFileInput);
    }
  }
  return hasSupport;
}

alert(hasFileUploadSupport());

Very good! I haven't tested as extensively as you, but I'll take your word for it. Handling minute edge cases isn't such an issue in my case, and you've covered most of the popular devices on the market. Thanks! — Jezen Thomas, Sep 18 '12 at 19:55

Detect browser file input support

1 Answers1

Linked