Storage

useUpload

File upload with progress tracking.

import { useBunBase, useUpload } from "@bunbase/react-sdk";

function AvatarUpload() {
  const { client } = useBunBase();
  const { upload, loading, progress, error, data, reset } = useUpload();

  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (file) await upload(file, { bucket: "avatars", isPublic: true });
  }

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleChange} />

      {loading && (
        <div>
          <progress value={progress} max={1} />
          <span>{Math.round(progress * 100)}%</span>
        </div>
      )}

      {data && (
        <img
          src={client.storage.downloadUrl(data.id, data.filename ?? undefined)}
          alt="Uploaded"
        />
      )}

      {error && (
        <p>
          {error.message}
          <button onClick={reset}>Try again</button>
        </p>
      )}
    </div>
  );
}

Multiple uploads

Each useUpload() call is independent — use one per upload slot:

function MultiUpload() {
  const cover = useUpload();
  const avatar = useUpload();

  return (
    <>
      <input type="file" onChange={(e) => {
        const f = e.target.files?.[0];
        if (f) cover.upload(f, { bucket: "covers" });
      }} />
      <input type="file" onChange={(e) => {
        const f = e.target.files?.[0];
        if (f) avatar.upload(f, { bucket: "avatars" });
      }} />
    </>
  );
}

---

Return value

Field	Type	Description
upload	(file, options?) => Promise<FileRecord>	Start the upload
loading	boolean	True while upload is in progress
progress	number	Upload progress from 0 to 1. Resets to 0 on each new upload
data	FileRecord | undefined	The uploaded file record on success
error	Error | null	Upload error
reset	() => void	Clear data, error, and progress

Upload options

Option	Description
bucket	Target bucket name. Defaults to the server’s default bucket
collection	Associate the uploaded file with a collection
recordId	Associate the uploaded file with a specific record
isPublic	Make the uploaded file directly accessible without auth