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

Issue

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(fullPath) {
  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

Answered By - stormworm29