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?

Answer 1

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());