Skip to content

Upload & download ​

Upload & download live demo

Framework

Core (framework-agnostic)

Pick a file and run api.upload() — real FormData + createFetch (mock response).

Live demo · Upload

api.upload + multipart fields

Real api.upload() builds FormData and posts through createFetch from tanstack-fetch/sse. Add onUploadProgress in your app for XHR progress.

No file selected

0%

Pick a file and upload — real api.upload() + mock fetch

await api.upload('/files', {
  file,
  fieldName: 'file',
  fields: { folder: 'avatars', public: true },
  onUploadProgress: ({ progress }) => setProgress(progress),
})

Upload ​

ts
import { createFetch } from 'tanstack-fetch/sse' // upload + progress need the full client

const api = createFetch({ baseUrl: import.meta.env.VITE_API_URL })

await api.upload('/files', {
  file,
  fields: { folder: 'avatars' },
  onUploadProgress: ({ progress }) => setProgress(progress ?? 0),
})

Download with progress ​

ts
const blob = await api.get('/files/report.pdf', {
  parseAs: 'blob',
  onDownloadProgress: ({ progress, loaded, total }) => {
    setProgress(progress ?? 0)
    console.log(`${loaded} / ${total}`)
  },
})

Guide: Upload & download · example: examples/file-upload

MIT Licensed · Created by Mohammad Garmabi · Not an official TanStack package