fetch-api-progress

Upload and download progress for Fetch API.

Getting started

Upload progress

import { trackRequestProgress } from "fetch-api-progress";

const blob = new Blob([new Uint8Array(5 * 1024 * 1024)]);

const request = {
  headers: {
    "Content-Type": "application/octet-stream"
  },
  method: "PUT",
  body: blob
};

const trackedRequest = trackRequestProgress(request, (progress) => {
  console.log(
    `Uploaded ${progress.loaded} bytes out of ${progress.total ?? "unknown"}`
  );
});

const response = await fetch("https://httpbin.org/put", trackedRequest);

Download progress

import { trackResponseProgress } from "fetch-api-progress";

const response = await fetch("https://httpbin.org/put", {
  headers: {
    "Content-Type": "application/octet-stream"
  },
  method: "PUT",
  body: blob
});

const trackedResponse = trackResponseProgress(response, (progress) => {
  console.log(
    `Downloaded ${progress.loaded} bytes out of ${progress.total ?? "unknown"}`
  );
});

// Read the response. E.G. with a function from https://github.com/teil-one/fetch-api-progress/blob/main/tests/node/response/tracked.test.mjs
await readResponse(trackedResponse);

Supported platforms

Tracking progress of	Chrome	Edge	Safari	Firefox	Node.js
Request	✅	✅	✅	❌	✅
Response	✅	✅	✅	✅	✅

Integrations

Can be used with api-registry – an HTTP API client.

GitHub · NPM package