This is not just another FileUpload + UpdatePanel question.
I have, as stated in the many similar posts, an UpdatePanel and a FileUpload control on my form. I also have a PostBackTrigger set up for my upload button.
It works. The catch is it never does work on first time click. That is:
I click on browse, select my file, press upload. Nothing happens (fupld.HasFile = false);
I click on browse again, select any file (the same or another), press upload and it works fine.
<asp:UpdatePanel ID="upGeneral" runat="server" >
<ContentTemplate>
...
<table id="tabPage10" runat="server" visible="false" width="100%" >
<tr>
...
<td>
<asp:FileUpload ID="fupld" runat="server" Width="80%" />
<asp:ImageButton ID="ibtnUpld" runat="server" onclick="ibtnUpld_Click" />
<td>
...
<tr>
...
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="ibtnUpld" />
</Triggers>
</asp:UpdatePanel>
I've looked around for answers, but this is some really weird behaviour. No luck so far.
Any ideas?
Thanks
Well, the FileUpload control is designed to be used only in postback scenarios and not in asynchronous postback scenarios during partial-page rendering.
http://msdn.microsoft.com/en-us/ysf0192b#using_the_FileUpload_Control_with_the_UpdatePanel_control
You could use the AsyncFileUpload control instead from the AjaxControlToolkit.
<asp:AsyncFileUpload runat="server" ID="asyncFileUpload" Width="400px" ThrobberID="imageThrobber"
OnClientUploadStarted="uploadStarted" OnClientUploadError="uploadError"
ClientIDMode="AutoID" PersistFile="true" PersistedStoreType="Session" />
code behind:
if (asyncFileUpload.HasFile)
{
string fullPath = GetPath(asyncFileUpload.FileName);
asyncFileUpload.SaveAs(fullPath);
}
I've never had any problems with it.
With Post back triggers I had to use the below line of code in code behind:
Page.Form.Enctype = "multipart/form-data";
And this works perfectly fine.
Thanks to the solution in the link - (http://patelshailesh.com/index.php/file-upload-control-fails-first-time-then-works-on-subsequent-submits).
Change
Visible ="false"
to
style="display:none"
and change it from code behind.
If you set Visible="false, control is not actually rendered as HTML. To rendered it as HTML, use style = "display:none" instead of Visible="false"
Related
I have a button that appears after a method in c# is completed:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="submit" runat="server" Text="Submit" OnClick="submit_Click1" visible="true"/>
<button runat="server" class="submit2" id="closeWidget" visible="false">Close</button>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="submit" EventName="Click"/>
</Triggers>
$('.submit2').click(function () {
$('.widly').removeClass('window');
})
The problem is that when my method makes '.submit2' visible, my jQuery script doesn't recognize when i click on it.. However if i make it visible=true before the method is run, it works perfectly well.
So my question is, how do i make this work, after i change the visibility to true?
When using
visible="false"
the control is removed from the HTML output. If you just want to hide it, you can use the display style instead:
<button runat="server" class="submit2" id="closeWidget" style='display: none;'>Close</button>
Then you can show it by removing the display style attribute.
My page contains a Repeater that is loaded with data asynchronously as the data becomes available, using an UpdatePanel to manage the asynchronous requests.
The page contains something a little like this:
<asp:UpdatePanel ID="DataUpdatePanel" runat="server">
<ContentTemplate>
<table>
<asp:Repeater ID="RepeaterBlock" runat="server">
<HeaderTemplate><thead><tr><th>Name</th><th>Status</th><th class="empty"></th></tr></thead></HeaderTemplate>
<ItemTemplate><tr>
<td><a class="link" href="Detail.aspx?item=<%# DataBinder.Eval( Container.DataItem, "Name") %>"><%# DataBinder.Eval( Container.DataItem, "Name") %></a>
</td>
<td><%# DataBinder.Eval( Container.DataItem, "Status") %></td>
<td class="no-border">
[<asp:LinkButton CommandName='Schedule' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Name") %>' ID="ScheduleButton" runat="server" CausesValidation="false" >Schedule</asp:LinkButton>]
</td>
</tr></ItemTemplate>
</asp:Repeater>
</table>
</ContentTemplate>
</asp:UpdatePanel>
The problem being that the LinkButton does not appear to trigger a postback of any kind- there is no visible response to clicking on it and putting a break point on the event listener in the codebehind, it is never triggered.
I have tried manually adding a Trigger like this:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ScheduleButton" />
</Triggers>
But unfortunately becausee the controls are within the ContentTemplate it crashes out if I try to do that.
Another avenue I have explored is to explicitly add them in the codebehind:
RepeatData.DataBind();
RepeatData.ItemCommand += new RepeaterCommandEventHandler(RepeatData_ItemCommand);
UpdateScripts.RegisterAsyncPostBackControl(FindControlRecursive( RepeatData, "SchedulButton"));
The FindControlRecursive method just behaves like FindControl only it actually finds controls.
That doesn't crash out, but it also doesn't cause the LinkButtons to become effective.
Can anyone suggest what I need to do to cause them to post back as I expect them to?
Edit: Originally I had this page working without the UpdatePanel and it worked fine, with more data it started timing out, so I needed to obtain the data asynchronously. It was when I made this change that the linkbuttons ceased working.
You need to register all your link buttons to OnCommand with a server side event handler to use the CommandName / CommandArg properties.
[<asp:LinkButton CommandName='Schedule' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Name") %>' ID="ScheduleButton" runat="server" CausesValidation="false" OnCommand="LinkButtonCommandEventHandler" >Schedule</asp:LinkButton>]
See msdn reference:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.linkbutton.commandname.aspx
You need either <asp:Repeater ID="RepeaterBlock" runat="server" OnItemCommand="RepeaterData_ItemCommand">
or RepeatData.ItemCommand += new RepeaterCommandEventHandler(RepeatData_ItemCommand); in each postback before RepeatData.DataBind();
How to upload an image when fileupload is under updatepanel?
I have a button say "upload" inside that update panel.
When I click that button inside the button click event I got the fileupload hasfile=false.
Please suggest if there is any way to upload image file when fileupload control is inside update panel and the button is making asyncpostback.
Thanks in advance.
you can use AJAX AsyncFileUpload control
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AsyncFileUpload/AsyncFileUpload.aspx
Also check this thread.
File uploading in AJAX updatepanel without full postback
It is not possible. For security reasons, the browser does not allow javascript to upload files.
There are two normal workarounds for this problem:
Perform the upload in an iFrame
Use a flash plugin for uploading
I recently applied this tool to upload files asynchronously in my web page, and it works beatifully: http://valums.com/ajax-upload/
It creates an iFrame for you automatically, and posts the frame and and sends the resulting html (or json object) to an event handler. My page that receives the uploaded file, returns a json object describing the file, e.g. filename and a unique id, so that I can link the data that is posted on the main page to the uploaded file.
For security, I store the credentials of the user uploading the file, so when the form is posted I can validate that the user that posts the form is indeed the user that uploaded the file.
I had tried as below. It is working.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Upload" runat="server" Text="Upload" OnClick="Upload_Click" /><br />
<asp:Image ID="NormalImage" runat="server" /></ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Upload" />
</Triggers>
</asp:UpdatePanel>
Reference to
http://www.c-sharpcorner.com/uploadfile/prathore/fileupload-control-in-update-panel-using-Asp-Net-ajax/
You can try this code. I tried it, it's working on my side.
<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div>
<asp:FileUpload ID="FileUpload1" runat="server" /> <br/>
<asp:Button ID="btn_Upload" runat="server" Text="Save" OnClick="btn_Upload_Click" /><br />
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btn_Upload" />
</Triggers>
</asp:UpdatePanel>
Update:
There was actually a hidden panel with validator in the user control that was causing page not to be valid on the first postback. Consider this issue resolved.
This is first time I am using this control and it is behaving rather strange. I have to click on the "Next" button twice for it to move to the next step. I tried explicitly setting active index, using MoveTo etc. Nothing works. Here is the markup for the control. Anybody has any ideas why?
<asp:Wizard ID="UserWizard" runat="server" ActiveStepIndex="0"
StartNextButtonImageUrl = "~/App_Themes/Default/images/buttons/continue.gif" StartNextButtonType="Image"
StepNextButtonType="Image" StepNextButtonImageUrl="~/App_Themes/Default/images/buttons/continue.gif"
FinishPreviousButtonImageUrl="~/App_Themes/Default/images/buttons/back.gif"
FinishPreviousButtonType="Image" FinishCompleteButtonImageUrl="~/App_Themes/Default/images/buttons/save.gif"
FinishCompleteButtonType="Image" CancelButtonType="Image" CancelButtonImageUrl="~/App_Themes/Default/images/buttons/back.gif"
DisplaySideBar="false" >
<WizardSteps>
<asp:WizardStep Title="User Profile" ID="UserProfile" runat="server">
<uhc:ctlUserProfileEdit ID="ctlUserProfileEdit" runat="server">
</uhc:ctlUserProfileEdit>
<br clear="all" />
<div>
<asp:ImageButton ID="cmdResetPassword" runat="server" ImageUrl="~/App_Themes/Default/images/buttons/resetpassword.gif" />
</div>
<div>
<asp:UpdatePanel ID="upSchools" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<uhc:ctlSchoolLocationSelector ID="ctlSchoolLocationSelector" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:WizardStep>
<asp:WizardStep Title="Roles" ID="Roles" runat="server">
<uhc:ctlPermissionInternal ID="ctlPermissionInternal1" runat="server"></uhc:ctlPermissionInternal>
<uhc:ctlPermissionExternal ID="ctlPermissionExternal1" runat="server"></uhc:ctlPermissionExternal>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
I don't know for sure if this is what's causing it, but I find it strange that there is an UpdatePanel within the Wizard control, rather than the Wizard Control within the update panel. This may be causing some strange behavior.
Can you change this and see if the problem resolves itself?
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload onchange="clickTheButton();" ID="FileUpload1" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
Button 1 is outside the update panel and the javascript that gets run when a user adds a file in the upload box is this:
function clickTheButton() {
document.getElementById('<%= Button1.ClientID %>').click();
}
The problem is simple. FileUpload1.HasFile == false. I don't know why this is, but when I put it in the update panel it ceases to work.
I have seen some other threads on this. But none of them answer why this is happening, they just point to things you can download.
EDIT: Really my main reason for wanting to do this is so that I can get a ..Uploading File.. Tag to pop up while the client is uploading to the server and once it has completed, display it in a datalist. I just cant get the UpdateProgress to work.
Basically you just need to make your button do a full postback to send the file. Also make sure that you have this.Form.Enctype = "multipart/form-data"; set in your code, or you can put in that page. AsyncPostbacks don't work with files for security reasons as mentioned, without hacks. (I've never been able to get it to work).
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload onchange="clickTheButton();" ID="FileUpload1" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
For security purposes, browsers don't let you post files via javascript. Imagine if I could write a little bit a javascript to asynchronously submit the contents of your My Documents folder to my server.
So javascript-ish methods of posting the form, like the XMLHttpRequest used by the UpdatePanel, won't work.
This post describes a decent work around if you're on 3.5 SP1. http://geekswithblogs.net/ranganh/archive/2009/10/01/fileupload-in-updatepanel-asp.net-like-gmail.aspx
And this post describes a couple work arounds if you'd prefer not to use the AjaxControlToolkit. http://geekswithblogs.net/ranganh/archive/2008/04/01/file-upload-in-updatepanel-asp.net-ajax.aspx
File Upload will not work with a partial post back.
So just add this line at your page load
ScriptManager.GetCurrent(this).RegisterPostBackControl(this.YourControlID);
Or use PostBackTrigger.
<Triggers>
<asp:PostBackTrigger ControlID="YourControlID" />
</Triggers>
Or You need special AsyncFileUpload control as defined in AjaxControl Toolkit.
<ajaxToolkit:AsyncFileUpload OnClientUploadError="uploadError"
OnClientUploadComplete="uploadComplete" runat="server"
ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"
UploadingBackColor="#CCFFFF" ThrobberID="myThrobber" />
You can check here.