3

I did some research and found it could be hard to style a input type=file. However, I realized youtube has a beautiful button displayed when you want to upload your video to the site. (may need login: http://www.youtube.com/upload).
so basically it allows user to click the button, pick a file, and do the upload.
I am not sure how this is implemented instead of using the ugly <input> tag? Or anyone knows any alter good way to make a beautiful file upload interface?

Allan Jiang
  • 11,063
  • 27
  • 104
  • 165
  • see:: http://stackoverflow.com/questions/4909228/style-input-type-file – Sudhir Bastakoti Sep 02 '13 at 06:43
  • http://stackoverflow.com/questions/4909228/style-input-type-file – metalfight - user868766 Sep 02 '13 at 06:44
  • @Sudhir I have already read those threads, but those are for a input field, I am asking for a upload button only (with out a text field) please refer to the youtube link I posted. The threads you shared does not solve my problem – Allan Jiang Sep 02 '13 at 06:46
  • @dTDesign Google did not solve my problem. I know there is a workaround to set the real file input to be opacity = 0 and put a fake one on top of it to fake the style, but that is not my problem. I want a single button to upload a file. – Allan Jiang Sep 02 '13 at 06:49
  • 1
    Check This out buddy, it may help you http://stackoverflow.com/a/16491593/2261259 – shankri Sep 02 '13 at 06:49
  • @AllanJiang: But why? There is a working solution and you want another? – Michael Schmidt Sep 02 '13 at 06:56
  • @dTDesign Shankri has provided a great solution. A traditional solution is have the file input opacity =0 and overlay on top of a good style input, but that does not solve my question because I just want a button with out any text field. Shankri's solution is make the file input opacity = 0 and have another button click event call it. I prefer this solution better. – Allan Jiang Sep 02 '13 at 07:00

1 Answers1

4

LIVE DEMO

<button id="imageDrop" onclick="document.getElementById('uploadImage').click()" title="Click or Drag Image">Upload image</button>

<input id="uploadImage" type="file" />


#imageDrop{      
  background:#fff;
  width:300px;
  height:180px;
  font-size:20px;
  font-style:italic;
  border-radius:18px;
  border:2px dashed #444;
}

#uploadImage{
  visibility: hidden;
  height:0px;
  width: 0px;
}
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313