Travis J
Travis J

Reputation: 82297

Is it possible to upload a picture through a web browser from a mobile device?

This question has been asked before, but not this year - there is no concrete consensus and I know this is a hot topic. In addition, technology changes rather quickly, and the other questions seem to relate to only using the <input type="file>. I am looking for a more verbose modern way to handle these requests. Although I have been developing in ASP.NET C# MVC3, I have been looking into weather ASP.NET MVC4 Mobile will support mobile file upload. From what I have read, it does not, or it has not been covered in the new release notes.

http://www.asp.net/vnext/overview/whitepapers/whats-new

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features

From the research I have done jQuery-Mobile seems rather gimmicky.

http://www.parorrey.com/blog/jquery-mobile/file-input-field-uploading-using-jquery-mobile-framework-form-submission-with-ajax-disabled/

http://forum.jquery.com/topic/jquery-mobile-seems-to-clobber-ability-to-upload-files-via-forms

An example that was posted did not work on my iPhone, as the <input type="file" still existed and was therefore grayed out as inaccessible.

http://filamentgroup.com/examples/jquery-custom-file-input/

Another suggestion I have come across involves forcing the user to email the photo to a user-specific email which doesn't really appeal to me or the customers I deal with - this approach also seems like it could be vulnerable to security breaches.

IS there a way to do this that I have overlooked? How can I show a file dialog on a mobile device?

Upvotes: 11

Views: 17746

Answers (8)

shanabus
shanabus

Reputation: 13115

Try this:

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

This should be supported in most mobile browsers and should offer the user a chance to choose a local file (image) or one some modern devices even allow them to capture one in the process.

Hope this helps!

Upvotes: 0

zSprawl
zSprawl

Reputation: 999

The Safari browser does not support file uploads. You can see this by visiting many of the mobile sites in the actual browser BUT the actual apps will allow this.

So if you are making a mobile web app that you wish to deploy as a native app, you can use phonegap as a layer to do this.

http://docs.phonegap.com/en/1.4.1/phonegap_file_file.md.html#FileTransfer

Also, it is supported in:

  • Android
  • BlackBerry WebWorks (OS 5.0 and higher)
  • iOS
  • Windows Phone 7 ( Mango )

Upvotes: 3

aknosis
aknosis

Reputation: 4318

Mobile browsers in Android (pre 2.2 it seems) and iOS do not allow file system access. And when it does on Android 2.2+ it isn't full access - it is filtered via apps that hit the FS like Gallery or Music.

Upvotes: -1

adamnfish
adamnfish

Reputation: 11255

This works fine on Android 2.2+. You can upload photos from your gallery or use the camera to take a new picture for uploading. Any other apps that expose similar behaviour like sound recorders, the camcorder and music apps will typically offer alternatives. If you have a good filesystem app installed this will normally allow you to upload arbitrary files.

On iOS, you have to use an app to upload files. Since this is such a glaring omission in this age of web apps, it is very likely this feature will be added in the next major release of iOS although that is likely a few months away still.

Upvotes: 1

Dan
Dan

Reputation: 647

It works for me on Android.

You can see how facebook does it here: https://m.facebook.com/home.php?refsrc=http%3A%2F%2Fm.facebook.com%2F&refid=8&_rdr

<input type="file" name="file1" data-sigil="photo-input" />

Try going to www.tinypic.com and uploading a photo. I can test on iPhone tonight.

Upvotes: 1

shyamshyre
shyamshyre

Reputation: 549

Yes we can upload picture through mobile, Face book is a live example for this.

Upvotes: 1

Liam
Liam

Reputation: 2837

Use Phonegap to bridge the gap between client side libraries and native applications. While the client side libraries give a good handle and easy way to set UI things up, you can use the capability of phonegap to perform device specific operations like camera, scanning, call etc.

Upvotes: -1

Parris
Parris

Reputation: 18418

I use jquery mobile in a production app and it works just fine. I don't do file upload with it; however, that isn't jquery mobile's job anyhow. JqueryUI has issues with its dialog and file upload as well. There are a number of scripts that help with that. I use ajaxfileupload: http://www.phpletter.com/Our-Projects/AjaxFileUpload/ there are better ones out there now though.

I digress. As far as mobile is concerned it is more useful to have camera features involved rather than pure fileupload. No one knows where they store things on their phones, which is part of the problem. For that case you may want to try phonegap. Try this: http://wiki.phonegap.com/w/page/18270855/Image%20Upload%20using%20JQuery%20and%20Python

Upvotes: 1

Related Questions