I have tried to solve this problem without success. I want to get the "value" of an input element of "type = file". I don't know what I am doing wrong that's preventing me from getting the "input value".
function addFile() {
let toUpload = document.getElementById("fileid").click();
console.log(toUpload.value);
//Do something with file name;
}<button class=" btn border border-1
rounded-pill " id="add-btn" onclick="addFile()">
<i class="bx bx-plus-medical">
</i>
Choose file
</button>
<input id='fileid' type='file' hidden/>The file upload dialogue comes up. But I cannot access the file name. Who can figure out an issue with the above code please?
You have three different problems here.
click() doesn't return the element, and the element has the value. Store the element in a variable and use that for reading and for clicking.files property to get details of the files selected.function addFile() {
let toUpload = document.getElementById("fileid");
toUpload.addEventListener('change', event => {
//Do something with file name;
console.log(toUpload.value);
console.log(toUpload.files[0].name);
}, { once: true });
toUpload.click();
}<button class=" btn border border-1
rounded-pill " id="add-btn" onclick="addFile()">
<i class="bx bx-plus-medical">
</i>
Choose file
</button>
<input id='fileid' type='file' hidden/>input type file doesn't have a value, it will have a property called files
files is an array of files (in case the input allows multiple), each file will have a property called name to get the display name