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?

cfillion · Accepted Answer · 2018-06-19 02:34:08Z

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" />

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related