CODEWITHSUNDEEP
asp.netfile-upload
Pranab Kumar De
Pranab Kumar De

Reputation: 11

Call hidden ASP.NET FileUpload control from a Button control

I have a webpage containing one ASP.NET file upload control and a button to upload the file to server. The existing code looks like below.

<div runat="server" style="width: 110%">
  <asp:FileUpload ID="fileUpload" runat="server" />
  <asp:Button ID="BtnFileUpload" runat="server"           OnClick="BtnFileUpload_Click" Text="Upload" />               
</div>

But our client don't want to see the default look and feel of a standard file upload control. He wants us to add another button and wrap the file upload control with the button, so that whenever user clicks on the button, file upload dialog window opens.

Thanks

Upvotes: 1

Views: 2724

Answers (2)

M&#225;ster
M&#225;ster

Reputation: 1001

In addition to @Kevin Shah's solution, I got it working this way:

<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="BtnFileUpload" runat="server" OnClientClick="$('#ContentPlaceHolder1_FileUpload1').trigger('click'); return false;" Text="Upload" />

My Webform is inside a MasterPage, so I had to look at "View source" while debugging in Chrome to get the correct element ID ContentPlaceHolder1_FileUpload1 instead of just FileUpload1

Upvotes: 0

Kevin Shah
Kevin Shah

Reputation: 1617

you cna do that using jquery you can set fileupload visiblity as none and can open fileuploader from button click like

<div runat="server" style="width: 110%">
    <asp:FileUpload style="display:none" ID="fileUpload" runat="server" />
    <asp:Button ID="BtnFileUpload" runat="server" onclick="$('#fileUpload').trigger('click'); return false;" OnClick="BtnFileUpload_Click" Text="Upload" />
</div>

you need to reference of jquery for this.

Upvotes: 1

Related Questions