LogoLogoLogoLogo
ComponentsBlocksTemplatesStarterDocs
Docs
  • Introduction
  • Installation
  • Changelog
    • Starter

    Storage

    PreviousNext

    A minimal guide on how to use the built-in S3 storage system.

    The storage feature works with any S3 compatible bucket right away. Set environment variables and start uploading, replacing, listing files, and generating public URLs through a simple API.

    1. Set your environment variables

    AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
S3_ENDPOINT=
S3_REGION=
S3_BUCKET_NAME=
VITE_S3_PUBLIC_URL=

    Once these are filled in, storage becomes ready to use across your project.

    2. Upload a file

    Use the provided API wherever you need to store user uploads (eg: avatars, documents, images, xxx).

    API utilization

    import { storageAPI } from "@/features/storage/storageAPI"

storageAPI.uploadFile({
  Key: 'path/inside/bucket', // New S3 path/filename
  Body: <file-content>, // File content (string, Buffer, Stream, or Blob)
  ContentType: <mime-type> // File's MIME type (e.g., 'image/jpeg')
})

    Upload flow

    Provide a file (as File, Blob, buffer, or base64 turned into buffer)
    Choose where it should be stored using Key (ex: "avatars/user123.png")
    Send file content in Body and set the correct ContentType
    Receive a stored file key/path in response

    This is the only function you need to upload files anywhere in your application.

    3. Replace an Existing File

    Parameters

    storageAPI.replaceFile({
  Key: 'new/path',
  Body: <file-content>,
  ContentType: <mime-type>,
  oldKey: 'old/path'
})

    Useful for profile updates and similar flows.

    Provide the new file
    Optionally provide oldKey to automatically remove the previous file
    Receive the new stored file key/path in response
    The old file is removed and the new one is stored

    The API handles both deletion + upload for you.

    4. Get a Public URL

    API utilization

    storageHelper.publicUrl("path/to/file");
    Provide the stored path/key
    Receive the publicly accessible URL

    5. List or Delete Files

    Listing files

    storageAPI.listFiles("folder-prefix/");

    Deleting a file

    storageAPI.deleteFile("path/to/file");

    This is commonly/mainly used for admin tools or cleanup operations.

    Development Utilities

    Reset & Seed Storage

    The project also includes a utility that you can utilize to reset and seed your storage quickly.

    It is also helpful for if you want to automatically populate initial files in your S3 bucket instead of uploading them manually.

    What it does:

    • Clears the avatars/ folder
    • Uploads default/sample images

    This allows you to keep the storage consistent and makes initial deployments easier.

    Behind the Scenes (Optional Reading)

    You get:

    • A preconfigured S3 client (connected using your environment variables)
    • A simple API layer wrapping all common file operations
    • Helpers for file conversions, buffers, and MIME detection (you can add more if needed)
    • Support for any S3-compatible provider

    You don't need to interact with the underlying S3 commands, everything is abstracted to simple/easy functions.

    Summary

    You only need to:

    1. Fill out the S3 environment variables
    2. Use the provided storageAPI functions:
      • uploadFile
      • replaceFile
      • listFiles
      • deleteFile
    3. Use storageHelper.publicUrl to generate public links

    Things like configuration, S3 commands, MIME detection are handled behind the scenes.