Update Panel doesn't allow File Upload to complete.

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.

Answer 1

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>

Answer 2

User2103319870 posted

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

Refer the below link for more details

• Ajax File Upload control

Answer 3

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.

Answer 4

User2103319870 posted

Glad to be of help.