Quickback Docs

Avatars

Profile picture and organization logo uploads in Account UI

When file uploads are enabled, Account UI provides avatar and organization logo upload. Both POST to /storage/v1/object and only work with valid R2 credentials.

Enabling

Off by default. Start apps leave it off — a workers.dev deploy can create the R2 bucket, but it cannot mint the API-token secrets presigning and the storage routes need.

account: {
  fileUploads: true,
  // ...
}

providers: {
  fileStorage: defineFileStorage("cloudflare-r2", { managed: true }),
}

The compiler emits VITE_ENABLE_FILE_UPLOADS=true only when both are set. account.fileUploads: true without managed R2 does not turn the UI on — the dialogs would 404.

Set the Worker secrets R2_ACCOUNT_ID, R2_ACCESS_KEY_ID, and R2_SECRET_ACCESS_KEY. See R2 Setup.

Upload Flow

  1. User clicks their profile picture (or Upload Logo on org settings)
  2. Image picker opens (supports JPG, PNG, WebP)
  3. Image is cropped to square
  4. Uploaded to R2 via /storage/v1/object
  5. Profile / organization updated with the new URL

Requirements

  • account.fileUploads: true
  • Managed R2 — defineFileStorage("cloudflare-r2", { managed: true })
  • Valid R2 credentials on the Worker (R2_ACCOUNT_ID, R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY)
  • Upload endpoints available (/storage/v1/*)

On this page