CODEWITHSUNDEEP
c#jquerycss
sazr
sazr

Reputation: 25928

Relay click to Button to trigger ASP.NET File Upload

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>

Upvotes: 0

Views: 3713

Answers (1)

gideon
gideon

Reputation: 19465

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()
}

Upvotes: 1

Related Questions