ContextQMD
Back to Content

Blob: size property

files/en-us/web/api/blob/size/index.md

latest1.2 KB
Original Source

{{APIRef("File API")}}{{AvailableInWorkers}}

The size read-only property of the {{domxref("Blob")}} interface returns the size of the {{domxref("Blob")}} or {{domxref("File")}} in bytes.

Value

The number of bytes of data contained within the Blob (or Blob-based object, such as a {{domxref("File")}}).

Examples

This example uses an {{HTMLElement("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.

HTML

html
<input type="file" id="input" multiple />
<output id="output">Choose files…</output>
css
output {
  display: block;
  margin-top: 16px;
}

JavaScript

js
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`;
  }
});

Result

{{EmbedLiveSample("Examples")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also