Within an ASP.NET C# website, I have incorporated an input that allows the user to upload a file to the server. To address the limitation of not being able to style an input of type=file, I devised a visually styled div that mirrors the appearance of the input field but essentially just relays the action to the actual input element, which is set to display: none in order to remain hidden.
Issue Encountered: The process of relaying the message seems to be malfunctioning; specifically, when attempting to relay the click action to the authentic input, the file fails to upload (no response occurs). It has been verified that the button itself functions properly, as clicking on the real input successfully triggers the file upload procedure.
Could there potentially be some sort of ASP.NET security measure impeding this functionality? What might be causing this setback? Is there a viable solution for achieving my intended goal:
To implement a stylized input resembling type=file (rather than a standard browse button) and successfully forwarding the click event to the genuine input?
The functional input that operates correctly:
<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>
The styled button implementation:
<a onclick="$(\'btnSave\').click(); return false;" href="#">test</a>