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. |
| $15.00 | $25.00 |
| 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. |
| $35.00 | $55.00 |
| 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.
You can check the application details here. Here are some code samples for integration in php web forms.
Best Solution
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.
Cheers!
Just to confirm, iCab is working for file uploads, at least for WordPress and several online contact signup forms where you can add a picture etc.
I’m not going to be switching over permanently, but it seems to be the easiest app-based solution for uploading files. The best part is that you can download a file, keep it in the file manager, and then reupload it somewhere else, which is exactly what I do for WordPress plugins!
That’s good. but when you are asking your web app users to upload images, you can’t expect them to buy a browser just to use their website. You have to offer them uploading via Mobile Safari or else they will simply close the app. Since Picup is a free app, they don’t mind to download and use it from within Mobile Safari.
That’s good. But when you are asking your web app users to upload images, you can’t expect them to buy a browser just to use their website. Since Picup is a free app, they don’t mind to download and use it from within Mobile Safari.
You can also use filepicker.io. While the safari local upload is still greyed out, it’s a developer plugin that allows you upload files from the cloud, like Dropbox, Box, Facebook, gmail so your users can use your website.
Full disclosure: I’m one of the authors.
Hi all,
I need to grab the xml file in php(server) which is sent by an iPhone app.
should i simply use the $_FILES[] global variable?
please help……….
regards
sanjay
If your iPhone app is posting the xml file to your php server, it should be available in the $_FILES.
My mobile website was working just fine until I updated it to the latest version of the Mobile iPad OS. Now that the Safari Browser has tabs, the bridge page will not pass the hash back to the controlling page. Has anyone encountered this issue?
Try above examples in the latest Mobile Safari and see if they work.
I was using piccup to upload files to my site. It worked perfectly until the latest mobile iOS version was released on iPad.
Hey, I was wondering about this now and found out the Opera Mini browser seems to support file uploads just fine. And it’s free, so there’s no reason not to try it out. 🙂
Can picup be used to upload normal files like csv files and not just images. If not do you know of a similar app that does this
I don’t think you can access any files other than images or videos from your iPhone/iPod. Theoretically, Picup should be able to upload all types of files.
Thanks for the reply. You say video can be used? Have you tried it yourself?
I have not, but I’ll do this testing over the weekend and post the result and may be a demo too.
Ok great keep me posted thanks
No, Picup app allows only image uploading.
Oh Ok. Thanks a lot for all your help appreciated
If only!
Good luck getting your business clients to switch all their iOS devices to another usable platform!
Apple builds products for stupid dumb people for whom more than one button is too complex. In their quest for satisfying the morons of the world, they have removed one of the most important element of HTTP protocol. GET and POST are the two most important methods and the idiotic engineers at Apple decided to get rid of multi-part POST. And their solution is ask developers to go and learn an ancient and language called Objective-C. No thanks, but I will stick to Android and Web Standards. I will never enter the walled garden. The way Android is slowly taking over, wont have to worry about idiotic devices anymore.
Can’t agree more. 🙂
So basically you all are calling out Apple because you are too lazy to learn Objective-C or package your app with Phone Gap.
They didnt drop the ball on anything here. They are providing extra security. Ever wonder why you get viruses while your Apple buddies dont? This is why.
File uploads work just fine in native iOS code. Apple however tests these apps to make sure they do nothing malicious before allowing access to the file system. I am one who is grateful for this.
You would be extremely lucky if they would approve your PhoneGap built app. Objective-C is the only real solution. Thank you, I’d happily use Picup any day for this simple task.
I am a developer an iOS User, and an Android user. I have developed native and web apps, and it’s obvious that this isn’t about being too lazy to learn Objective-C, it’s about providing the technology that exists for every device.
What does this have to do with security, and whose security are you talking about there? This is about uploading files – to servers belonging to those that are accepting the incoming data. It’s not about downloading the data from us (which there is no restriction on). I really want to hear the reasoning here. And yes I will call out Apple anytime just like anyone else whose products I use and love (or otherwise).
Thanks for this article.
It seems weird that the smart folks at Apple could not come up with a secure, logical way to implement a file browser.
I know that they don’t want users of the iPhone or iTouch to be aware of a file system.
They could have simple limited file inputs to looking in the user’s photo gallery, allowing them at least to upload photos easily.
Hi! As a matter of fact, iCab Mobile browser is able to upload files via a web form. But some per-requisites are required. 1. Get a cloud file storage of some kind that you can access via a web interface. I use Dropbox.com and box.net. 2. Upload your file(s) to the cloud file storage account. 3. Get iCab (of course…) 4. In iCab, press the settings icon (small gear wheel icon on top right) and change browser ID to “Safari 5(Mac). This might not be required but I don’t like the hassle to get redirected to functionally limited mobile site versions. 5. Open your cloud storage web interface and browse to your file. Tap and hold till the menu pops up, then choose “download file”. There, now you have the file within the iCab’s file structure, which makes it available for iCab to work with. 6. Go to the web site that wants you to upload file, and then upload the file as usual, selecting it from iCab’s own “Download list”
Yes. This is the #1 reason why I’m not buying an iPad. Being a web developer, this feature is critical for me as I use a CMS back end that uses the type=”file” to upload everything to the server, not an ftp client. BTW – by buddy’s XOOM uses the input=”file” just fine.
Good ‘ol Apple. Always behind in basic functionality, but heh, it looks cool.
Hi,
Picup is definitely a very good alternative solution. However, I am facing one weird problem. We are working on an application that will work on the Mobile Safari browser. In this application, a user takes a photo and uploads it to our server side application. The server side application strips out any GPS data that might exist in the photo and uses that data for further processing.
We have turned location services on in the iPhone and we know for a fact that these images (an example has been attached with this email) have GPS data in them. We have verified that the image has GPS data by using a tool like ExifViewer (https://addons.mozilla.org/en-US/firefox/addon/exif-viewer/). However, when we upload the photo from our client app (that has the Picup code integrated in it) or from Scratchpad on the Picup site and post it to our server application, the application says that there is no GPS data. A quick look at the size of the uploaded file tells us that the image has been significantly reduced in size.
Our first question is: does the Picup app on the iPhone reduce the size of the photo being uploaded?
Our next test was to email the photo from the iPhone (using Gmail) to ourselves and choose the lowest size optimization that the email client provides us. The photo does get emailed in a scaled down fashion but the scaled down version still retains the GPS information (again verified using ExifViewer).
This brings us to the second question: is there any setting in the Picup JavaScript that we can use to tell the Picup app to not shave off the GPS information (or any other metadata information for that matter) but just scale it down to the smallest possible size?
Have you faced or heard of this kind of issues with Picup? Any ideas?
Thanks for any help.
Hi Soumya,
I asked Bill (author of Picup app) over the weekend and he has replied in the following words:
I have requested him retention of exif data while reducing the size of image before uploading. Let’s see what he says about it.
Hi Ali,
So far you really helped us out with your post, thanks a million!
I notice you mention to post a separate tutorial about using the Picup App…Did you already do so?
Cheers,
Merijn
If you meant sending images using $_POST to your own server rather than default Picup app free image hosting website, then answer is no.
I did create a script to do that but could not find time to write that.
I just spent £1.50 on the icab browser app only to find it does not allow uploading of images via web forms. The browse button is still dimmed out. What a waste of money and bad advice.
Hi Ali,
i came across this post, and must admit looks like it is a life saver, as i was not aware of Mobil Safari to process uploads through http.
I picked the Picup for the project i am working on, but i can’t seem to get the image file to upload. Picup is uploading the selected image to appropriate url, and is receiving response from same, but image is nowhere to be found.
I am trying to pickup the image using regular PHP method:
$file = $_FILES[‘filedata’][‘name’];
copy($_FILES[‘filedata’][‘tmp_name’], “temp_img/” . $file);
filedata is the name of input field on my web app.
Can you please point me into right direction?
Much appreciated.
Hi George,
Did you check this page? http://picupapp.com/best_practices.html
By default, Picup uploads the selected image on a third party image hosting website and it returns the path to that hosted image. Once you get back the control as a step 2 of your form, you can simply show the image (or its thumbnails possible from the Picup js parameters ) above the form and then get the user to fill in other details.
Before you try Picup to uploads directly on your server, the way you are trying to access the $_FILES as we usually do in PHP, you first need to make it work with default settings.
Once you submit all form input info as $_POST to your server, just get the hosted image url from POST and copy it from there using cURL.
I’ll put the whole code here as complete tutorial, I have been trying to complete it for a long time now. Give me a day or so & I’ll put up all in a separate post. I tried to complete that long overdue Draft Post today but could not.
Thanks for this! I had no idea you could not upload files on the iPad natively.
Just used Picup for solving my upload. Thanks for the APP. If anyone can also help the above post regarding the php script, it would be my first choice as it could be used by everyone visiting my website. Using Picup only solves it for my use. Thanks.
Hi Philip,
I have completed one app for uploading image and other form fields submissions using Picup App. I’ll post the code in he form of a tutorial, I have not been able to find time and complete it but I will try to do so in a day or so.
Thanks for the above info. After spending way too much time on this issue this AM, here is what I found out. iCab deletes all hidden fields when the file is selected with the fileupload[] php command is used. So, you need to upload the image first, then the text information (and pass through the file name that was just loaded to match with the text to be posted). But unfortunately, the fileupload[] information does not post through and the file information is not available. So no file is uploaded with iCab. Since my php script has worked for many years on uploading of files, what makes the iCab browser different? What php script should be used for a file upload using iCab? Thanks. I might have to look into Picup and use that application. PT
I just downloaded the i cab browser as I had the same problem as you with a file to be uploaded. The application has been running fine for 3 years, but when I purchased an iPhone, I couldn’t upload a file. The I cab browser allowed the php script to locate the file on the iPhone, but when I submit the form, all the information is not passed through. If I don’t select an image, all the information from the form is passed through. With all the brands of phones, the application runs fine. I thought I had it solved when I used I cab, but that is not the case. The form is written in php. What makes php drop the information when a file is selected? Thanks.
Hi Philip,
I don’t know the exact scenario and reason why the form input values are being lost, but you can easily make it a two step process, the way I did it using the Picup app.
I personally have not used the iCab but I think you can make it a two step process. On the first step, just upload the image using the iCab and then retain its information in a hifdden field or in $_SESSION and show the user that it has uploaded the image successfully and then get the remaining form input fields and then submit all this information at once to server side processing..
Hope that makes sense.
the pickup app is nice btw, but iphone apps are not the most nice-looking solutions for an ipad.. i hope there will come ipad apps with the same functionality..
I did test it on iPhone/iPad/iPod, and it worked just fine. Unfortunately, Piping email is not seamless process both for developers and users. I initially thought of it but later dropped on client’s feedback.
Give Picup App a serious thought. I can provide you the url for the app i developed for testing if you want to see how it works before making a choice.
thank you, the most informative site i found about this problem! Ik look forward to an article about the Pipe iPhone Emails with attachments or a link to an other website with explanation about how to do this.
Hi David,
I have successfully integrated Picup app to upload photo and I think it looks very good, it seamlessly integrated with the web form without any hiccups.
I simply changed the original submission form where all the questions with the image upload control were present. On Mobile Safari detection, I simply made it a two step form, showing only image upload control on first step using the Picup app, on clicking the upload button, Picup native App is launched in iPhone and user can select the photo and upload it.
Once it’s uploaded to image hosting server, control is given back to second step of web form where the remaining questions are filled with the uploaded picture thumbnail being shown alongside. All this info is submitted to the server side script where this information is inserted into DB, and image is copied from remote server to your server using cURL.
I’m putting all this into a tutorial and will post the whole process with the functional code soon. Apple has screwed its users and now developers are left to improvise and provide some solution.
Thank you… just spent an hour trying to figure out what was wrong with my code, when it was the inability of Safari mobile to deal with an ancient html standard that is the input[type=”file”] – Apple is so innovative…
hahaha, yes, only Apple can be so innovative!
I have recently added photo uploading using the Picup app in one mobile app, will post the whole process soon
Was looking for a solution to the file upload field for iPad – your post provided some ideal solutions… Luckily my app is for internal use only so I can instruct my staff to install the iCab browser. But if I was building an app for the general public it would not be so easy!
You can enable the Browse Button in Safari using a Cydia App.
Please note that Safari Upload Enabler Cydia App for iPhone & iPad does not work for iOS 4.0 versions. Your device should be running iOS 4.2 or later.