How to upload an image when fileupload control is under updatepanel?

Question

How to upload an image when fileupload is under updatepanel?

I have a button say "upload" inside that update panel.

When I click that button inside the button click event I got the fileupload hasfile=false. Please suggest if there is any way to upload image file when fileupload control is inside update panel and the button is making asyncpostback.

Thanks in advance.

Answer 1

you can use AJAX AsyncFileUpload control

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

Also check this thread. File uploading in AJAX updatepanel without full postback

Answer 2

It is not possible. For security reasons, the browser does not allow javascript to upload files.

There are two normal workarounds for this problem:

• Perform the upload in an iFrame
• Use a flash plugin for uploading

I recently applied this tool to upload files asynchronously in my web page, and it works beatifully: http://valums.com/ajax-upload/ It creates an iFrame for you automatically, and posts the frame and and sends the resulting html (or json object) to an event handler. My page that receives the uploaded file, returns a json object describing the file, e.g. filename and a unique id, so that I can link the data that is posted on the main page to the uploaded file.

For security, I store the credentials of the user uploading the file, so when the form is posted I can validate that the user that posts the form is indeed the user that uploaded the file.

Answer 3

I had tried as below. It is working.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Upload" runat="server" Text="Upload" OnClick="Upload_Click" /><br />
<asp:Image ID="NormalImage" runat="server" /></ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Upload" />
</Triggers>
</asp:UpdatePanel>

Reference to

http://www.c-sharpcorner.com/uploadfile/prathore/fileupload-control-in-update-panel-using-Asp-Net-ajax/

Answer 4

You can try this code. I tried it, it's working on my side.

<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div>
<asp:FileUpload ID="FileUpload1" runat="server" /> <br/>
<asp:Button ID="btn_Upload" runat="server" Text="Save" OnClick="btn_Upload_Click" /><br />
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btn_Upload" />
</Triggers>
</asp:UpdatePanel>