Logo

Storage

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

The storage feature lets you work with an S3 compatible bucket immediately — no setup beyond environment variables. Upload files, replace them, list them, generate public URLs — all through a small, ready to use 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',
  Body: <file-content>,
  ContentType: <mime-type>
})

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.