Bootstrap 4 File Input
Updated 2021
Bootstrap 5
Custom file input no longer exists so to change Choose file...
you'd need to use JS or some CSS like this.
Bootstrap 4.4
Displaying the selected filename can also be done with plain JavaScript. Here's an example that assumes the standard custom-file-input with label that is the next sibling element to the input...
document.querySelector('.custom-file-input').addEventListener('change',function(e){
var fileName = document.getElementById("myInput").files[0].name;
var nextSibling = e.target.nextElementSibling
nextSibling.innerText = fileName
})
https://codeply.com/p/LtpNZllird
Bootstrap 4.1+
Now in Bootstrap 4.1 the "Choose file..." placeholder text is set in the custom-file-label
:
<div class="custom-file" id="customFile" lang="es">
<input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
<label class="custom-file-label" for="exampleInputFile">
Select file...
</label>
</div>
Changing the "Browse" button text requires a little extra CSS or SASS. Also notice how language translation works using the lang=""
attribute.
.custom-file-input ~ .custom-file-label::after {
content: "Button Text";
}
https://codeply.com/go/gnVCj66Efp (CSS)
https://codeply.com/go/2Mo9OrokBQ (SASS)
Another Bootstrap 4.1 Option
Alternatively you can use this custom file input plugin
https://www.codeply.com/go/uGJOpHUd8L/file-input
Bootstrap 4 Alpha 6 (Original Answer)
I think there are 2 separate issues here..
<label class="custom-file" id="customFile">
<input type="file" class="custom-file-input">
<span class="custom-file-control form-control-file"></span>
</label>
1 - How the change the initial placeholder and button text
In Bootstrap 4, the initial placeholder value is set on the custom-file-control
with a CSS pseudo ::after
element based on the HTML language. The initial file button (which isn't really a button but looks like one) is set with a CSS pseudo ::before
element. These values can be overridden with CSS..
#customFile .custom-file-control:lang(en)::after {
content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
content: "Click me";
}
2 - How to get the selected filename value, and update the input to show the value.
Once a file is selected, the value can be obtained using JavaScript/jQuery.
$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
})
However, since the placeholder text for the input is a pseudo element, there's no easy way to manipulate this with Js/jQuery. You can however, have a another CSS class that hides the pseudo content once the file is selected...
.custom-file-control.selected:lang(en)::after {
content: "" !important;
}
Use jQuery to toggle the .selected
class on the .custom-file-control
once the file is selected. This will hide the initial placeholder value. Then put the filename value in the .form-control-file
span...
$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
$(this).next('.form-control-file').addClass("selected").html(fileName);
})
You can then handle the file upload or re-selection as needed.
Demo on Codeply (alpha 6)
Input type file and button of different size in Bootstrap 4 html
You need to use .input-group.input-group-lg
as shown in the docs:
https://getbootstrap.com/docs/4.6/components/input-group/#sizing
EDIT:
That will not work with a .custom-file-input
within the .input-group
.
You will need to override the BS styles on .custom-file-label
as shown below:
.input-group-lg .custom-file-label {
font-size: 1.4rem;
margin: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<form>
<div class="input-group input-group-lg">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileInput" accept=".csv" aria-describedby="customFileInput">
<label class="custom-file-label" for="customFileInput">Select File</label>
</div>
<div class="input-group-append">
<button class="btn btn-success" type="button" id="uploadBtn" onclick="OnClickUpload()">Upload</button>
</div>
</div>
</form>
Translating custom-file input Bootstrap 4
It's because Bootstrap SASS isn't imported into the Codepen. You first need to @import "bootstrap/functions"
(since that's where $custom-file-text() lives), make the changes, and finally @import "bootstrap"
....
@import "bootstrap/functions";
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
@import "bootstrap";
I don't know of way to import the Bootstrap SASS into Codepen, but here's a working example on Codeply: https://www.codeply.com/go/2Mo9OrokBQ
Related question:
Bootstrap 4 File Input
Bootstrap 4 / jQuery - Clear filename in input field <input type='file' /> bs-custom-file-input
There is no value to clear, the plugin generate a label for the custom-file what you see is not the input but the label, if you use your browser inspection you can see it, replace this :
// Clear the value
$('#customFile').val('');
by this :
// Clear the value, replace it by whatever text you want
$('#customFile').next('label').html('Select a file');
How to change the Browse button in Bootstrap custom file input?
override on css:
.custom-file-input:lang(en)~.custom-file-label::after {
content: "Browse";
}
change content
bootstrap 4 file input doesn't show the file name
You need to use javascript to show the name of the choosed file, as written in the documentation: https://getbootstrap.com/docs/4.5/components/forms/#file-browser
Here you can find the solution: Bootstrap 4 File Input
That's the code for your example:
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02"/>
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-primary">Upload</button>
</div>
</div>
<script>
$('#inputGroupFile02').on('change',function(){
//get the file name
var fileName = $(this).val();
//replace the "Choose a file" label
$(this).next('.custom-file-label').html(fileName);
})
</script>
</body>
</html>
Bootstrap 4 right to left custom file input
You would need a little custom CSS like this...
.custom-file-label::after {
left: 0;
right: auto;
border-left-width: 0;
border-right: inherit;
}
Demo: https://www.codeply.com/go/kOURGBHqEX
Bootstrap 4 File Input Label Oveflows Column
You need to separate your col-sm-9 and custom-file divs.
<div class="col-sm-9">
<div class="custom-file">
<input type="file" class="custom-file-input form-control" id="image-upload" required>
<label class="custom-file-label" for="image-upload">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
</div>
https://jsfiddle.net/qdfy91r5/1/
In addition, if you use the m-0 solution, it destroys your margins around every row. That answer only shows it in a one-row scenario, but you have multiple rows, which will squish them all together, as seen in the following fiddle that compares my answer to his:
https://jsfiddle.net/qdfy91r5/2/
custom-file-input label not shown in bootstrap 4
I just write a basic bootstrap 4 custom file label code, I hope it'll help you out. Thanks
<!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<label class="w-100">label 1 <div class="custom-file"> <input type="file" class="custom-file-input"> <label class="custom-file-label">label 2</label> </div></label>
Related Topics
Es6 Modules in the Browser: Uncaught Syntaxerror: Unexpected Token Import
Alternative For Deprecated Svg Pathseglist
Why Is It Bad Practice to Use Links With the JavaScript: "Protocol"
Replace HTML Page With Contents Retrieved Via Ajax
Jquery: Get Selected Element Tag Name
Pass Mouse Events Through Absolutely-Positioned Element
How to Load an Entire HTML Document into a Document Fragment in Internet Explorer
Script Tag Create With Innerhtml of a Div Doesn't Work
Show Hide Divs on Click in HTML and CSS Without Jquery
Passing Form Data to Another HTML Page
Input Value Is a String Instead of a Number
How to Fix Blurry Text in My Html5 Canvas
Uncaught Error: Security_Err: Dom Exception 18 When I Try to Set a Cookie
Difference Between the Different Methods of Putting JavaScript Code in an ≪A≫