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

ASP.NET Team Blog
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/

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.