File Upload Support on Mobile

I were quite surprised few weeks ago when I found out with Matt, my colleague, that no one has tested thoroughly which mobile browsers support input type=file and how to reliably detect the support. After an hour of Googling we literally gave up and decided to find it out ourselves. The results are shared here to everyone for future reference.

For the detection part, I am using similar code as Modernizr does, but I’ve added a separate user agent regexp to check against browsers that falsely report support. There are quite many of those false positives really, at least all Windows Phone devices running OS 7.0-8.0, Android devices running OS 1.0-2.2, Kindle devices running OS 1.0-3.0 and all WebOS devices running OS 1.0-3.0.5 (Although the latter ones being quite old already).

Testing

For the testing part, I used this page which was loaded on to all devices in our device lab. Thanks to David Blooman, Juha Ristolainen and Mike Arvela, I were able to test this on older Blackberry devices, Windows RT tablet and on Windows Phone 8 too. Below is the JS part used for the detection, which can also be found from GitHub:

// Detect file input support
var isFileInputSupported = (function () {
 // Handle devices which falsely report support
 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;
 }
 // Create test element
 var el = document.createElement("input");
 el.type = "file";
 return !el.disabled;
})();

// Add 'fileinput' class to html element if supported
if (isFileInputSupported) {
 document.documentElement.className += " fileinput";
}

Additionally, I tested manually on every device that the uploading actually works, and for that I used just basic html form:

<form action="http://www.tipjar.com/cgi-bin/test" enctype="multipart/form-data" method="post">
  <input type="file" name="image">
  <input type="submit" value="Upload">
</form>

Test Results

OS Supported?
Android 1.0—2.1 No
Android 2.2+ Yes
Blackberry 1.0—5.0 No
Blackberry 6.0+ Yes
BB Tablet OS 2.0+ Yes
Firefox OS 1.0 No
iOS 1.0—5.1.1 No
iOS 6.0+ Yes
Kindle OS 1.0—3.0 No
Maemo 5.0+ Yes
Meego 1.2+ Yes
Symbian 9.1-10.1 Yes
WebOS 1.0—3.0.5 No
Windows Phone 7.0—8.0 No
Windows Phone 8.1 Yes
Windows RT Yes

Notes

  • Android devices which are running OS2.1 and under still support file uploads through Opera Mobile and Opera Mini, but not through the default Webkit based browser.

  • Amazon Kindle Keyboard reports that it support file uploads, but when you click the ‘browse’ button, the device displays an alert box saying ‘file uploads not supported’.

  • On older Windows Phone OS the file input shows up, but doesn’t respond to touch at all or give any kind of feedback that it isn’t supported.

Conclusion

The support is actually quite good nowadays, Windows Phone OS and older iOS being the biggest drawbacks. I were also quite surprised to notice that even our oldest Symbian devices from around 2004 supported file uploads. Also, with almost all of the test devices, if the upload worked on the default browser, it also worked on other browsers like Firefox Mobile and Opera Mobile/Mini too.

Update 8 Jan 2013: False positives on Modernizr are now fixed and it's using the same UA detection introduced in this post, hooray!

Update 28 Apr 2014: Windows Phone 8.1 added.


← Blog