How can I hide the "TextBox" of the FileUpload control?

Question

In my ASP.NET page I am using the "FileUpload" control. The whole thing is implemented and is working as expected but... I don't want the TextBox control which is a part of "FileUpload". (FileUpload = TextBox + Button)

Is it possible that I can remove/hide only the TextBox and let the Button look like a LinkButton?

Thanks

Solution 1

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

This will surely work. i have tried it in my project.It dosent require javascript or CSS.

Solution 2

Actually, you can use this trick:

FileUpload fileUpload = new FileUpload();
fileUpload.Width = Unit.Pixel(83);

The button is 83 pixels and the textbox is the rest. If you force the control to a width of 83 pixels then the button is shown and the textbox is not.

Solution 3

For Asp.Net with HTML5 you can use document.getElementById('<%=ServerControlID.ClientID%>') to solve this issue.

My working code

HTML5

 <asp:FileUpload ID="FileUpload1" runat="server" Style="display: none;" />
 <input type="button" value="Browse" onclick="showBrowseDialog()"/>

Javascript

function showBrowseDialog() {
    var fileuploadctrl = document.getElementById('<%=FileUpload1.ClientID%>');
    fileuploadctrl.click();
}

Works in Firefox, IE & Chrome.

Solution 4

Not really. The fileUpload control is not style-able since it is sandboxed from the page for security. With HTML5 you can do your own file uploading or you can alternatively use flash, but otherwise you're stuck with what the browser gives you.

View more solutions

Comments

[Steven Mark]

Have you tried using control adapters? Here is a simple sample code that will do the job for you, without the CSS cleverness :) http://blog.mathiaskunto.com/2012/01/28/keeping-your-hair-fr‌​om-turning-gray-or-h‌​ow-to-style-the-aspf‌​ileupload-control-us‌​ing-control-adapters‌​/

[Mani5556]

While this does work, it is somewhat hacky and is prone to css and\or cross-browser issues.

[Martin Meeser]

there is no asp.NET here... nice beside of that

[Jeremy]

Please forgive my JS ignorance. I copied and pasted those lines in to my code and replaced my FileUpload control. But when I get to my codebehind and FileUpload1 has no PostedFile.