A html5 web app for mobile safari to upload images from the Photos.app?

IphoneHtmlFile UploadIosMobile Safari

Iphone Problem Overview


Is it possible to write a HTML5 web application designed for the iOS devices (iPad, iPhone, iPod Touch) which can allow the user to upload an image from the filesystem?

Imagine uploading a new photo to your twitter avatar via a web app.

Iphone Solutions


Solution 1 - Iphone

UPDATE: iOs 6 Safari is going to support upload videos and images from the Photo Library.

====

I hate this word, but, it's impossible (up now). Here is the reasons:

  1. mobile safari doesn't support upload anything.

  2. mobile safari can't access ios components (actually it can, but, only through phonegap)

Solution 2 - Iphone

another way to approach this problem would be to give users a private email address that they can email their photos to for automatic upload (eg. [email protected]).

A little more work to set up, but will give a consistent experience for users on all devices (and non-mobile users might find it convenient too).

Solution 3 - Iphone

I like the picup solution at http://picupapp.com

Solution 4 - Iphone

I found an acceptable work around for this. Add a mailTo link on the page with predefined instructions which shows the user how to copy paste an image from his camera roll into the email. Then, write a job/script that listens to that inbox for inbound emails, strip the image and process accordingly.

It's not perfect, but they click the link from safari and then only need to go to photos, copy and come back to your app. After trying it on my phone, it's more than an acceptable work around that allows me to move forward without writing an App.

	<div data-role="collapsible" data-collapsed="true" id="uploadPicContainer" data-theme="d">
	<h3>{l t='Upload Picture'}</h3>
	<a href="mailto:[email protected]?subject={l t='My pictures of'} {$var_biz.bizname}[{$var_biz.id}]!&body={l t='To upload a picture go to your Camera Roll and copy paste an image to this area in the email.  We will apply your picture after review!'}">{l t='Click here to upload pictures of'} {$var_biz.bizname}</a>
</div>

Solution 5 - Iphone

You will be able to upload photos using safari in iOS 6 onwards. Although the above workarounds will still be neccesary for iOS 5 and below.

Solution 6 - Iphone

Safari on iOS 6.0 is the 1st to add support for <input type="file"> by allowing you to:

  • take a new video or photo
  • select a video or photo from the library

Here's how it looks on iOS10:

iOS 10 file input no filter

iOS9 introduced iCloud Drive and More options including Dropbox. iOS 6 through 8 had only the 1st two options.

You can limit the file types to just photos by using the accept="image/*" attribute:

<input type="file" accept="image/*" > will limit the options to just photos:

iOS 10 file input for photos

On the Android side Android 2.2+ is the 1st to support the above code.

Disclaimer: image courtesy of Pipe which handles video recording where I am CTO

Solution 7 - Iphone

Another native iOS application (similar to Picup or iphone-photo-picker) is Aurigma Up.

Solution 8 - Iphone

An idea I just thought of is to have a textbox that the user could paste a url into, allowing the user to use dropbox or a similar app and copy a public url of the dropbox file. Then the server would be able to download from the dropbox server.

I need to support filetypes other than images so it sounds like picupapp won't work for me.

Solution 9 - Iphone

If you're still using iOS5, please consider using iCab Mobile. Got it for my ipad and (at least for me) file upload works fine.

Regards, Piotr

Solution 10 - Iphone

Only for iOS >= 6

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

"capture" doesn't change anything with iOS but it's still useful for other devices (apparently Androids, see comments).

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAbhicView Question on Stackoverflow
Solution 1 - IphoneAlexandreView Answer on Stackoverflow
Solution 2 - IphoneJoshView Answer on Stackoverflow
Solution 3 - IphoneJoaView Answer on Stackoverflow
Solution 4 - IphoneEnriqueLView Answer on Stackoverflow
Solution 5 - IphonemilanView Answer on Stackoverflow
Solution 6 - IphoneOctavian NaicuView Answer on Stackoverflow
Solution 7 - IphoneIan DunnView Answer on Stackoverflow
Solution 8 - IphoneThymineView Answer on Stackoverflow
Solution 9 - IphonePiotr JustynaView Answer on Stackoverflow
Solution 10 - IphoneErdal G.View Answer on Stackoverflow