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

Question

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.

score 99 · Accepted Answer · edited Dec 18 '17 at 22:31

99

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)

edited Dec 18 '17 at 22:31

Crashalot

33,605
61
269
439

answered Oct 27 '10 at 21:18

Alexandre

7,004
5
54
72

7

You are right, its a hateful word! My research had shown the same thing and I just couldn't live with it so asked here on SO. Thanks for the answer though. – Abhic Oct 28 '10 at 04:20
2

What I don't understand is why didn't apple allow the pictures/videos folder to be exposed rather than being scared of exposing the whole system. – fasih.rana Jun 26 '11 at 13:00
1

Any link to the documentation of iOS Safari to refer how to achieve image uploads in iOS?? Thanks! – detj Oct 03 '12 at 16:26
Ah! It does it automatically. No hassles :) – detj Oct 03 '12 at 16:32
Can you please post some code for file upload in ios safari browser using HTML 5? – Karthick Dec 04 '13 at 08:39
@Karthick There is no secret, put a input type=file and post to some webserver. – Alexandre Jan 24 '14 at 20:40

score 29 · Answer 2 · answered Aug 20 '11 at 20:41

29

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. photos+abc123@yoursite.com).

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).

answered Aug 20 '11 at 20:41

Josh

716
7
7

I wonder how can this be done, I mean, user send an email with an attachment, photo or video, how can I extract that information and save it to a DB and post the relative information in the right place, photos to images folder and videos to videos folder... there has to be an script already that can do that... or something similar.. – Tanker Apr 15 '14 at 23:12
@Tanker yes, your app would have to retrieve the emails periodically, grab the attachments, and save changes. I have used the [ChilKat](http://www.chilkatsoft.com/downloads_DotNet.asp) email libraries for this in the past, although I will warn you that it doesn't always compile nicely (for me -ymmv) between 32/64 bit. – brichins Apr 24 '14 at 19:20

score 9 · Answer 3 · answered Nov 17 '11 at 18:54

9

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

answered Nov 17 '11 at 18:54

Joa

91
1
1

There's [a tutorial for that](http://www.parorrey.com/blog/technology/how-to-fix-iphoneipad-mobile-safari-greyed-out-and-disabled-file-upload-control/). One problem with Picup is that it uploads the image to a 3rd party server (imgur.com), which can create a lot of licensing/privacy issues. Imgur's terms of service basically say that they own the image and you can't use it for commercial purposes. – Ian Dunn May 09 '12 at 17:42
2

@Ian Dunn: Picup can be configured to upload the image to any URL you like. Imgur is just the default. – geon May 28 '12 at 18:54

score 8 · Answer 4 · answered Mar 26 '12 at 23:24

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:fotos@opina.com?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>

It's more acceptable to you because you know the limitations - I'm curious to see the responses of non developers responding to an app like this. It's an interesting way to go about it and one that relies on another method that users are already familiar with - it might work for something I am trying to do as well. — Angelo R., Apr 03 '12 at 19:00
Yep. that's a neat idea. There has to be a script that will parse the attachments. Zend Framework has some nice components for that. — Svetoslav Marinov, Oct 22 '12 at 22:23

score 6 · Answer 5 · answered Jun 11 '12 at 22:33

6

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.

answered Jun 11 '12 at 22:33

milan

61
1
1

2

do you have any instructions on doing it on iOS 6 ? – Wim Deblauwe Oct 13 '12 at 22:47

octavn · Answer 6 · 2022-11-01T06:14:43.973

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:

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:

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

Ian Dunn · Answer 7 · 2012-05-09T18:00:01.237

2

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

edited May 09 '12 at 18:00

answered May 09 '12 at 17:45

Ian Dunn

3,541
6
26
44

score 1 · Answer 8 · answered Mar 27 '12 at 01:05

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.

score 0 · Answer 9 · answered Jul 05 '12 at 08:56

0

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

answered Jul 05 '12 at 08:56

Piotr Justyna

4,888
3
25
40

Erdal G. · Answer 10 · 2016-11-14T13:22:01.807

0

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).

edited Nov 14 '16 at 13:22

answered Oct 28 '14 at 10:43

Erdal G.

2,694
2
27
37

`capture="camera"` (string) has been replaced by `capture="capture"` in the W3C Candidate Recommendation. In both cases it only works on Android. – octavn Nov 10 '16 at 13:54
@OctavianNaicu makes sense. I've edited the response. Thanks for the info – Erdal G. Nov 14 '16 at 13:22

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

10 Answers10

Linked