Answered by:
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.
Thursday, April 10, 2014 4:52 PM
Answers
-
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
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