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 acplish this in inline script or I'd have to use a separate function?
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 acplish this in inline script or I'd have to use a separate function?
Share Improve this question asked Jun 19, 2018 at 2:11 Tanmay VijTanmay Vij 2521 gold badge4 silver badges15 bronze badges1 Answer
Reset to default 5You 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" />