I am currently utilizing Bootstrap4 to craft my webpage and I am incorporating a custom file input bar.
To retrieve the three labels of the input bar ("Choose file", "Browse", "Upload") from my stylesheet, I have created three custom classes with their corresponding content in the CSS file. See below:
.CHOOSE_FILE_LABEL::before{content: 'Choose file';}
.BROWSE_BTN_LABEL::after{content: 'Browse';}
.UPLOAD_BTN_LABEL::after{content: 'Upload';}
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileInput">
<label class="custom-file-label CHOOSE_FILE_LABEL BROWSE_BTN_LABEL" for="customFileInput"></label>
</div>
<div class="input-group-append">
<button class="btn btn-success UPLOAD_BTN_LABEL" type="button" id="uploadBtn"></button>
</div>
</div>
Subsequently, I aim to substitute the label of the input bar ("Choose file") with the filename once a file is selected. In order to achieve this, I use the following JavaScript code:
// Replace "Choose file" with the file name
document.getElementById("customFileInput").addEventListener('change', function (e)
{
e.preventDefault();
var file_input = document.getElementById("customFileInput");
var file_name = file_input.files[0].name;
var next_sibling = e.target.nextElementSibling;
next_sibling.innerText = file_name;
});
The issue lies in the fact that the selected file's name gets concatenated with (rather than replaced by) "Choose file". Is it possible to accomplish this through JavaScript or should I make modifications to my CSS file?
For the complete code, please refer to the following link: https://jsfiddle.net/5csLd90b/2/