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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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:

1
2
3
4
<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 Works
Android 1.0–2.1 No
Android 2.2+ Yes
Blackberry 1.0–5.0 No
Blackberry 6.0+ Yes
Blackberry Tablet 2.0+ Yes
Firefox OS 1.0 No
iOS 1.0–5.1.1 No
iOS 6.0–7.1.2 Yes
iOS 8.0 No
iOS 8.0.2+ Yes
Kindle 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!

Update 28 Apr 2014: Windows Phone 8.1 added.

Remote Preview

Remote preview is a tiny JavaScript based tool which I built for our test lab. It allows you to preview any URL on large number of mobile devices simultaneously. Just enter a URL, hit enter, and new URL gets automatically loaded on each device. Remote preview works on platforms like Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS.

Remote Preview is a tiny JavaScript based tool that allows you to preview any URL on large number of mobile devices simultaneously.

Remote Preview works by making an ajax call every 1100ms to check if the url in the ‘url’ file is changed. If it is, the script will then change the src attribute of the iframe and load a new page into it. If there’s no changes, the script will just keep polling the url file until something changes. Remote Preview allows very fast previewing of different URL’s to check for possible layout problems, which can then be debugged using various other tools depending on the platform where they occur.

There are some issues and limitations with the way it’s being done, but as there currently is no other tool which allows you to preview web pages on all these platforms, I think this can be a handy addition to any test lab’s toolset.

Basic usage

Copy and paste all files to a public Dropbox folder/server/localhost, edit ‘url’ file and wait for devices to refresh. That’s all! You might also want to bookmark Remote Preview to your device’s home screen for fast & easy application like access later on (bonus: If you moved all files to a server or localhost, you can control the devices via web browser by pointing your browser to the directory named ‘control’).

Browser support

Current version is tested to be working on at least:

OS Browser
Android 2.1 – 4.1.2 Stock WebKit + Chrome
Blackberry 7.0 Stock Browser
iOS 4.2.1+ Mobile Safari
Mac OS X Safari, Chrome, Firefox, Opera
Maemo 5.0 Stock WebKit
Meego 1.2 Stock WebKit
Symbian 3 Stock WebKit
Symbian Belle Stock WebKit
WebOS 3.0.5 Stock WebKit
Windows Phone 7.5 Internet Explorer Mobile
Windows 7 Internet Explorer 9

Download

Remote Preview on GitHub

Building A Device Stand

Not so long after the device lab was born I realized that we need a much better way to store and charge all the 40+ devices. There didn’t seem to be any existing solution available which you could just buy, so I started thinking what would be the easiest way to do something like that myself. After some research I ran into this device testing station by 64 Digital and thought it looked like a perfect solution.

The main idea is to provide a dynamic and secure way to store phones, tablets and other devices and make it possible to use them for testing without the need to actually remove them from the stand. Devices are held in place using Velcro tape which is attached both to the back of the phones and the stand. That makes it easy to detach the phones, but it also makes them stick securely to the wall. The whole stand system is done from two 800mm wide racks, and I’m planning to make a third one too so that we have available space to continue expanding our device collection.

The wood materials for both racks cost under 30 euros. The Velcro tape was actually the most expensive part as 25 meters of it cost about 70 euros + shipping. I used two full work days to built these and third to paint them. I guess someone with actual experience might be a lot faster as about half of that time went into trial and error. ❦

See the process below and grab my drawings:

Stand drawings

Establishing An Open Device Lab

I wrote an article to Smashing Magazine. It’s an in-depth guide about how to establish an open device lab. The article gives practical tips about things like location, how to get devices, what devices to get and what software to use. It would not have been possible to write it without the help from Shaun Dunne, Jeremy Keith, David Blooman and Andre Jay Meissner. Thank you guys, I owe you one.

Read the article