How to hide text field in Html File Upload

Question

I am wondering how to hide the text field portion of a standard html file upload tag

for example

Answer 1

If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field

It will display the file input field as a bootstrap button and will show selected file names beautifully. Additionally, you can set various restrictions using simple data-attributes or settings in js.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.