Unwanted FileUpload textbox clearing after submit in IE

Question

Since there is no way to change FileUpload button text I hide FileUpload control and used my own fake button and textbox to be able to do it.

<script language="JavaScript" type="text/javascript">
  function HandleFileButtonClick(sender) {
   var parentDiv = $(sender).parent();
   $(parentDiv).children('[id*=fuBoutiqueImage]').click();
  }
  function LoadFakeField(sender) {
   $(sender).parent().find("input[id$='txtFakeText']").val($(sender).val());
  }
</script>

<asp:Panel ID="pnlCommandButtons" runat="server" CssClass="commandButtons">
 <div class="uploader">
  <asp:Label ID="lblUploadFile" EnableViewState="false" runat="server" Text="<%$Resources:Common, BoutiqueGallery_UploadFile %>" />
  <asp:FileUpload ID="fuBoutiqueImage" runat="server" style="" onchange="LoadFakeField(this);" />

  <input ID="txtFakeText" type="text" name="txtFakeText" readonly="true" runat="server" />
  <input ID="btnFakeButton" type="button" onclick="HandleFileButtonClick(this);" value="<% $Resources:Common, ButtonName_Browse %>" runat="server" />
 </div>

 <asp:Panel ID="pnlDeleteButton" class="delete" runat="server">
  <ef:ButtonExt ID="btnDelete" runat="server" Text="<%$Resources:Common, BoutiqueGallery_Delete %>" OnClick="btnDelete_Click" CausesValidation="false" Color="Red" Icon="Delete" Width="60" />
 </asp:Panel>
 <div id="pnlAddButton" class="add">
   <ef:ButtonExt ID="btnAdd" runat="server" Text="<%$Resources:Common, UploadImage %>" OnClick="btnAdd_Click" ValidationGroup="emailSend" Width="104" />
   <asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="fuBoutiqueImage" ErrorMessage="<%$Resources:Common, Attachment_FileToLarge %>" Text="<%$Resources:Common, Attachment_FileToLargeTextBox %>"  Display="Dynamic" OnServerValidate="CustomValidator1_ServerValidate" ValidationGroup="emailSend"></asp:CustomValidator>
<asp:RegularExpressionValidator ID="FileUpLoadValidator" runat="server" ErrorMessage="<%$Resources:Common, Attachment_FileFormat %>" Text="<%$Resources:Common, Attachment_FileFormatTextbox %>" ValidationExpression=".*(\.jpg|\.png|\.gif|\.tif|\.jpeg|\.JPG|\.JPEG|\.PNG|\.GIF|\.TIF)$" ControlToValidate="fuBoutiqueImage" Display="Dynamic" ValidationGroup="emailSend" />
 </div>
 <div class="isActiveCheckbox">
 <asp:CheckBox ID="cbImageIsActive" class="chkItem" OnCheckedChanged="cbImageIsActive_CheckedChanged" Checked='<%# Eval("IsActive") %>' AutoPostBack="true" runat="server" Text="<%$Resources:Common, BoutiqueGallery_IsImageActive %>" />
 </div>
</asp:Panel>

My btnFakeButton triggers FileUpload click action and after that the path/fileName is copied to fake textbox. Then I can click btnAdd and everything works fine in ff but not in IE.

In IE after choosing a file and closing dialog box the path/fileName is copied but when I press btnAdd (or click checkbox) the FileUpload textbox is cleared and nothing happens. After second press of btnAdd, btnAdd_Click starts but FileUpload is empty and it ends with error. Since I can't restore FileUpload textbox from txtFakeText is there any way to prevent FileUpload clearing?

Answer 1

This is how I did it, although I only have to design for IE so I haven't tested this in other browsers. Also, I used a label instead of a textbox to display the selected filename.

I have to give credit to this site for starting me on the right path: http://www.codeproject.com/Tips/296593/To-trigger-Choose-file-to-Upload-dialogue-box-with

Essentially, what I did was create two buttons, as you have done. I used CSS to make the file upload control button the same size as my "fake" button. Then, I set the z-index of my "fake" button to -1, and positioned it directly behind the file upload control button. Then, I set the opacity of the file upload control button to 0. This way, the "fake" button is not used and I do not run into the problem of the real file upload box being cleared when clicking submit. The last step, not detailed in the linked article, is to change the "onchange" for the file upload button to be a function that updates the value of the filename label.

Here is the code:

function updateUploadLabel() {
        document.getElementById("<%= FileUpload1.ClientID %>").click();
        document.getElementById("<%= lblFileName.ClientID %>").innerHTML = document.getElementById("<%= FileUpload1.ClientID %>").value;
        document.getElementById("txtInstructions").disabled = "true";
        document.getElementById("removeUpload").style.display = 'inline';
    }
<asp:FileUpload id="FileUpload1" onchange="updateUploadLabel()" runat="server" style="position: relative; opacity: 0; filter: alpha(opacity = 0);left:0px;font-size:24px; z-index:50; width:100px;/*display:none;*/"/>
<input type="button" id="btnChooseDoc" value="Choose File..." onclick="updateUploadLabel()" style="height:30px; width:100px; z-index: -1; position:relative; left: -105px; top: -10px;" />
<asp:Label id="lblFileName" runat="server" text='No File Chosen' style="position:relative; left: -105px; top: -10px;"></asp:Label>