Response: bytes() method

Note: This feature is available in Web Workers.

The bytes() method of the Response interface takes a Response stream and reads it to completion. It returns a promise that resolves with a Uint8Array.

Syntax

bytes()

Return value

A promise that resolves with an Uint8Array.

Exceptions

DOMException AbortError

The request was aborted.

TypeError

Thrown for one of the following reasons:

The response body is disturbed or locked.
There was an error decoding the body content (for example, because the Content-Encoding header is incorrect).

RangeError

There was a problem creating the associated ArrayBuffer. For example, if the data size is more than Number.MAX_SAFE_INTEGER.

Examples

Fetching and decoding a file

The code below shows how you might fetch a text file, return the body as a Uint8Array, and then decode this into a string.

const response = await fetch("https://www.example.com/textfile.txt");
const textFile = await response.bytes();
const string = new TextDecoder().decode(textFile);
console.log(string);

Getting an image file signature

This example demonstrates how you can use bytes() to read the signature bytes of a number of image files, and identify the type.

HTML

First we define a <select> element for choosing the file type, with corresponding values that indicate the specific file on WikiMedia commons to fetch.

html

<label for="file-select">Choose a file:</label>

<select name="Files" id="file-select">
  <option value="">--Select an image type--</option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png">
    PNG
  </option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg">
    JPG
  </option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example.gif">
    GIF89a
  </option>
</select>

<pre id="log"></pre>

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

The code first checks if the bytes() method is supported. If the method is supported it adds an event handler for the change event event on the <select> element. When the value changes, it passes the value of the selection (a URL for an image file) to the checkSignature() method defined below. If the method is not supported it logs this information.

if ("bytes" in Response.prototype) {
  const selectFileElement = document.getElementById("file-select");
  selectFileElement.addEventListener("change", (event) => {
    try {
      checkSignature(event.target.value);
    } catch (e) {
      log(e);
    }
  });
} else {
  log("Response.bytes() not supported");
}

The checkSignature() method is defined below. This fetches a file at the given url, and uses response.bytes() to get its contents as a byte array. The initial bytes are then compared to the initial signature bytes of a number of common file types. The file name and the file type are then logged.

async function checkSignature(url) {
  if (url == "") return;
  log(`File: ${url}`);
  const response = await fetch(url);
  const image = await response.bytes();

  // File signatures from: https://en.wikipedia.org/wiki/List_of_file_signatures
  const jpgSignature = [0xff, 0xd8, 0xff, 0xe0];
  const pngSignature = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
  const gif89aSignature = [0x47, 0x49, 0x46, 0x38, 0x39, 0x61];

  if (
    image
      .slice(0, jpgSignature.length)
      .every((byte, index) => byte === jpgSignature[index])
  ) {
    log(`JPG signature: FF D8 FF E0`);
  } else if (
    image
      .slice(0, pngSignature.length)
      .every((byte, index) => byte === pngSignature[index])
  ) {
    log(`PNG signature: 89 50 4E 47 0D 0A 1A 0A`);
  } else if (
    image
      .slice(0, gif89aSignature.length)
      .every((byte, index) => byte === gif89aSignature[index])
  ) {
    log(`GIF (GIF89a) signature: 47 49 46 38 39 61`);
  } else {
    log("Unknown format");
  }
}

Result

Choose an image type using the selection list. The log should then display the file name, along with the file type that was determined from the file's signature.

Specifications

Specification
Fetch Standard # dom-body-bytes

Browser compatibility

BCD tables only load in the browser