Get the size of a file in JavaScript

Last updated: December 27, 2022.

To get the size of a file (or any data) in JavaScript, you first need to make sure that it is in Blob or blob-like format.

Then, just access the size property to get its size in bytes.

For a locally selected file, this is automatically in File format, which is a type of blob. So you can access its size directly:

const inputEl = document.querySelector('[type=file]');
// Selects input element of type file

inputEl.addEventListener('change', () => {
// Function fires when new input selected

  const file = inputEl.files[0];
  // Selects file (stored in array-like file-list)

  console.log(file.size);
  // Gets size: e.g. 413746 (in bytes)

});

For an external resource of any type, you can fetch it and then read its contents using the blob() method. This will read the contents of the resource to a Blob:

fetch('https://picsum.photos/400/400')
  .then(res => res.blob()) 
  // Converts to blob
  .then(data => {
    console.log(data.size);
    // Gets blob size: e.g. 10839 (bytes)
  })

Finally, you can manually create an object from some data you have in JavaScript.

When creating a new blob, the data in the first argument position must be stored in an array and a MIME type must be provided in an options object as second argument:

const blob = new Blob(["String data"], { type: 'text/plain' })

console.log(blob.size); // E.g. 11 (bytes)

---