How to detect if browser supports file uploading? (Mobile + Desktop)

Question

I'm developing an application for both mobile and desktop browsers. I'm wondering if there is anyway to detect if a browser supports file uploading. I'm looking specifically for feature detection and not browser detection. Is there any way to find out?

Server-side or client side is fine.

Thanks

Esdras

Answer 1

client side javascript:

<input type="file" name="file" value="" id="fileUploadField1">      
<script type="text/javascript" charset="utf-8">
    if (document.getElementById('fileUploadField1').disabled)
        { document.write('your device does not allow uploads');     }
        else
        { document.write('your device does allow uploads');     }
</script>

Tove

To see for yourself, go to this from your iDevice: jsfiddle.net/Q2b8E/embedded/result – Esdras

This approach will give false positives on quite a few devices - see the article linked to in Viljami's answer – Avunculate

Thank you for the update. I see his blog was just updated yesterday also stating the Modernizr also uses his technique. – Tove

sidenote: charset attribute is only valid when src is given, according to W3C validator. – Tortuosity

Answer 2

You might be interested to read this article about current input type=file support on mobile and how to detect it: http://viljamis.com/blog/2012/file-upload-support-on-mobile/ (the detection is currently tested to be working on ~120 different mobile browser/mobile OS combinations).

Basically, we are just using similar detection as Modernizr does, but use UA detection as a backup to filter out those mobile browsers that falsely report support (there really doesn’t seem to be any other way to detect it reliably than using these both, feature detection and browser detection).

Laze

Yours is a much better solution than the accepted answer and I would direct anyone looking at this question to consider using this solution rather than the accepted one. – Caton

Answer 3

You can use Modernizr framework with forms-fileinput extension. Give it a try.

if Modernizr.fileinput
  // you can use file inputs

Visit the Modernizr download page and check the forms-fileinput extension (expand the "Non-core detects" section).

Tortuosity

Could you include in your answer some kind of example of how to use both Modernizer and the File API Extension? For example, once the extension adds the filereader test, how do I use it? – Esdras

I downvoted this in haste but after I researched a bit more I realized that it's a great answer, and stupid stackoverflow won't let me vote it back up. Sorry :( – Gwen

it's okay. 1 downvote doesn't hurt me. at least the answer can help you in some ways. – Tortuosity

This is good advice, but i would think, you rather need the 'forms-fileinput' extension than the 'file-api' extension, if you just want to check, wether the device can handle file uploads. – Womanize

I've updated the answer to refer to forms-fileinput as it is the correct extension to use. – Tutti

Answer 4

Modernizr now supports a check for whether or not file uploads are supported.

From: What is the best way to check if user can upload files?

if(Modernizr.fileinput) {
    //file input available!
} else {
    //No file input :(
}

If you're worried about the size of this library, you can always get one component at a time - http://modernizr.com/download/ ... or you can just copy the code they use: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/forms/fileinput.js

if(navigator.userAgent.match(/(Android (1.0|1.1|1.5|1.6|2.0|2.1))|(Windows Phone (OS 7|8.0))|(XBLWP)|(ZuneWP)|(w(eb)?OSBrowser)|(webOS)|(Kindle\/(1.0|2.0|2.5|3.0))/)) {
    return false;
}
var elem = createElement('input');
elem.type = 'file';
return !elem.disabled;

Hachure