I came across a strange situation with a button and the fileupload control in IE only. I did find a temporary way around this issue, however i would like to find out what called be the actual cause of the issue and if there is a better way around it then what i have done.
There a few things to note about the application. 1. I am working with a masterpage 2. I have an updatepanel on the masterpage 3. Controls in question are on a clientPage 4. I have hidden the fileupload control and instead show users a "custom" file upload box within a modalpopup. Fileupload control is not on the modalpopup 5. The following works in all browsers except IE
Please note this has nothing to do with fileupload not working with updatepanels, i have already added the button used to upload the file as a trigger to the updatepanel.
How code works: A user clicks an image which causes the hidden fileupload to trigger and open browse file dialog box. Once user has selected the file, a modalpopup appears with a textbox and two buttons (browse and upload). The textbox has the file name, the browse button is used to open the browse file dialog box again, and the upload button is used to uplood the file.
This all works perfectly in all browers except IE. In IE the following happens: When user clicks the upload button it appears as nothing has happened, if they click the button again it then fires the button event, but then the fileupload control states that is has no file.
After i unhide the fileupload control I found that the following was happening: On first button click the fileupload was being cleared, and not doing a postback. Second button click the postback occured but fileupload is now empty resulting in my control not having any file.
To get around this i did the following. On the button's first click i fire a clientside event and using jquery do the following if the browser is IE: Take the full filename and path of the file from the fileupload control and set it as the value for a hidden field (possible due to IE not hiding filepath like other browsers). Then force it to fire the click event for another button, that goes to a different onclick method to upload the file.
Code:
image
<a onclick="uploadKycSubType('Identity','','0')">
<img src="../images/upload.png">
</a>
modal popup and fileupload control:
<cc1:ModalPopupExtender ID="ModalPopupExtender4" runat="server" TargetControlID="hdnTarget4" PopupControlID="pnlUpload" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<cc1:AnimationExtender ID="AnimationExtender4" runat="server" TargetControlID="btnUploadClose">
<Animations>
<OnClick>
<Sequence AnimationTarget="pnlUpload">
<Parallel AnimationTarget="pnlUpload" Duration=".7" Fps="20">
<Move Horizontal="200" Vertical="200"></Move>
<Scale ScaleFactor="0.05" FontUnit="px" />
<FadeOut />
</Parallel>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="width" Value=""/>
<StyleAction Attribute="fontSize" Value="14px"/>
<EnableAction AnimationTarget="btnUploadClose" Enabled="true" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<asp:FileUpload ID="imageUpload" CssClass="fileInput" runat="server" onchange="$('#hiddenText').val($(this).val().split('\\').pop());uploadChange();" />
<asp:Panel ID="pnlUpload" runat="server" CssClass="Modal_Upload" >
<table width="100%" style="border-collapse:collapse">
<tr>
<td colspan="2">
<h2><%#bindValue("UploadDocument")%></h2>
</td>
</tr>
<tr >
<td colspan="2">
<p><%#bindValue("UploadDocumentInfo")%>.</p>
</td>
</tr>
<tr>
<td>
<div class="hide">
<input type="text" class="textbox" id="hiddenText"/>
</div>
<input type="text" class="textbox" id="imageText" style="width:350px"/>
</td>
<td>
<input type="button" value="<%#bindValue("Browse")%>" onclick="browse()" class="buttonClose" />
</td>
</tr>
<tr>
<td>
<div class="AddSpace">
</div>
<asp:Button runat="server" ID="btnUploadClose" CssClass="buttonClose" OnClick="btnClose_Click"/>
</td>
<td>
<div class="AddSpace">
</div>
<asp:Button runat="server" ID="btnUpload" CssClass="buttonShort" OnClick="btnKycUpload_Click" OnClientClick="uploadIEKyc();"/>
</td>
<asp:Button runat="server" ID="Button1" CssClass="fileInput" OnClick="btnKycUploadIE_Click"/>
</tr>
</table>
</asp:Panel>
jquery functions
function uploadKycSubType(link,bankAccount,bankNumber) {
$("#<%= hdnEdit.ClientID %>").val(link);
$("#<%= hdnBank.ClientID %>").val(bankAccount);
$("#<%= hdnBankNumber.ClientID %>").val(bankNumber);
browse();
}
function browse(){
$('#<%= imageUpload.ClientID %>').click();
}
function uploadChange() {
$('#imageText').val($('#hiddenText').val());
if($("#<%=pnlUpload.ClientID %>").css("display") == "none")
$find("MainContent_ModalPopupExtender4").show();
}
function uploadIEKyc() {
var ua = $.browser;
if (ua.msie) {
$('#<%= hdnFile.ClientID %>').val($('#<%= imageUpload.ClientID %>').val());
$('#<%=Button1.ClientID %>').click();
}
}
Postbehind
Add button to trigger
protected void Page_Init(object sender, EventArgs e)
{
PostBackTrigger trigger = new PostBackTrigger();
trigger.ControlID = btnUpload.UniqueID;
UpdatePanel up = (UpdatePanel)Page.Master.FindControl("Updatepanel1");
up.Triggers.Add(trigger);
}
uploadfile click events
protected void btnKycUpload_Click(object sender, EventArgs e)
{
if (imageUpload.HasFile)
{
//do file upload
}
else
{
this.ShowInstruction(ErrorName.DocumentNotSaved, Session["username"] == null ? string.Empty : Session["username"].ToString());
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ScrollTo", "topScreen();", true);
}
}
protected void btnKycUploadIE_Click(object sender, EventArgs e)
{
string files = hdnFile.Value;
if (!string.IsNullOrEmpty(files))
{
FileInfo fi = new FileInfo(files);
string fileName = fi.Name;
string fileExtension = fi.Extension;
fileExtension = fileExtension.Substring(fileExtension.IndexOf(".") + 1);
//do file upload
}
else
{
this.ShowInstruction(ErrorName.DocumentNotSaved, Session["username"] == null ? string.Empty : Session["username"].ToString());
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ScrollTo", "topScreen();", true);
}
}
If you require any thing else in regards to this, let me know, other wise thank you for your time and help.
