Fetch

Use fetch when a spinner is enough. Pass signal through so cancel still works. Do not expect onProgress to fire — the Fetch API does not expose upload progress.

import type { UploadAdapter } from 'react-upload-kit';

interface UploadResponse {
  url: string;
}

export const fetchAdapter: UploadAdapter<UploadResponse> = async (file, { signal }) => {
  const body = new FormData();
  body.append('file', file);

  const res = await fetch('/api/upload', {
    method: 'POST',
    body,
    signal,
  });

  if (!res.ok) {
    throw new Error(`Upload failed: ${res.status}`);
  }

  return res.json() as Promise<UploadResponse>;
};

tsx

const uploader = useUploader<UploadResponse>({
  adapter: fetchAdapter,
  autoUpload: true,
});

// Indeterminate UI
{uploader.isUploading && <span>Uploading…</span>}

If you later need a bar, switch the adapter to XHR. The rest of the UI (files, status, retry, cancel) stays the same — that is the point of the adapter seam.

For authenticated APIs, add headers in the adapter (Authorization, CSRF). Keep secrets on the server; the adapter only sends what the browser already has (cookies, a short-lived token).

Fetch ​

Fetch