Avatar gallery

Create a public bucket, upload from the browser, list URLs.

Pick your framework — selection is remembered across examples.

1. Create bucket

Bucket create/delete needs the service role key — typically a one-time server or dashboard action.

scripts/create-bucket.ts

import { createClient } from 'voltbase-js';

const admin = createClient(
  process.env.VOLTBASE_URL!,
  process.env.VOLTBASE_SERVICE_ROLE_KEY!,
);

await admin.storage.createBucket('avatars', { public: true });

Or create the bucket in the dashboard Storage UI, then use the anon key in the client for uploads.

2. Upload & list

app/avatar/page.tsx

'use client';

import { createClient } from 'voltbase-js';

const voltbase = createClient(
  process.env.NEXT_PUBLIC_VOLTBASE_URL!,
  process.env.NEXT_PUBLIC_VOLTBASE_ANON_KEY!,
);

export default function AvatarPage() {
  async function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    const bucket = voltbase.storage.from('avatars');
    const { data: uploaded, error } = await bucket.upload(file);
    if (error) return console.error(error);
    const { data: files } = await bucket.list();
    const { data: signed } = await bucket.getSignedUrl(uploaded!.id);
    console.log({ uploaded, files, signed });
  }

  return <input type="file" onChange={(e) => void onChange(e)} />;
}