Skip to content
Rebase LogoRebase

Storage & File Uploads

Overview

Section titled “Overview”

Rebase provides built-in file upload support in collection forms:

  • Drag-and-drop file upload fields
  • Image previews in forms and table cells
  • Multiple file uploads via array properties
  • MIME type filtering and size limits
  • Custom filenames via callback functions

File Upload Fields

Section titled “File Upload Fields”

A file field is a string property with a storage block, or an array of them for several files. File upload fields covers declaring one: every storage option, and which of them the server enforces rather than only the panel’s uploader.

Multi-Backend Storage

Section titled “Multi-Backend Storage”

When your backend has multiple storage backends configured (e.g., local + S3 + GCS), you can route individual properties to specific backends using storageSource:

image: {
    type: "string",
    name: "Product Image",
    storage: {
        storageSource: "firebase",     // Routes to the "firebase" backend
        storagePath: "products/{entityId}",
        acceptedFiles: ["image/*"],
    }
}

Frontend Direct Sources

Section titled “Frontend Direct Sources”

For direct storage backends (e.g., Firebase Storage where the browser uploads straight to the cloud), register them via the storageSources prop on <Rebase>:

import type { RebaseStorageSource } from "@rebasepro/app";


<Rebase
    client={rebaseClient}
    storageSources={[
        { key: "firebase", engine: "firebase", transport: "direct", source: firebaseStorageSource }
    ]}
>
    {/* your app */}
    …
</Rebase>
Property Type Description
key string Unique identifier — must match storageSource in property configs
engine string Storage engine name (e.g., "firebase", "gcs", "s3")
transport "server" | "direct" "server" proxies through the backend; "direct" uploads from the browser
source StorageSource Client-side StorageSource implementation (required for "direct" transport)

The system automatically resolves the correct source per-property — collection properties with storageSource: "firebase" will use the matching direct source, while properties without storageSource (or with transport: "server") will proxy through the Rebase backend.

useStorageSource Hook

Section titled “useStorageSource Hook”

For programmatic file operations outside of collection forms:

import { useStorageSource } from "@rebasepro/app";


// Returns the default storage source
const storageSource = useStorageSource();


// Upload a file — the object is addressed by `key`
const result = await storageSource.putObject({
    file,
    key: "documents/my-file.pdf"
});


// Get a download URL
const { url } = await storageSource.getSignedUrl(result.key);

Next Steps

Section titled “Next Steps”