FileUpload Control in Update Panel using asp.net | Solution to FileUpload control is not working in UpdatePanel.

Upload file using FileUpload control placed inside updatePanel in asp.netIntroduction: In this article I will explain with example how to upload Image/ file through File Upload Control that is placed inside Update Panel in asp.net Ajax using both C# and VB.Net languages. Many of the developers face a very common problem i.e. “FileUpload control is not working in update panel in asp.net”. I will also explain the reason and solution of this problem.

Description and Reason: In previous articles i explained How to Drag & drop to upload multiple files using AjaxFileUpload like Facebook in asp.net and How to maintain image on PostBack in FileUpload control and jQuery to validate file extension and upload image file and How to restrict user to upload images of up to specified size.
The FileUpload control doesn’t work for uploading image using Asynchronous postback when placed in the Update Panel since FileUpload control required full postback to get the image. If you check FileUpload1.HasFile method or FileUpload1.FileName property then it is null. That is because the update panel does not retain the file inside the FileUpoad control.
 
Solution: So to solve the issue we need to set the Button that is uploading the image to be PostBackTrigger instead of AsyncPostBackTrigger. By doing so the upload button will cause the full post back and get and retain the image in the FileUpload control whenever clicked on.
So set it as:
<Triggers>
       <asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>


Source Code
Implementation:  In the <Form> tag of the design page (.aspx) places a FileUpload Control and a Button control from the standard category of the visual studio’s toolbox. Also place ScriptManager from the AJAX Extension category.
  • Also create a folder in the root directory of your project and give it name “Images”. We will store our uploaded image in this folder. Uploaded images will be prefixed with a random unique name using the Guid.NewGuid() to avoid the duplicate name problem.
 <div>
    <fieldset style="width:250px;">
    <legend>Upload file example in asp.net</legend>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <table>
    <tr>
    <td>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Button ID="btnUpload" runat="server" Text="Upload"
                onclick="btnUpload_Click" /><br />         
            <asp:Image ID="imgShow" runat="server" Width="150px" />
        </ContentTemplate>
       <Triggers>
       <asp:PostBackTrigger ControlID="btnUpload" />
       </Triggers>
        </asp:UpdatePanel>
    </td>
    </tr>
    </table>
    </fieldset>       
    </div>

Asp.Net C# Code to upload image through FileUpload Control in Update Panel using Asp.Net
  • In the code behind file(.aspx.cs) write the code on the upload button’s click event as:
 protected void btnUpload_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile)
        {
            string ImgPath = Server.MapPath("~/Images/" + Guid.NewGuid() +  FileUpload1.FileName);
            FileUpload1.SaveAs(ImgPath);
            string ShowImgPath = ImgPath.Substring(ImgPath.LastIndexOf("\\"));
            imgShow.ImageUrl = "~/Images" + ShowImgPath;
        }
        else
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "Message", "alert('Please select the image to upload');", true);                     
        }
    }

Note: If you want to restrict users to upload only image file or ms word/ms excel etc file then read the article Validate and upload image files in asp.net

Asp.Net VB Code to upload image through FileUpload Control in Update Panel using Asp.Net
  • First design the page as mentioned in the source code above but replace the line 
<asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" /> with the line  <asp:Button ID="btnUpload" runat="server" Text="Upload"/>
  • In the code behind file(.aspx.vb) write the code on the upload button’s click event as:
Protected Sub btnUpload_Click(sender As Object, e As System.EventArgs) Handles btnUpload.Click
        If FileUpload1.HasFile Then
            Dim ImgPath As String = Server.MapPath(("~/Images/" & Convert.ToString(Guid.NewGuid())) + FileUpload1.FileName)
            FileUpload1.SaveAs(ImgPath)
            Dim ShowImgPath As String = ImgPath.Substring(ImgPath.LastIndexOf("\"))
            imgShow.ImageUrl = "~/Images" & ShowImgPath
        Else
            ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "Message", "alert('Please select the image to upload');", True)
        End If
    End Sub

Now over to you:

"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned for more technical updates."

Previous
Next Post »

8 comments

Click here for comments
Anonymous
admin
September 23, 2013 ×

sir ,its good..but i have a one question.i have upload file in many format.i want that click on file link..should be open.(ex-i have one link path and click path ..open in browser)

Reply
avatar
September 23, 2013 ×

Hello..i will upload the article as per your requirement as soon as possible..so keep reading for more updates..:)

Reply
avatar
Unknown
admin
September 24, 2013 ×

It is working only after first post back.On first time it is not working.

Can you suggest why??????

Reply
avatar
September 24, 2013 ×

Hello mahesh devikar..this code is working perfectly..i suggest you to recheck your code and try once again..

Reply
avatar
Unknown
admin
October 15, 2013 × This comment has been removed by the author.
avatar
Unknown
admin
October 15, 2013 ×

Hello Sir is it possible to fetch image from data base and display using WCF in asp.net

Reply
avatar
October 16, 2013 ×

Hi Dhiraj..yes it is possible..i will create an article on that as soon as possible..so stay connected for more useful updates..:)

Reply
avatar
Unknown
admin
September 21, 2015 ×

Hello sir,
I want more than five example of goto statement with full explanation.
Sdangi78@gmail.com

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..