Asp.NET Updatepanel not working as expected

Question

here is what I am up with.. I am uploading images through FileUpload Control.. But when I give trigger to updatepanel The Fileupload control shows that it is empty.. I don't know why..

and here is what I need..

I need to update my updatepanel only when I click upload button and other then that I don't want to update its contents.. What changes I need to do in my coding

Here is the aspx code..

 <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
    <div>


            <fieldset style="width:50%; margin-left:300px">
            <legend>Upload Files</legend>
                <asp:FileUpload runat="server" ID="UploadImages" style="background-color:white; position:relative; font-family:'Palatino Linotype'; font-size:medium" Width="500px" AllowMultiple="true"/>
                <asp:Button runat="server" ID="uploadedFile" style="position:relative;  font-family:'Palatino Linotype'; font-size:medium; width: 112px; height: 29px;" Text="Upload" OnClick="uploadFile_Click" />
            </fieldset>


    <div id="back" runat="server" class="transbox" style="width:100%;height:100%;left:0px;top:0px;position:absolute" Visible="false">
     <asp:UpdatePanel ID="updtpanel" runat="server" UpdateMode="Conditional" style="width:100%;height:100%;left:0px;top:0px;position:absolute">
           <ContentTemplate>
                <asp:Button ID="btnsave" runat="server" UseSubmitBehavior="true" Text="Find Images" OnClick="btnsave_Click" Font-Bold="true" style="position:absolute" BackColor="Yellow"></asp:Button>--%>
           </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="uploadedFile" EventName="Click"/>
            </Triggers>
        </asp:UpdatePanel>

    </div>

    </div>
    </form>

and here is the .cs Code for FileUpload..

protected void uploadFile_Click(object sender, EventArgs e)
    {

        if (UploadImages.HasFiles)
        {

            string fileExt = Path.GetExtension(UploadImages.FileName).ToLower();
            if (fileExt == ".jpeg" || fileExt == ".png" || fileExt == ".jpg" || fileExt == ".bmp")
            {
                foreach (HttpPostedFile uploadedFile in UploadImages.PostedFiles)
                {
                    count1 += 1;
                }

                foreach(HttpPostedFile uploadedFile in UploadImages.PostedFiles)
                {
                    count += 1;

                    filepath = Server.MapPath("~/Images/" + uploadedFile.FileName);
                    uploadedFile.SaveAs(filepath);
                    newpath = "../Images/" + uploadedFile.FileName;
                    try
                    {
                        createImgPanel();
                        Image nimg = Page.FindControl("img" + count) as Image;
                        nimg.ImageUrl = newpath.ToString();

                        Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Files Uploaded!!');", true);

                    }

                    catch (Exception ex)
                    {
                        Response.Write(ex.Message);
                    }

                }
            }
            else

            {
                Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Please Select only Image Files!!');", true);
            }

        }
        else
        {
            Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Please Select a File First!!');", true);
        }
    }

If I comment the Triggers in updatepanel uploadFile.HasImages will work.. But if I uncomment it It will directly land on Please Select a file first error msg.. What mistake am committing in the code..

Answer 1

Your updatepanel is triggering a postback right after the UploadFile control is clicked so what happens is that the file chosen is postedback immediately with that very first request. By the time you submit the second request by clicking on the button, the UploadFile control is empty again. The UploadFile control (or any input:file element, for that matter) won't retain the selected value after a postback. What you see is by design.

The easiest thing to do is avoid the initial postback and do the validation entirely on the client side. In other words, remove the triggers section from the updatepanel since you already discovered that this works. Obviously, you would still do the validation on the server side when the "upload files" button is clicked.

There are other alternatives to this but the bottom line is that you cannot do a full postback (this is what UpdaPanels do behind the scenes) when you have an UploadFile control in the page because this will cause the files selected to be submitted. To prove what I am saying, put a break point on Page_Load and add a watch to Request.Files when the updatepanel triggers the update.