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