How to Get the Uploaded File Name in JavaScript?

To upload files in HTML, we use the <input> element with its type=”file”. This allows us to select and upload single or multiple files from the user’s computer which we can later upload to the server.

Before uploading the selected file(s) to the server, we generally need to get the name of the file.

To get the uploaded file name we can use the files property of the <input type="file"> element. The files property returns a list of objects where each object contains the selected file’s information. We can then use the name property to get the name of each file.

Let’s take an example and try to understand it.

Suppose we have the following file input in our HTML:

<div>
    <!-- File input to select files -->
    <input type="file" name="file" id="myFile">

    <!-- Show file name -->
    <p><b>Selected file name is: </b><span id="fileName"></span></p>

</div>

Now, we want to select files from the user’s computer using the above file input and get the selected file name.

For that purpose, we have registered a change event listener using the addEventListener() method which will fire every time user selects a file.

Inside the addEventListener() method, we can use the name property on the files array to get the selected file’s name:

// Get file input element
let fileInput = document.getElementById('myFile');
let span = document.getElementById('fileName');

// Fires on file upload
fileInput.addEventListener('change', function(event){
    
    // Get file name
    let fileName = fileInput.files[0].name;
    
    // Update file name in span
    span.innerText = fileName;

});

Below is the outcome of the above program:

Get Multiple Files Name

If you add the multiple="true" attribute to the <input type="file"> element, it allows you to select multiple files from your computer.

So, if you want to get the name of all the selected files, you can run a for/while loop over the files array and then use the name property of each file to get the name of each file.

HTML:

<div>
    <!-- File input to select files -->
    <input type="file" multiple="true" name="file" id="myFile" >
</div>

Add the below JS code to get the selected files name list:

// Get file input element
let fileInput = document.getElementById('myFile');

let filesNameArr = [];

// Fires on file upload
fileInput.addEventListener('change', function(event){
    
    // Clear the file name array
    filesNameArr = [];

    for(let i = 0; i < fileInput.files.length; i++){

        // Get the current file name
        let fileName = fileInput.files[i].name;

        // Push file
        filesNameArr.push(fileName);

    }

    // Print file name array
    console.log(filesNameArr);
    
});

Below is the outcome of the above program:

The above code prints the selected files name as an array.

[
'a_sample_file_1.txt', 
'a_sample_file_2.txt', 
'a_sample_file_3.txt
]

Conclusion

In this article, we learned how we can get the selected/uploaded file name using JavaScript.

In summary, to get the selected/uploaded file’s name, we can use the files property of the file input object. The files property returns an array containing each selected file object.

You can then use the name property of each file object to get its name.

Thanks for reading.