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

Can't be done without co-operating binaries being installed on the client. There is no safe mechanism for an AJAX framework to read the contents of a file and therefore be able to send it to the server. The browser supports that only as a multipart form post from a file input box.

Answer 2

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 componet for this question. This is an open source plug-in of jQuery. It is Plupload that allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.

You can try & test Plupload by click here.

Answer 3

The sites you see that do provide this functionality generally use flash or an iframe so that the postback occurs in the iframe and gives the illusion of an ajax request.

HTH

OneSHOT

Answer 4

Not sure I agree with @OneSHOT - take a look at how kijiji does image uploads, for one example.

Answer 5

The problem is with the way the HTML file upload control works, has nothing to do with ASP.net, for the file upload control to work you need a full post of the form data. You can only simulate that your are not doing a full postback, by doing all the operation in a hidden iframe that does the actual uploading

Answer 6

I've tried swfupload (http://swfupload.org/), but do keep in mind that you have to jump through hoops if you're using forms authentication with non-IE browsers. This is apparently a flash bug, and it's not fixed in flash 10. I decided against using it in our framework because of this bug, but it was otherwise a great product.

Answer 7

I recommend the uploader widget from YUI. See http://developer.yahoo.com/yui/uploader/

I think you could use it to accomplish your goal. Your javascript would need to fetch the file back down to the client from the server after it completed its upload. But the page would not refresh--the upload is through flash and a hidden iframe. The download to show the file's contents to the user would be via ajax.

If the user does not "approve" the upload, then simply make another ajax call to the server to delete the file.