So what I am trying to do is, have a user select a file to upload. Since I am only going to accept images, I will test the extension. I also want to limit the file size to under 2mb, so I will test that(haven't implemented in code yet). If the file they have selected passes, then I want the label to say "File Accepted", and store the file upload information for a later button click. This will happen once the user has finished filling out the rest of the form. Eventually, I will put an UpdateProgress control on the page while it is checking if the file is allowed. I would rather not have it post back for this, so if I can get it to work, that would be great. BTW, this will all work fine if I take the label out of the update panel.
What happens when I run this, is it will go to the else statement of the first if and return "Please select a file." Meaning that FileUpload1.HasFile is returning false. The only reason I can see that this is happening is because the UpdatePanel can not access that info from the FileUpload control?
Code Behind:
Label SubmitButtonLabel2= (Label)UpdatePanel1.FindControl("SubmitButtonLabel");
if (FileUpload1.HasFile)
{
string[] fileName = FileUpload1.FileName.Split('.');
if ((fileName[fileName.Length - 1] == "jpg") ||
(fileName[fileName.Length - 1] == "gif") ||
(fileName[fileName.Length - 1] == "bmp") ||
(fileName[fileName.Length - 1] == "jpeg") ||
(fileName[fileName.Length - 1] == "png"))
{
SubmitButtonLabel2.Text = "File Accepted.";
}
else
{
SubmitButtonLabel2.Text = "File type not allowed. Please choose another.";
}
}
else
{
SubmitButtonLabel.Text = "Please select a file.";
}
Page:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="SubmitButton" runat="server" Text="Submit File" OnClick=SubmitButton_Click />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always">
<ContentTemplate>
<asp:Label ID="SubmitButtonLabel" runat="Server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="SubmitButton" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
No need to do anything you just need to add multipart data attribute to your form.
Page.Form.Attributes.Add("enctype", "multipart/form-data");
See the following link for more details.
http://knowledgebaseworld.blogspot.com/2009/02/file-upload-not-working-with-update.html
<Triggers>
<asp:PostBackTrigger ControlID="YourControlID" />
</Triggers>
Add the trigger for the UpdatePanel and give the ControlID. In case you are using TabContainer, use the ID of the tab container.
Add this line in your page_load
ScriptManager.GetCurrent(this).RegisterPostBackControl(this.Button);
If you use FileUpload control in Update panel you have to set PostbackTrigger for the button you write the code to save the upload file.
Now Following code I have btnSave button for save the file in the upload folder. So I set the postbacktrigger for it.
<Triggers>
<asp:PostBackTrigger ControlID="btnSave" />
</Triggers>
Hope this will help you.
Default asp.net FileUpload control will never work with UpdatePanel. You need special AsyncFileUpload control as defined in AjaxControl Toolkit. This
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/AsyncFileUpload/AsyncFileUpload.aspx
alt text http://ruchitsurati.net/files/fileupload.png
<ajaxToolkit:AsyncFileUpload OnClientUploadError="uploadError"
OnClientUploadComplete="uploadComplete" runat="server"
ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"
UploadingBackColor="#CCFFFF" ThrobberID="myThrobber" />
Don't forget to change the type of the form, to allow file uploads (enctype or something like that, i'm not in front of Visual Studio so can't be that precise.)
I had the same problem.
Make the the button to upload the file as the trigger of the Upload panel
Something like this,
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlUploadImage" runat="server">
<asp:FileUpload ID="fuldImage" runat="server"></asp:FileUpload>
<asp:LinkButton ID="lnkbUpload" runat="server" onclick="lnkbUpload_Click">Add</asp:LinkButton>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="lnkbUpload"/></Triggers>
</asp:UpdatePanel>
I got it working after using two of the solutions posted here.
I had to add both
Page.Form.Attributes.Add("enctype", "multipart/form-data");
on Page_Load as well as
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
on the markup for the update panel.
Page.Form.Attributes.Add("enctype", "multipart/form-data");
Doing this will solve your problem.
Refer to this article.
You're answer can be found here
It is basically disallowed by default because of javascript and browser security reasons. But this is a workaround.
My guess would be that the HasFile will only be filled when the post is already done, not before that.
You might want to check if the FileUpload1.FileName is already filled before the post is done, but I kinda doubt that.
Related
I'm trying to create a user control for upload and download attachment in my web application.
In my user control, i'm using asp.net update panel for upload and download files, and i use my user control in a <dive>...</dive> tag that display style is none.
Everywhere when i using this user control, i'm trying to set <dive>...</dive> tag display style to show user control, and i'm using below code for display this user control in modal popup mode :
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" CancelControlID="CancelButton" DropShadow="true" PopupControlID="PanelMain" PopupDragHandleControlID="PanelHeader" TargetControlID="btnFileOperation" />
In my user control i write the same below code:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:FileUpload ID="fileUploadImage" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Upload Image" OnClick="btnUpload2_Click" />
<br />
<asp:Label ID="lblMessage" runat="server" Text="Image uploaded successfully." Visible="false"></asp:Label><br />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Please wait image is getting uploaded....
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
But when i want access to FileUpload.PostedFile or FileUpload.HasFile properties in code(click event of upload button), these properties are null.
What could be the reason for this problem? and How to fix it?
I spent hours on this very problem, and finally found the answer on a five-year-old asp.net forum post: UpdatePanel + FileUpload + PostBackTrigger doesn't seem to work. To boil it down, on my site.master page the <form> tag had simply been:
<form id="Form1" runat="server">
The post from 2007 suggested changing it to:
<form id="Form1" method="post" enctype="multipart/form-data" runat="server">
Works great! I don't understand why, but it does.
The bulk of the answers I found all over the net -- including several on StackOverflow -- suggested simply creating a postback trigger for the update panel. None of the variations of that worked for me. About five minutes before quitting time, I found this obscure page on the asp.net forums. One of the best feelings is getting a problem solved right before it's time to go home.
I hope this helps you.
Attempting to use a FileUpload or AsyncFileUpload control in an updatepanel on a NET 4.5/C# web application.
I've tried using either standard Scriptmanager or ToolKitScriptManager in my masterpage.
My Save button is set as a PostBackTrigger (tried AsyncPostbackTrigger too).
No matter what, my (Async)FileUpload.HasFile always returns false.
Remove the updatepanel and both uploadcontrols work fine.
What really throws me is that I have this working in another project (scriptmanager in masterpage, Fileupload in updatepanel, SaveButton is PostbackTrigger).
Is there some specific AJAX version or .NET version that can cause problems?
This is extremely frustrating.
Adding the button to the UpdatePanel's trigger tag, I got it working:
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClick = "btnUpLoad_OnClick" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID = "btnUpload" />
</Triggers>
</asp:UpdatePanel>
I did not have to do anything different server-side (like user5159158's answer).
In Page_Load add: Page.Form.Attributes.Add("enctype", "multipart/form-data");
File Upload will not work with a partial post back. It requires full page request. So add the below line in your page load.
ScriptManager.GetCurrent(this).RegisterPostBackControl(this.YourControlID);
FileUpload
FileUpload requires full page request. This is a limitation of the XmlHttpRequest component used in all AJAX frameworks for asynchronous calls to the application.
What really throws me is that I have this working in another project
(scriptmanager in masterpage, Fileupload in updatepanel, SaveButton is
PostbackTrigger).
I think you are using Full PostBack, although FileUpload is inside **UpdatePanel.
For example,
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="SaveButton" runat="server" OnClick="SaveButton_Click"
Text="Upload your file" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="SaveButton" />
</Triggers>
</asp:UpdatePanel>
AsyncFileUpload
If you use AsyncFileUpload with UpdatePanel, AsyncFileUpload.HasFile should only checked inside UploadedComplete (you cannot check inside Button click event).
The reason is AsyncFileUpload is uploaded the file via Async by itself.
Note: make sure you use ToolkitScriptManager instead of ScriptManager
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<ajaxToolkit:AsyncFileUpload runat="server" ID="AsyncFileUpload1"
OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
<asp:TextBox runat="server" ID="TextBox1" /><br/>
<asp:Button ID="SaveButton" runat="server" OnClick="SaveButton_Click"
Text="Save" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SaveButton" />
</Triggers>
</asp:UpdatePanel>
private string FileName
{
get { return (string)(Session["FileName"] ?? ""); }
set { Session["FileName"] = value; }
}
protected void SaveButton_Click(object sender, EventArgs e)
{
string fileName = FileName;
string path = Server.MapPath("~/App_Data/");
var fileInfo = new FileInfo(path + FileName);
}
protected void AsyncFileUpload1_UploadedComplete(object sender,
AsyncFileUploadEventArgs e)
{
if (AsyncFileUpload1.HasFile)
{
FileName = AsyncFileUpload1.FileName;
string path = Server.MapPath("~/App_Data/");
AsyncFileUpload1.SaveAs(path + AsyncFileUpload1.FileName);
}
}
Other Thoughts
I personally do not like using AsyncFileUpload inside UpdatePanel. Instead, I'll rather use Full PostBack if I need to upload a file.
When I click on the attach button, It adds a new row to the grid with the postedFile name.
But its also causing the whole page to refresh, as if the updatePanel doesnt exist. Whereas, I would like just the gridview to update. Why does this have to be this way with file upload controls. The UpdatePanel works as desired for other controls/grids on page.
I do not have a knowledge on jquery, so have to work it out only with c#. Any suggestions.
<asp:updatepanel runat="server" updatemode="conditional">
<triggers>
<asp:postbacktrigger controlid="btnAttach"/>
</triggers>
<contenttemplate>
<asp:gridview ...../>
<asp:fileupload id="fup" runat="server">
<asp:button id="btnAttach" text="attach" runat="server/>
</contenttemplate>
</asp:updatepanel>
i suggest you to use the ajax asyncFileUploader
Link
Link
it will help you without postback and without jquery
it use plain javascript and its easy the following link containing the example also
Fileupload is one of the controls that is not compatible with updatepanel:
Read here
I am uploading files using asp.net fileupload control , whenever postback occurs due to other field's on the page, selected path in file upload control lost. I'm using multiple file upload control on page for diff. Purpose how to solve this problem? Please help with simple & suitable example dear.
string file = Path.GetFileName(UploadSalesServiceCopy.PostedFile.FileName);
string filepath2 = ConfigurationManager.AppSettings["ServerMapImgPath"].ToString();//.......local drive path via web config
string subPath = filepath2 + file;
bool IsExists = System.IO.Directory.Exists(Server.MapPath(subPath));
if (!IsExists)
System.IO.Directory.CreateDirectory(Server.MapPath(subPath));
if (UploadSalesServiceCopy.HasFile)
{
//UploadSalesServiceCopy.SaveAs(subPath);//PHYSICAL path
UploadSalesServiceCopy.SaveAs(Server.MapPath(subPath));//server path
}
else
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "javascript", "alert('No File Selected.')", true);
}
While clicking on Upload button ...
Your page redirect to Page_load event first , where you set page values .
For that in
page_load(..)
{
if(!IsPostBack)
{
..setpagevalues();
}
}
That main reson...you are getting null path....
Try it..
If you are using asp.net File upload control with update panel.Then the problem is
File upload control is not compatible with partial post back.
<asp:FileUpload ID="fpTest1" runat="server" />
<asp:FileUpload ID="fpTest2" runat="server" />
<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnActions" runat="server" Text="Other Actions" >
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="test" runat="server" OnClick="test_Click" Text="Upload File" />
You can see that when you click other actions button file upload will have the values.
Put the Post back controls inside the Update Panel and have the file upload controls out
of the update panel.
You simply have to use fileupload with updatepanel and also put ViewStateMode="Enabled" to fileupload.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" ViewStateMode="Enabled"/>
</ContentTemplate>
</asp:UpdatePanel>
<%# Control Language="C#" AutoEventWireup="true" CodeFile="UploadVideo.ascx.cs" Inherits="Controls_UploadVideo" %>
<h4>Select a video file to upload:</h4>
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:FileUpload id="fuUploadVideo"
runat="server">
</asp:FileUpload>
<br /><br />
<asp:Button id="btnUploadVideo"
Text="Upload file"
OnClick="btnUploadVideo_Click"
runat="server">
</asp:Button>
<hr />
<asp:Label id="UploadStatusLabel"
runat="server">
</asp:Label>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUploadVideo" />
</Triggers>
If use the file upload control to select a video file then clicking the file upload button does not resolve a webpage. Everything is being run on my local machine.
If no file is selected then it goes to the website I expect. Does anyone know why this might be the case?
So far I'm aware, standard FileUpload doesn't work inside an UpdatePanel. You could use AsyncFileUpload control instead.
There's a lenghty post about this and indeed a FileUpload doesn't work inside an UpdatePanel. There are workarounds, and Claudio's solution will probably be the most easy for your situation.