Get absolute file name of the file selected in HTML input instead of path

Question

I'm using a label tag for file input:

<label for="file" style="cursor: pointer">
    <img src="plus.png"><span id="file-text">Select a file</span>
</label>

Once the user selects a file, I want the text of the label to change to the file name of the selected file, but not the path.

<input type="file" id="file" style="display: none" onchange="document.getElementById('file-text').innerHTML = this.value"/>

Google Chrome is returning

C:\fakepath\filename.jpg

Microsoft Edge is returning the entire correct path of the file on the local file system.

I tried the split function:

 onchange="var path = this.value.split('\'); document.getElementById('file-text').innerHTML = 'path[path.length-1]'"

But now it is not returning anything. The text doesn't change anymore. Would it be possible to accomplish this in inline script or I'd have to use a separate function?

Answer 1

You can access the filename from the files attribute of the <input type="file"/> (it is a FileList containing all added files). files[0] will give you the first file as a File object. file.name will get you the filename.

var input = document.getElementById('file');
var label = document.getElementById('file-text');

input.addEventListener('change', function() {
  if(input.files.length > 0)
    label.textContent = input.files[0].name;
  else
    label.textContent = 'Select a file';
});

<label for="file" style="cursor: pointer">
  <img src="plus.png"><span id="file-text">Select a file</span>
</label>

<input type="file" id="file" style="display: none"/>

Inline version:

<label for="file" style="cursor: pointer">
  <img src="plus.png"><span id="file-text">Select a file</span>
</label>

<input type="file" id="file"
  onchange="document.getElementById('file-text').textContent = this.files.length > 0 ? this.files[0].name : 'Select a file'"
  style="display: none" />