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:
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
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.
Member
36 Points
203 Posts
Update Panel doesn't allow File Upload to complete.
Apr 10, 2014 04:52 PM|baboso#4|LINK
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.
All-Star
50831 Points
9895 Posts
Re: Update Panel doesn't allow File Upload to complete.
Apr 10, 2014 08:36 PM|A2H|LINK
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>Aje
My Blog | Dotnet Funda
All-Star
50831 Points
9895 Posts
Re: Update Panel doesn't allow File Upload to complete.
Apr 10, 2014 08:48 PM|A2H|LINK
Another suggestion is to use the asyncfileupload extender from the Ajax control toolkit.
Refer the below link for more details
Aje
My Blog | Dotnet Funda
Member
36 Points
203 Posts
Re: Update Panel doesn't allow File Upload to complete.
Apr 12, 2014 12:54 AM|baboso#4|LINK
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.
All-Star
50831 Points
9895 Posts
Re: Update Panel doesn't allow File Upload to complete.
Apr 12, 2014 01:02 AM|A2H|LINK
Glad to be of help.
Aje
My Blog | Dotnet Funda