locked
Update Panel doesn't allow File Upload to complete. RRS feed

  • Question

  • User1292384883 posted

    I have a blog application with an Upload File control to upload pictures related to the blog.  After blog is created and a picture loaded,  button1 is clicked to submit blog.

    I have a confirmation Label wrapped with an Update Panel to confirm a successful submission and  label then fades away.  The problem is that after I click the submit button, the upload file control doesn't work (it fails to load the picture so everything fails after that)..    The File Upload works fine if I take the Update Panel out.  This may be a case of postback problems.  I'm at a loss.  Below are the xml entries:  Further below is the code behind for Button1:

    <asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" Width="195px"></asp:Button>

    <br />

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >

    <ContentTemplate>

    <asp:Label ID="StatusLabel" runat="server" ForeColor="Blue" >

    </asp:Label>

    </ContentTemplate>

    <Triggers>  <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />  </Triggers>

    </asp:UpdatePanel>

    <ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1"  runat="server"  TargetControlID="UpdatePanel1" >

    <Animations>

    <OnUpdated>

    <FadeOut Duration="5.0" Fps="24" />

    </OnUpdated>

    </Animations>

    </ajaxToolkit:UpdatePanelAnimationExtender>

    Code Behind:

    protected void Button1_Click(object sender, EventArgs e)

     {

    StatusLabel.ForeColor =Color.Red;

    if (UploadControl1.HasFile)

     {

    try

     {

    if ((UploadControl1.PostedFile.ContentType == "image/jpeg" || UploadControl1.PostedFile.ContentType == "image/png") && (TextBox1.Text != string.Empty && TextBox2.Text != string.Empty))

    {

    if (UploadControl1.PostedFile.ContentLength < 102400)

    {

    string filename = Path.GetFileName(UploadControl1.FileName);

    string completePath = "~/blogimages/" + filename;

    UploadControl1.SaveAs(Server.MapPath("~/blogimages/") + filename);

    var blog = new Blog { Name = TextBox1.Text, BlogContent = TextBox2.Text, BlogCategory = DropDownList1.SelectedValue, BlogPicture= completePath };

                                db.Blogs.Add(blog);

                                db.SaveChanges();

                                StatusLabel.ForeColor = Color.Blue;

                                StatusLabel.Text = "Blog was succecsssfully submitted!";

                                TextBox1.Text= string.Empty; TextBox2.Text = string.Empty;

    }

    else

                       StatusLabel.Text ="The file has to be less than 100 kb!";

    }

    else

                       StatusLabel.Text = "Make sure blog title and content are filled out. Only JPEG or PNG files are accepted and  !";

    }

    catch (Exception ex)

    {

                        StatusLabel.Text = "The file could not be uploaded. The following error occured: " + ex.Message;

      }

                }

    else

                    StatusLabel.Text =  "There is no picture file or content to upload. ";  

            }

    I get this part of the code while using the update panel "There is no picture file or content to upload. ";  If I take the panel out, then everything works

    OK except that I loose the label fading action.

    Thursday, April 10, 2014 4:52 PM

Answers

All replies

  • User2103319870 posted

    The FileUpload control dont work with updatepanels . However If you still want to use fileUpload control with update panel then You need to set PostBacktrigger for updatepanel instead of AsyncPostBackTrigger.

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:FileUpload ID="fileUpload" runat="server" Width="310px/>
                <asp:Button runat="server" ID="UploadButton" Text="Upload" OnClick="UploadButton_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger ControlID="UploadButton" />
            </Triggers>
        </asp:UpdatePanel>

    Thursday, April 10, 2014 8:36 PM
  • User2103319870 posted

    Another suggestion is to use the asyncfileupload extender from the Ajax control toolkit. 

    Refer the below link for more details

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 10, 2014 8:48 PM
  • User1292384883 posted

    I placed the  blog controls in an upload panel1 and the asyncUpload control on a 2nd update panel and it worked like a charm.  Thanks you all.

    Saturday, April 12, 2014 12:54 AM
  • User2103319870 posted

    Glad to be of help.

    Saturday, April 12, 2014 1:02 AM