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

Introduction: 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."

• Tweet
• Share
• Share
• Share

Related Post