File uploading in AJAX updatepanel without full postback

Question

I have a update panel, in the update panel I have fileupload control and button control, On button click, I need the file that I have upload in the fileupload control in updatepanel.

Exact scenario, I have 8 tabs on page, each tab contains too much information, One of the tab is Attachment, when user click on Add New Attachment Modal Popup shown, Modal contains detailsview in Updatepanel and in the detailsview I have fileupload control, when user hit save button, detailsview inserting event fired, In the inserting event I need the file that I have upload.
Please Note, My page is heavy and I don't want full postBack.

Does anyone have solution of this issue?

Advance thanks for your kind help.....

Answer 1

For solve this problem, Please see the following step.

1. Add ajax-upload to your detail view.
   • iframe-based uploader like Resource#1.
   • Silverlight-based & Flash-based uploader. I like this technique because it doesn't require any server-side script for display current upload status. But in HTML5, you can create this without using any web browser plug-in.
   • Commercial uploader like Resource#2. that use hidden iframe for uploading.

2. Upload file to temporary location.

   • System response the temporary location. Next, client keep temporary location in hidden input in detail form.
   • Keep temporary location with session_id. You can store it in database or Session variable depend on your framework.

3. When you click on the save button, the system will move the files to their real location

Note. System will automatically delete the expired file from the temporary location.

Resource

1. ASP.NET File Upload with Real-Time Progress Bar
2. ASP.NET File Upload like GMail (Commercial)

Update

After almost one year, I just found a great 3rd-parties control for this question. This is an open source plug-in of jQuery. It name Plupload that allows you to upload files using HTML5, Silverlight, Flash or normal forms and it provide some unique features such as upload progress, image resizing and chunked uploads.

You can try & test Plupload by click here.