Mobile HTML5 Uploader

After a recent iOS8 release, our HTML5 uploader stopped working there. It was the Apple's fault and fortunately they were kind enough to fix it in 8.0.2 released shortly. But this issue made me to recall the idea of a mobile-friendly HTML5 uploader.

Our HTML5 uploader is not looking so good on a mobile phone out-of-the-box. It's user interface is designed for desktop (and it mimics Flash uploader), which means that the buttons are too small and screen space is not used rationally. It is not so critical on tablets, but using the uploader on a mobile phone is not very exciting experience.

Fortunately, it is easy to fix:

  1. Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the <head> of your page. It will avoid displaying the page with the incorrect scale on a device. If you optimize your website for mobile devices, I am pretty sure that you have already done that.
  2. Modify width/height of the uploader buttons and other elements and hide unnecessary panels by a custom CSS with media queries. Just add @media screen and (max-width: 800px) {} section to CSS and put the necessary styles inside.
  3. Play with the uploader params to use the values which makes sense for the mobile users. For example, it makes sense to use the view mode Thumbnails instead of Tiles, etc.

The next update will include the typical mobile settings and by default the uploader will look like this (as long as you provide a proper viewport meta tag):

some picture

So although it still won't be a full-fledged replacement for Aurigma Up (due to a poor performance and available memory), you can use it to upload up to a dozen of photos directly from a browser. For larger amount of files, I would still recommend to use our standalone app (i.e. Aurigma Up).

yo