Storage

Nuxfire uses Cloudflare R2 for blob storage — profile pictures and team logos today.

It uses the @nuxt-hub/core module's utilities for this specifically, even though the database is Postgres via Hyperdrive rather than a NuxtHub-managed store (see Database): NuxtHub's self-hosted mode expects a binding literally named BLOB (fixed by NuxtHub itself), so the R2 bucket is named to match rather than being deployed through NuxtHub's own platform.

Configuration

R2 is configured in two places:

export default defineNuxtConfig({
  hub: {
    blob: true, // enables R2 storage using NuxtHub's utilities
    kv: true,
    cache: true,
  },
});

Infra as code:

// NuxtHub's self-hosted mode expects this binding named exactly BLOB —
// that's fixed by NuxtHub itself, not something `link` can rename.
link.push(
  database,
  new sst.cloudflare.Bucket("BLOB"),
  new sst.cloudflare.Kv("KV"),
  new sst.cloudflare.Kv("CACHE"),
  emails,
);

Usage

// Get the blob client
const blob = hubBlob();

// Upload a file
await blob.put("path/to/file.jpg", fileContent);

// Download a file
const file = await blob.get("path/to/file.jpg");

// Delete a file
await blob.del("path/to/file.jpg");

Real-world example: profile pictures

// Delete the old profile picture before storing the new one
const previousKey = user.image.slice(baseUrl.length);
if (previousKey.startsWith("profile/")) {
  try {
    await hubBlob().del(previousKey);
  } catch {
    // didn't exist
  }
}