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
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()
})
$(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.
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);
});
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>
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>
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>
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>
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
Source: Stackoverflow.com