FileUpload control inside an UpdatePanel without refreshing the whole page?

Question

According to Microsoft the FileUpload control is not compatible with an AJAX UpdatePanel.

I am aware that a PostBackTrigger can be added to the submit button of the

Answer 1

Can use IFrame have "target" attribute which mention to FileUpload Page OR use Jquery example at link How to make Asynchronous(AJAX) File Upload using iframe?

Answer 2

Try the AJAX AsyncFileUpload. It works well if used in the matter it is intended to be used (handle the UploadedComplete event).

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AsyncFileUpload/AsyncFileUpload.aspx

Answer 3

You can't upload file(s) via AJAX only by reloading a whole HTML document. You should either use iframes if you prefer pure HTML (this is more common, eg. used by WordPress) or something else like swfupload suggested by Sven.

Answer 4

I found this the other day when I ran into the same problem: http://vinayakshrestha.wordpress.com/2007/03/13/uploading-files-using-aspnet-ajax-extensions/.

For my implementation, I put the iframe in a modal popup and added a button with style="display:none" to handle the closing of the popup. In the javascript function that watches for the change in the iframe, I added document.getElementById("<%=btnCloseUpload.ClientID%>").click(); for the hidden button.

Answer 5

I know of a third party component that can do that. It's called "swfupload" and is free to use and open source, and uses javascript and flash to do the magic.

here is a list of the features they offer: (from their site)

• Upload multiple files at once by ctrl/shift-selecting in dialog
• Javascript callbacks on all events
• Get file information before upload starts
• Style upload elements with XHTML and css
• Display information while files are uploading using HTML
• No page reloads necessary
• Works on all platforms/browsers that has Flash support.
• Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable
• Control filesize before upload starts
• Only display chosen filetypes in dialog
• Queue uploads, remove/add files before starting upload

They also have a demo area where you can play around with their control. That way you can make sure it is exactly what you want.

We used it in one of our projects and it has never failed us so far, so I think this is a safe bet.

oh and here is the download page: http://code.google.com/p/swfupload/

Answer 6

Add this to your button control:

OnClientClick="javascript:document.forms[0].encoding = 'multipart/form-data';"

-or-

Make your page Form tag look like:

<form id="form1" runat="server" enctype="multipart/form-data">