This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Note: This feature is available in Web Workers.
The size read-only property of the Blob interface returns the size of the Blob or File in bytes.
The number of bytes of data contained within the Blob (or Blob-based object, such as a File).
This example uses an <input> element of type file to ask the user for a group of files, then iterates over those files outputting their names and lengths in bytes.
<input type="file" id="input" multiple /> <output id="output">Choose files…</output>
const input = document.getElementById("input");
const output = document.getElementById("output");
input.addEventListener("change", (event) => {
output.innerText = "";
for (const file of event.target.files) {
output.innerText += `${file.name} has a size of ${file.size} bytes.\n`;
}
});
| Specification |
|---|
| File API> # dfn-size> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
size |
5 | 12 | 4 | 11 | 6 | 18 | 4 | 11 | 6 | 1.0 | 4.4 | 6 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Blob/size