The answer is
Just an additional hint for avoiding too much JavaScript here: if you add a label and style it like the "browse button" you want to have, you could place it over the real browse button provided by the browser or hide the button somehow differently. By clicking the label the browser behavior is to open the dialog to browse for the file (don't forget to add the "for" attribute on the label with value of the id of the file input field to make this happen). That way you can customize the button in almost any way you want.
In some cases, it might be necessary to add a second input field or text element to display the value of the file input and hide the input completely as described in other answers. Still the label would avoid to simulate the click on the text input button by JavaScript.
BTW a similar hack can be used for customizing checkboxes or radiobuttons. by adding a label for them, clicking the label causes to select the checkbox/radiobutton. The native checkbox/radiobutton then can be hidden somewere and be replaced by a custom element.
the best way for it
<input type="file" id="file">
<label for="file" class="file-trigger">Click Me</label>
And you can style your "label" element
#file {
display: none;
}
.file-trigger {
/* your style */
}
Came across this question and didn't feel like any of the answers were clean. Here is my solution:
<label>
<span>Select file</span>
<input type="file" style="display: none">
</label>
When you click the label the select file dialog will open. No js needed to make it happen.
You can style the label to look like a button.
Here is an example using w3css and font awesome:
<label class="w3-button w3-blue w3-round">
<span><i class="fas fa-image"></i></span>
<input type="file" style="display: none" >
</label>
Of course you need to add an event listener to the input to detect a file was chosen.
HTML - InputFile component can be hide by writing some css. Here I am adding an icon which overrides inputfile component.
<label class="custom-file-upload">
<InputFile OnChange="HandleFileSelected" />
<i class="fa fa-cloud-upload"></i> Upload
</label>
css-
<style>
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
</style>
So I found this solution that is very easy to implement and gives a very clean GUI
put this in your HTML
<label class="att-each"><input type="file"></label>
and this in your CSS
label.att-each {
width: 68px;
height: 68px;
background: url("add-file.png") no-repeat;
text-indent: -9999px;
}
add-file.png can be any graphic you wish to show on the webpage. Clicking the graphic will launch the default file explorer.
Working Example: http://www.projectnaija.com/file-picker17.html
You may just without making the element hidden, simply make it transparent by making its opacity to 0.
Making the input file hidden will make it STOP working. So DON'T DO THAT..
Here you can find an example for a transparent Browse operation;
Oddly enough, this works for me (when I place inside a button tag).
.button {
position: relative;
input[type=file] {
color: transparent;
background-color: transparent;
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
z-index: 100;
}
}
Only tested in Chrome (macOS Sierra).
Below code is very useful to hide default browse button and use custom instead:
(function($) {_x000D_
$('input[type="file"]').bind('change', function() {_x000D_
$("#img_text").html($('input[type="file"]').val());_x000D_
});_x000D_
})(jQuery).file-input-wrapper {_x000D_
height: 30px;_x000D_
margin: 2px;_x000D_
overflow: hidden;_x000D_
position: relative;_x000D_
width: 118px;_x000D_
background-color: #fff;_x000D_
cursor: pointer;_x000D_
}_x000D_
_x000D_
.file-input-wrapper>input[type="file"] {_x000D_
font-size: 40px;_x000D_
position: absolute;_x000D_
top: 0;_x000D_
right: 0;_x000D_
opacity: 0;_x000D_
cursor: pointer;_x000D_
}_x000D_
_x000D_
.file-input-wrapper>.btn-file-input {_x000D_
background-color: #494949;_x000D_
border-radius: 4px;_x000D_
color: #fff;_x000D_
display: inline-block;_x000D_
height: 34px;_x000D_
margin: 0 0 0 -1px;_x000D_
padding-left: 0;_x000D_
width: 121px;_x000D_
cursor: pointer;_x000D_
}_x000D_
_x000D_
.file-input-wrapper:hover>.btn-file-input {_x000D_
//background-color: #494949;_x000D_
}_x000D_
_x000D_
#img_text {_x000D_
float: right;_x000D_
margin-right: -80px;_x000D_
margin-top: -14px;_x000D_
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
_x000D_
<body>_x000D_
<div class="file-input-wrapper">_x000D_
<button class="btn-file-input">SELECT FILES</button>_x000D_
<input type="file" name="image" id="image" value="" />_x000D_
</div>_x000D_
<span id="img_text"></span>_x000D_
</body>Just add negative text intent as so:
input[type=file] {
text-indent: -120px;
}
before:
after:
.dropZoneOverlay, .FileUpload {_x000D_
width: 283px;_x000D_
height: 71px;_x000D_
}_x000D_
_x000D_
.dropZoneOverlay {_x000D_
border: dotted 1px;_x000D_
font-family: cursive;_x000D_
color: #7066fb;_x000D_
position: absolute;_x000D_
top: 0px;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
.FileUpload {_x000D_
opacity: 0;_x000D_
position: relative;_x000D_
z-index: 1;_x000D_
} <div class="dropZoneContainer">_x000D_
<input type="file" id="drop_zone" class="FileUpload" accept=".jpg,.png,.gif" onchange="handleFileSelect(this) " />_x000D_
<div class="dropZoneOverlay">Drag and drop your image <br />or<br />Click to add</div>_x000D_
</div>I find a good way of achieving this at Remove browse button from input=file.
The rationale behind this solution is that it creates a transparent input=file control and creates an layer visible to the user below the file control. The z-index of the input=file will be higher than the layer.
With this, it appears that the layer is the file control itself. But actually when you clicks on it, the input=file is the one clicked and the dialog for choosing file will appear.
Source: Stackoverflow.com