Get the size of a file in JavaScript

OpenJavaScript 0

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)

  // 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:

  .then(res => res.blob()) 
  // Converts to blob
  .then(data => {
    // 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)