iOS 6 and HTML5 input type – File

Finally, it’s here. Now we can upload photos and videos from the Photo Library using a regular input file element. This was previously only possible via the use of Phonegap and other frameworks, in Native application.

Previously, if we need file upload feature in our mobile web site, we need to go with native application. Because there is no support for file upload in iOS Safari Browser.

Where in other hand Android support file upload from it V3.0 and Mobile Firefox 10.0 also support this feature.

Now, in iOS 6 also we have option to upload file (Photos/Videos) from mobile safari browser. This is real cool feature.
We can browse files from Photo library or Take photo (live).
HTML Code :

<input type=”file”>

File input type in iOS6

This is above HTML code will show action sheet like this. So, we can upload from existing one or new one (live) may be photo or video that’s our choice.

We can also upload multiple files at a time, HTML code is here

<input type="file" multiple>

File input type in iOS6 with multiple file upload

We can also set access type, so we can say browser to allow only photos or videos. Using this HTML code

<input type=file accept="video/*">
<input type=file accept="image/*">

File input type in iOS6 with accept video or photo

accept = “video/*” and accept=”image/*” we allow only access to that file types.

HTML5 getting more power and it’s giving more boost to web developers, who can make there web site run in mobile smooth as same as PC web site with out any restrictions. HTML5 is the real game changer for mobile apps.

Here is another post about iOS 5 and HTML5 input types


Leave a Reply