How to Handle File Inputs With JavaScript

Accept uploads from your users

Photo by Michel Paz on Unsplash

Many web apps require file inputs to handle files within the front end or upload them to the back end.

In this article, we’ll look at how to add a file input and then handle the inputted file with JavaScript.

Access Selected File(s)

We can access files from a file input as follows, given the following HTML:

<input type="file" id="input">

Then we can get the file that’s selected by writing:

const fileInput = document.getElementById('input');
fileInput.onchange = () => {
  const selectedFile = fileInput.files[0];
  console.log(selectedFile);
}

In the code above, we listened to the change event of the file input with an event handler. Then inside the event handler, we get the file by accessing the files property, which is an object, and with the key 0 for the first file.

Handle Multiple Files

We can create a file input that selects multiple files by writing the following code. In HTML, we write:

<input type="file" multiple id="input">

Then in the JavaScript code, we write the following:

const fileInput = document.getElementById('input');
fileInput.onchange = () => {
  const selectedFiles = [...fileInput.files];
  console.log(selectedFiles);
}

The difference between the first example and this is that we added the multiple attribute to the file input.

Then in the onchange handler, we convert the files object to an array with the spread operator, to manipulate the items more easily.

selectedFile should have an array of file objects.

Dynamically Add a Change Listener

We can also use addEventListener to attach the same listener to the file input as follows:

const fileInput = document.getElementById('input');
const handleFiles = () => {
  const selectedFiles = [...fileInput.files];
  console.log(selectedFiles);
}
fileInput.addEventListener("change"…