I have a problem with the custom-file-input class in Bootstrap 4. after I chose which file I want to upload the filename do not show.
I use this code:
<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>
Any idea how I can fix it without getting too complicated?
This question is related to
jquery
html
css
file-upload
bootstrap-4
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>
I have used following for the same:
<script type="application/javascript">
$('input[type="file"]').change(function(e){
var fileName = e.target.files[0].name;
$('.custom-file-label').html(fileName);
});
</script>
The answer of Anuja Patil only works with a single file input on a page. This works if there are more than one. This snippet will also show all files if multiple
is enabled.
<script type="text/javascript">
$('.custom-file input').change(function (e) {
var files = [];
for (var i = 0; i < $(this)[0].files.length; i++) {
files.push($(this)[0].files[i].name);
}
$(this).next('.custom-file-label').html(files.join(', '));
});
</script>
Note that $(this).next('.custom-file-label').html($(this)[0].files.join(', '));
does not work. So that is why the for
loop is needed.
If you never work with mulitple files in the file upload, this simpler snippet can be used.
<script type="text/javascript">
$('.custom-file input').change(function (e) {
if (e.target.files.length) {
$(this).next('.custom-file-label').html(e.target.files[0].name);
}
});
</script>
$(document).on('change', '.custom-file-input', function (event) {
$(this).next('.custom-file-label').html(event.target.files[0].name);
})
Best of all worlds. Works on dynamically created inputs, and uses actual file name.
This works with Bootstrap 4.1.3:
<script>
$("input[type=file]").change(function () {
var fieldVal = $(this).val();
// Change the node's value by removing the fake path (Chrome)
fieldVal = fieldVal.replace("C:\\fakepath\\", "");
if (fieldVal != undefined || fieldVal != "") {
$(this).next(".custom-file-label").attr('data-content', fieldVal);
$(this).next(".custom-file-label").text(fieldVal);
}
});
</script>
If you want you can use the recommended Bootstrap plugin to dynamize your custom file input: https://www.npmjs.com/package/bs-custom-file-input
This plugin can be use with or without jQuery and works with React an Angular
When you have multiple files, an idea is to show only the first file and the number of the hidden file names.
$('.custom-file input').change(function() {
var $el = $(this),
files = $el[0].files,
label = files[0].name;
if (files.length > 1) {
label = label + " and " + String(files.length - 1) + " more files"
}
$el.next('.custom-file-label').html(label);
});
Johann-S solution works great. (And it looks like he created the awesome plugin)
The Bootstrap 4.3 documentation example page uses this plugin to modify the filename: https://github.com/Johann-S/bs-custom-file-input
Use the Bootstrap custom file input classes. Add the plugin to your project, and add this code in your script file on the page.
$(document).ready(function () {
bsCustomFileInput.init()
})
This code works for me:
<script type="application/javascript">
$('#elementID').change(function(event){
var fileName = event.target.files[0].name;
if (event.target.nextElementSibling!=null){
event.target.nextElementSibling.innerText=fileName;
}
});
</script>
Source: Stackoverflow.com