Relay click to Button to trigger ASP.NET File Upload

Question

In a ASP.NET C# website I have an input that uploads a file to my server. To overcome the issue of not being able to style an input of the type=file I have created a styled div that looks like the input but actually just relays the message to the actual input which has display: none to be invisible.

My Problem: Relaying the message isn't working, ie, when I relay the click message to the actual input the file is never uploaded(nothing happens). I know the button works because if I click the actual input it uploads the file sucessfully.

Is there some ASP.NET security stopping me from being able to do this? Whats going wrong? How can I acheive what I am trying to do:
Have a style input where type=file(not a boring browse button) & relay the click to the actual input?

My actual input which works:

<input id="fileUpload" type="file" Runat="server" NAME="fileUpload"/>
<asp:button id="btnSave" OnClick="bt1Clicked" 
                runat="server" Text="Upload File"></asp:button>
<asp:label id="lblMessage" runat="server"></asp:label>

My styled button:

<a onclick="$(\'btnSave\').click(); return false;" href="#">test</a>

gideon · Accepted Answer · 2012-03-05 04:19:39Z

1

Not sure what your aiming at but this should work

<a onclick="$('<%= btnSave.ClientID %>').click(); return false;"
                                                     href="#">test</a>

Why? Because by default, asp.net gives controls its own id, which is defined by ClientIdMode. See also System.Web.UI.Control.ClientID

In my humble opinion, this would be a neater solution:

<a id="btnRelay" href="#">test</a>

Hook it up with JQuery separately, so your code isn't mangled with your html.

$('btnRelay').click(function(event){
    event.preventDefault();
    $('<%= btnSave.ClientID %>').click()
}

edited Mar 5, 2012 at 4:19

answered Mar 5, 2012 at 4:14

gideon

19.5k11 gold badges74 silver badges114 bronze badges

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

Collectives™ on Stack Overflow

Relay click to Button to trigger ASP.NET File Upload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related