Sometimes, we want to get the selected file’s size in JavaScript.

In this article, we’ll look at how to get the selected file’s size in JavaScript.

Get the Selected File’s Size in JavaScript

To get the selected file’s size in JavaScript, we can use the size property of the file object to get the file’s size in bytes.

For instance, we write:

<input type='file'>

to add a file input.

Then, we write:

const fileInput = document.querySelector("input");
fileInput.addEventListener('change', (e) => {
  const [file] = e.target.files
  console.log(file.size)
})

to select the file input with document.querySelector.

Then we call addEventListener with 'change' to listen for file selection.

In the event handler callback, we get the file from e.target.files with destructuring.

Then we get size of the file in bytes with the size property.

Now we should see the selected file’s size logged whenever we select a file.

Conclusion

To get the selected file’s size in JavaScript, we can use the size property of the file object to get the file’s size in bytes.