Storage
Cloudflare R2 with NuxtHub core utilities.
Nuxflare Pro uses Cloudflare R2 for blob storage, primarily handling file uploads like profile pictures, team logos, and AI assistant attachments.
We make use of the @nuxt-hub/core module for interfacing with the storage with easy-to-use utilities.
Configuration
R2 is configured in two places:
packages/app/nuxt.config.ts
export default defineNuxtConfig({
hub: {
blob: true, // Enables R2 storage using NuxtHub
// ...
},
});
Infra as code:
infra/utils/nuxt.ts
const blob = new sst.cloudflare.Bucket(`${name}BLOB`);
resources.push(blob);
wrangler.r2_buckets ||= [];
wrangler.r2_buckets.push({
binding: "BLOB",
bucket_name: blob.name,
});
Usage Examples
Basic Operations
// Get the blob client
const blob = hubBlob();
// Upload a file
await blob.put("path/to/file.jpg", fileContent);
// Download a file
const file = await blob.get("path/to/file.jpg");
// Delete a file
await blob.del("path/to/file.jpg");
Real-world Examples from the Codebase
- Handling Profile Pictures:
// Delete old profile picture
const previousKey = user.image.slice(baseUrl.length);
if (previousKey.startsWith("profile/")) {
try {
await hubBlob().del(previousKey);
} catch {
// didn't exist
}
}
- AI Assistant File Handling:
const fileBlob = await hubBlob().get(file.pathName);
if (!fileBlob) throw new Error(`File not found: ${file.pathName}`);
// Clean up files after processing
if (files && files.length > 0) {
for (const file of files) {
await hubBlob().del(file.pathName);
}
}