93 lines
3.0 KiB
Plaintext
93 lines
3.0 KiB
Plaintext
---
|
|
title: "Media"
|
|
description: "Effortlessly manage and serve all your media files."
|
|
tags: ["documentation"]
|
|
---
|
|
|
|
<Callout type="info" title="The documentation is currently a work in progress">
|
|
Check back soon — or stay updated on our progress on
|
|
[GitHub](https://github.com/userbase-io/userbase) and join the conversation in
|
|
[Discord](https://discord.gg/952SFk8Tb8).
|
|
</Callout>
|
|
|
|
**userbase** provides a flexible and efficient way to handle media files, making it easy to upload, manage, and deliver content across various platforms.
|
|
|
|
### **Core Features**
|
|
|
|
- **File Uploads**: Supports direct (chunked coming soon) uploads of files up to 5GB (depending
|
|
on your environment).
|
|
- **Adapter-Based Design**:
|
|
- Pre-built support for S3, S3-compatible services (e.g., R2, Tigris), and Cloudinary.
|
|
- Extend functionality by implementing custom adapters.
|
|
- **Entity Integration**: Attach media files directly to entities for seamless data association.
|
|
- **Content Delivery**: Serve media over an API endpoint or directly from your provider.
|
|
|
|
The media tools are designed to integrate effortlessly into your workflows, offering scalability
|
|
and control without added complexity.
|
|
|
|
### Pre-built support for S3
|
|
|
|
There are two ways to enable S3 or S3 compatible storage in userbase.
|
|
|
|
1. Enable via the admin UI.
|
|
|
|
Simply navigate to the **Media** tab of the userbase admin UI and enable the S3 media support.
|
|
Enter your AWS S3-compatible storage Access Key, Secret Access Key, and URL.
|
|
This will automatically configure the S3 adapter for you.
|
|
|
|
**URL Format Examples:**
|
|
|
|
- **S3**: `https://{bucket}.s3.{region}.amazonaws.com`
|
|
- **R2 (Cloudflare)**: `https://{account_id}.r2.cloudflarestorage.com/{bucket}`
|
|
|
|
2. Enable programmatically.
|
|
|
|
To enable using a code-first approach, create corresponding configuration using the `config` option in your `userbase.config.ts` file.
|
|
|
|
```typescript title="userbase.config.ts"
|
|
import type { UserbaseConfig } from "userbase/adapter";
|
|
|
|
export default {
|
|
config: {
|
|
media: {
|
|
enabled: true,
|
|
adapter: {
|
|
type: "s3",
|
|
config: {
|
|
access_key: "<key>",
|
|
secret_access_key: "<secret key>",
|
|
url: "<bucket url>",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
} satisfies UserbaseConfig;
|
|
```
|
|
|
|
### Local adapter for development
|
|
|
|
For local development and testing, you can use the local file system adapter. This is particularly useful when working with Node.js environments.
|
|
|
|
```typescript title="userbase.config.ts"
|
|
import { registerLocalMediaAdapter } from "userbase/adapter/node";
|
|
import type { UserbaseConfig } from "userbase/adapter";
|
|
|
|
// Register the local media adapter
|
|
const local = registerLocalMediaAdapter();
|
|
|
|
export default {
|
|
config: {
|
|
media: {
|
|
enabled: true,
|
|
adapter: local({
|
|
path: "./public/uploads", // Files will be stored in this directory
|
|
}),
|
|
},
|
|
},
|
|
} satisfies UserbaseConfig;
|
|
```
|
|
|
|
This configuration will store uploaded files in the specified directory,
|
|
making them accessible through your application's public path (in this case)
|
|
or at `/api/media/file/{filename}`.
|