0

I had to create an image uploading function for some web application in asp.net. I used the built in input asp.net button, with the browse and the filename label. The code for this is simple, it looks something like

<input id="PictureInput" title=PictureInput" type = "file" runate="server" />

The bossman doesn't like the look though, and wants it to just be a small icon that opens up the browse menu. I can't change the built in button (at least I think, tell me if I'm wrong), but I thought maybe I could set it to invisible and have a separate icon button somehow activate the browse button on the input I have now.

This is probably dirt simple, but I've never used asp.net before, so I'm kind of stumbling in the dark here.

NathanTempelman
  • 1,301
  • 9
  • 34
  • Checkout [this thread](http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image) - pure css solution – Andrei May 20 '14 at 14:12
  • You could use a Asp:Linkbutton - http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.linkbutton%28v=vs.110%29.aspx – Steve P May 20 '14 at 14:20
  • @Andrei That answer helped me find what I was looking for. The second answer did what I wanted to do, but didn't completely work in asp.net. I managed to figure it out though, so thanks for pointing me in the right direction. – NathanTempelman May 20 '14 at 16:18

1 Answers1

0

Alright, so I figured out how to style the default upload file button in asp.net. It took a bit of tinkering. 

<asp:Label ID="LabelId" AssociatedControlID = "UploadFileControl" runat="server">
    <img src = ""your/image/path"/>
</asp:Label>
<span style="display:none;">
    <input id="UploadFileControl" type="file" runat="server"/>
</span>

Basically it uses inline CSS to hide the [browse|Filename] looking control, and then has a label activate it instead. It's like using the <label for="thingID"> html tag, but in asp.net, when you have runat="server" in your file upload (which you need if you want to access the uploaded file server side) it seems to do something to its ID at runtime, so your regular old static <label for> can't find it.

Hopefully this helps someone else, because I spent waay too long on this, aha.

NathanTempelman
  • 1,301
  • 9
  • 34