Upload Pictures from iPad, iPhone, or Android using DevExpress ASP.NET Upload Control

06 May 2013

Use the DevExpress ASP.NET Upload control and you’ll automatically get the ability to upload pictures from your iOS or Android based smartphone. Here’s a walk through of how it work on an iPhone:

Upload using iPhone 5

1. Click browse on this demo and the following popup will be displayed:

iphone-2013-05-01 10.53.33

2. Select a picture and click the “Upload” button and the file will start uploading to the Web Server:

iphone-2013-05-01 10.55.26

3. Finally, the image will be displayed using the DevExpress ASP.NET Image control:

iphone-2013-05-01 10.56.17

This works for iPad and Android devices too. Take a look below for some more screen shots:

Can I upload other types of files?

No because most smart phones don’t give access to their local file system. You could consider using a cloud approach:

  1. Have the user upload to a cloud service.
  2. Use the DevExpress ASP.NET File Manager control and create your own file system provider.
  3. Then the ASP.NET File Manager can upload from the custom provider which interacts with your cloud storage API.

Please note that the File Manager control has an UI which is designed for larger screens like desktop monitors and mobile tablets. It’s not designed for phones.

Try It Now

Try it on your smart device now. Just go to this URL and click ‘browse’, select a picture, and click ‘Upload’:
http://demos.devexpress.com/ASPxperienceDemos/UploadControl/Example.aspx

Upload using iPad

ipad-photo 1ipad-photo 2

ipad-photo 3ipad-photo 4

Upload using Android Phone

droid-Screenshot_2013-05-01-11-04-01droid-Screenshot_2013-05-01-11-04-18droid-Screenshot_2013-05-01-11-04-37

How does it work?

On mobile devices, the DevExpress ASP.NET UploadControl can only work in the standard upload mode. In this mode, the DevExpress ASP.NET UploadControl uses an invisible file input (tag <input type="file" />) and IFrame elements.

The File input element allows the user to select files from the file system through the browser's open file dialog. And the IFrame element gives an ability to upload files asynchronously. When a file is selected and the user clicks the Upload button, a client instance of the UploadControl sends the current form data (with the selected file) by a postback request to the server through the hidden IFrame. The uploaded file is sent to the server in one request and is cached in its entirety in server memory. When file uploading starts, the client instance of the UploadControl sends AJAX-requests to the server in order to obtain information about the state of the progress. Such requests are made at intervals of one second.

The File input element (hence the UploadControl) is supported by the iOS platform since version 6. The DevExpress ASP.NET UploadControl supports the iOS and Android platforms since version v11.2.

DXperience? What's That?

DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

12 comment(s)
HanS Fadzli

Can we use inside update panel?

6 May, 2013
Mehul Harry (DevExpress)

Hans,

Yes but the ASPxUploadControl supports callbacks already. However, if you do use it in an update panel then be sure to set EnableCallbacks to false.

If you have any troubles, please contact our support team and they can help you. Thanks.

7 May, 2013
IOANNIS MPOURKELIS

I tried this example in an iPAd 1/iOS 5.1 and nothing happens when I click the upload image button

7 May, 2013
Mehul Harry (DevExpress)

Ioannis,

The File input element (hence the UploadControl) is supported by the iOS platform since version 6.

7 May, 2013
HanS Fadzli

hi is there any sample how to use inside update panel.i really stuck here.

8 May, 2013
Mehul Harry (DevExpress)

Hanz,

Please contact our support team and they can help you:

www.devexpress.com/.../CreateIssue.aspx

Thanks.

8 May, 2013
Harold Arkoff 1

Hi Mehul -

I tried the demo on my iphone 4 with iOS 6.1.3

I took a photo using the camera in my iphone in portrait mode. The resulting upload rotated the image 90 degress counter-clockwise.

Do you have a fix to the bug?

23 July, 2013
Mehul Harry (DevExpress)

Hi Harold,

Can you please report that bug to our support team and they can help you:

www.devexpress.com/.../CreateIssue.aspx

Thanks.

23 July, 2013
SachinVNaik

Upload does not work in my application, as well as the demo provided in this article.

18 October, 2014
Mehul Harry (DevExpress)

Sachin,

Please contact the DevExpress support team and they can help you: www.devexpress.com/.../Create

Thanks.

20 October, 2014
Ron Veerman

Hi Harry,

The MVC  UploudControl appears not to be working on Chrome on IOS 8.  The Browse button does nothing. On Safari it works beautifully.

The Demo works fine on Chrome however.

Regards Ron

27 November, 2014
Mehul Harry (DevExpress)

Hi Ron,

I just tested Chrome on my iPad with iOS 8.1.1 and it worked fine with our online demo. If you're still experiencing this issue, would you please let our support know here:

www.devexpress.com/.../Create

Thanks for letting me know.

29 November, 2014

Please login or register to post comments.