How can I change the label name when file is selected?

January 3, 2022

HTML is given below-

<input type="file" class="custom-file-input" accept="image/*" onchange="loadFile(event)" id="customFile">
 <label class="custom-file-label" id="change" for="customFile">Choose File</label><br><br>
 <img width="150px" id="output" src="#"/>

Script is given below-

var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
    URL.revokeObjectURL(output.src) // free memory
}
};

My code is able to show the image selected but I also Want to Change The Label text to selected image name

>Solution :

The logic to change the label text can be written on the change event. Check the following event snippet,

document.getElementById('customFile').onchange = function() {
  // code to change the label text
  var fullName = getFileName(document.getElementById('customFile').value);
  document.getElementById("change").innerHTML= fullName;
};
var getFileName = function() {
  if (!fullPath) return null;
  var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
  var filename = fullPath.substring(startIndex);
  if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
    return filename.substring(1);
  }
  return null;
}

For more input on getting the file name check https://stackoverflow.com/a/857662/17542117