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 form like this:

<Triggers>
  <asp:PostBackTrigger ControlID="Button1" />
</Triggers>

The problem is that this forces the form to perform a full post-back which voids out the whole point of using the UpdatePanel in the first place. Is there a workaround to this issue that does not cause the whole page to refresh?

Answer 1

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 2

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 3

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 4

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">

Answer 5

Nothing is working.. Can Any body give a correct solution.. with an example.

Thanks in Advance. rajan

Answer 6

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