Storage

ShipSaaS uses Cloudflare R2 for file storage, which is accessed directly via Wrangler binding to R2 buckets.

Setup

Configure Cloudflare API Token

First, complete the Cloudflare configuration. Ensure that your Token contains Account > Workers R2 Storage > Edit permissions.

Create R2 Bucket

You can create an R2 bucket via either the Cloudflare Dashboard or the Wrangler CLI:

Wrangler CLI

1. Create a new R2 bucket:

bunx wrangler r2 bucket create your-bucket-name

Cloudflare Dashboard

1. Log in to the Cloudflare Dashboard
2. Navigate to Storage & Databases > R2 Object Storage
3. Click Create Bucket
4. Enter a globally unique bucket name
5. Select a region close to your target audience
6. Click Create Bucket

Configure Wrangler Binding

Configure the R2 bucket binding in your wrangler.jsonc file:

wrangler.jsonc

{
  "r2_buckets": [
    {
      "binding": "BUCKET",
      "bucket_name": "your-bucket-name" // Make sure to modify this to your bucket name
    }
  ]
}

Update Website Configuration

In general, you can keep the default configurations. If you need to make changes, you can modify the storage config in src/config/website.ts:

src/config/website.ts

export const websiteConfig = {
  // ...other configurations
  storage: {
    enable: true,
    provider: 'r2',
    maxFileSize: 10 * 1024 * 1024,
    allowedTypes: [],
    userFilesFolder: 'userfiles',
  },
  // ...other configurations
}

If you are setting up your environment, you can now return to the Environment Configuration document and continue. The remainder of this document can be read later.

Environment configuration set environment variables

Core Features

• File uploading and downloading
• Using folders to organize files
• Automated file path generation and naming
• File information query and user file list
• Configurable file size limits and type restrictions

Usage

Basic File Operations

ShipSaaS provides a simple API for common file operations:

import { uploadFile, deleteFile, downloadFile, getFileInfo } from '@/storage';

// Upload a file
const { url, key } = await uploadFile(
  fileBuffer,
  'original-filename.jpg',
  'image/jpeg',
  { folder: 'uploads/images' }
);

// Delete a file
await deleteFile(key);

// Download a file
const stream = await downloadFile(key);

// Get file details
const info = await getFileInfo(key);

User File Management

import { listUserFiles, uploadFile } from '@/storage';

// Upload a user file
const { url, key, metadata } = await uploadFile(
  file,
  filename,
  contentType,
  { folder: 'userfiles', userId: 'user_123' }
);

// List all files belonging to a user
const { objects, hasMore, nextCursor } = await listUserFiles('user_123');

Best Practices

1. File Organization: Use folders to organize files by type or purpose.
2. File Size Limits: Set reasonable file size limits to prevent abuse.
3. File Type Validation: Validate file types on both the client and server sides for enhanced security.

Next Steps

Now that you know how to use file storage in ShipSaaS, explore these related topics:

• Payment - Configure website payment features

• Authentication - Configure user authentication

• Database - Configure database

• Environment Configuration - Configure environment variables

• Database

• Authentication