Using of control FileUppload has some specialities – there must be made a PostBack on your event. But using UpdatePanel there’s no PostBack event on client click. For correct work you should use PostBackTrigger.

In this example uploaded images will be saved with unique name and displayed on page.

So how to use it. Create a webForm page named fileUploadInUpdatePanel.aspx and add to it the code between tag FORM.

 

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
             <ContentTemplate> 
                 <asp:FileUpload ID="FileUpload1" runat="server" /> 
                 <asp:Button ID="Button1" runat="server" Text="Upload"  OnClick="Button1_Click" /> 
                 <br /> 
                 <asp:Literal ID="lt" runat="server"></asp:Literal> 
                 <br /> 
                 <asp:Image ID="justUploadedImage" runat="server" /> 
             </ContentTemplate> 

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

 

And in codebehind file fileUploadInUpdatePanel.aspx.cs add this handler

 

       protected void Button1_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("\\")); 
                lt.Text = ShowImgPath; 
                justUploadedImage.ImageUrl = "~/Images" + ShowImgPath; 

            } 
            else 
            { 

                ScriptManager.RegisterStartupScript(this, this.GetType(), "Message", "alert('Please select a specific image to upload');", true); 

            } 
        }