Call hidden ASP.NET FileUpload control from a Button control

Question

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

Massimiliano Kraus · Accepted Answer · 2017-09-25 14:13:35Z

1

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.

edited Sep 25, 2017 at 14:13

Massimiliano Kraus

3,8925 gold badges32 silver badges51 bronze badges

answered Sep 25, 2017 at 13:47

Kevin Shah

1,6122 gold badges14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pranab Kumar De Over a year ago

It didn't work for me.. I tried adding a button as

<asp:Button Text="Browse.." runat="server" id="btnBrowse" OnClientClick ="$('#fileUpload').trigger('click'); return false;" />

but nothing is happening.

Kevin Shah Over a year ago

can you please check is there any javascript error in console

Máster · Accepted Answer · 2018-04-06 00:17:53Z

0

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

answered Apr 6, 2018 at 0:17

Máster

1,00112 silver badges25 bronze badges

Collectives™ on Stack Overflow

Call hidden ASP.NET FileUpload control from a Button control

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related