How To Fix iPhone/iPad Mobile Safari Greyed out and Disabled File Upload Control
I recently did a web application for a client. After the completion, they wanted mobile app version of the same application which incidentally included, among other things, an image upload control. I went ahead and embeded a mobile friendly layout and everything worked just fine until I checked it in the iPhone.
While testing in Mobile Safari on iPhone, although all the functionality worked as expected except for the photo upload filed. The browse field was greyed out and disabled. Initially I thought it was some coding error but soon found out that file upload is simply not possible from Mobile Safari!!
And the issue is not just disabling the file upload control, the way Mobile Safari handles input type=”file” is something that really confuses the user. Rather than saying that Safari does not allow uploading, it just greys out the file upload input field which is misleading to say the least.
Using iPhone or iPad, there’s no way you can make Mobile Safari to upload file, but here are some possible work arounds for this disabed file control.
iCab Mobile Browser
iCab Mobile is a web browser for the iPhone, iPod Touch and iPad. It provides many features such as, Tabs for multiple web pages at the same time, Download Manager, The Fullscreen Mode, Filters to block ads but most importantly, it allows uploading from your iPhone and iPad using web forms via file upload control.
You can download iCab Mobile from the Apple AppStore.
IMPORTANT: One user has reported that iCab Browser does not upload images anymore so be careful before buying the browser.
Picup iPhone App
Another solution is to use Picup iPhone App. It is a native iPhone Application that facilitates photo uploads using the web form. Since file-upload form fields don’t work in Mobile Safari, a webapp can instruct Picup to choose and upload a photo. Once the file upload is complete, Picup returns control to the webapp with information about the uploaded file.
You can check the Picup App details and demo here
You can view this tutorial I posted for uploading images in MobileSafari using Pickup App in a php web application.
UPDATE: Since I published this blog post, I have put together these two following versions which will make it easy for those who need the working complete example of the above article. I have integrated those options in forms which were routinely asked and requested by users. Please check and test the demos both in normal browsers and Mobile Safari.
|Minimal Code version||Session & User ID version|
|This simple minimal code returns the path of uploaded image to your php script in addition to other form fields. This demo shows how you can incorporate other form fields in addition to image uploading both in normal browser and Mobile Safari. In this script, file is directly uploaded to your server using POST method.||This simple minimal code returns the path of uploaded image with user id and session data to your php script in addition to other form fields. This demo shows how you can incorporate session data and pass user id with form fields in addition to image uploading both in normal browser and Mobile Safari. In this script, file is directly uploaded to your server with session data.|
|Demo Here||Demo Here|
|jQuery Mobile version||Multiple Images jQuery Mobile version|
|This demo also uses Picup app and post image to your own server along side other form fields. Once the image is uploaded successfully, it’s shown to user and the user clicks and returns to the form to fill other fields and submit it. This demo uses jQuery Mobile framework for consistent look and feel across all platforms. This also shows how you can incorporate other form fields in addition to image uploading with normal browser and using Mobile Safari. All you have to do is to add your own fields and that’s it.||This demo also uses Picup app and allows you to upload multiple images to your own server along side other form fields. Once the image is uploaded successfully, it’s shown to user and the user clicks and returns to the form to upload other images and then fill other fields and submit it. This demo uses jQuery Mobile framework for consistent look and feel across all platforms. This also shows how you can incorporate other form fields in addition to image uploading with normal browser and using Mobile Safari. All you have to do is to add your own fields and that’s it.|
|Demo Here||Demo Here|
Pipe iPhone Emails with attachments to Server-side scripts (using PHP or any other server-side language)
One of the practical solutions to this Mobile Safari disabled uploading problem is emailing the photo or file as attachment from iPhone to application email address and then pipe emails to server side PHP script. User from email address can be used to attach the photo submission to that user. In my application, I had some other input fields which were to be filled in conjunction with photo submission.
You can simply change the process of photo submission in case there are additional questions. If the user is using Mobile Safari Browser, ask the user to submit photo via iPhone email first, then pipe the photo to PHP script and bind it to user account and keep it in ‘pending submission’ status. Once the user clicks on the pending entry after logging in, he can be asked the remaining questions for completion of that entry.
That’s the logic, how this email can be piped and binded to that user is article for another day.
QuickPic iPhone App
Another possible solution is to suggest QuickPic iPhone App installation for your users. QuickPic allows you to transfer photos directly from your iPhone to any computer using a web browser over WiFi.
QuickPic allows you to choose photo from your camera roll, photo library, or take a new picture and works over Wifi. It automatically rotates photo to correct orientation. It works on Mac, Windows, or Linux.
This is the best solution in my opinion but not sure if your client would agree to this.
For this to work, you need to modify your code a bit. Just detect the Mobile Safari on server side and show this message.
When the user try to click ‘Browse File’, a photo of an Android, Nokia or Windows handset should appear, with a message stating ‘YOU SHOULD HAVE BOUGHT ONE OF THESE’.
With this lighter note, I’d say that Apple really needs to change its draconian policy of disabling uploading control and give its faithful customer this basic feature in Mobile Safari, or else perish. In this day and age of desire to share everything and anything instantly, it’s mind-boggling why Apple would opt to screw its customers.
Hope that helps.