Browser file input detection

Question

I understand that Mobile Safari does not support <input type="file" /> . I would like to be able to display some "unsupported" information if the user cannot upload files through my HTML form.

I looked through this question , and although BK's answer is good, it is not final.

Is it perhaps wiser to remove the shape based on the width of the device? By this I mean checking the width of the device with @media (max-device-width: 480px) {} . Is this a bad approach? Are there any mobile devices on the market that support downloading files directly in the browser?

I know that iOS6 will support multimedia downloads , but it has not yet been released. Are there any others? What about Android? Windows Mobile?

Answer 1

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

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

Safari (iOS 5 and below) will return false , since it does not support downloading files (in particular, it allows you to add input, but disables it) ... but mobile browsers that support it like Samsung Galaxy Tab (Android), The BlackBerry PlayBook / BlackBerry 10 (I'm testing on Dev Alpha) will return true , as their browser supports loading.

Correct test results:

• Apple iPhone iOS 5 and below Safari (detects NO )
• Apple iPhone iOS 6 Safari (detects support - allows you to select photos / videos)
• Apple iOS 4 / iOS 5, jailbroken, Safari Upload Enabler installed (detects support)
• Apple iPhone with Chrome (detects NO )
• Apple iPhone w / Opera Mini (detects support - allows you to choose a photo)
• 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 (discovers support)

Invalid detection test result:

• Windows Phone {Tango} (detects support , but it actually has no support)

Note. I am working on revising this code to resolve detection on a Windows phone.

Here is a clean version that just returns a boolean ... and does not 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());