Menu
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?
240
The easiest way is to check if there are any files in temporary memory. If you want to get the change event every time user clicks the file input you can trigger it. Show activity on this post. In my case i had to hide submit button while users were selecting images.
The accept attribute specifies a filter for what file types the user can pick from the file input dialog box. Note: The accept attribute can only be used with <input type="file"> . Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.
The only way to set the value of a file input is by the user to select a file. This is done for security reasons. Otherwise you would be able to create a JavaScript that automatically uploads a specific file from the client's computer.
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:
Incorrect detection test results so far:
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());
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
