Storage

Frontend Cloud Storage provides secure, isolated storage buckets for each authenticated user. This storage system is designed specifically for user-generated files that belong to individual users, with automatic organization and access control based on user authentication.

Important: Storage is only for user-specific files. For managing general website media (images, videos, and other assets used in your website design and content), use the Media Library instead.

How Storage Works

Storage in Frontend Cloud is designed with user privacy and security in mind:

• Per-User Buckets: Each user gets their own isolated storage space in the “users” bucket
• Authenticated Access Only: Only logged-in users can access storage
• User ID Organization: Files are automatically stored under the user’s ID
• Automatic Isolation: Users can only access their own files, not other users’ files
• Cloud URLs: Uploaded files are returned with URLs beginning with https://cloud.frontend.co

This architecture ensures that user data remains private and secure without requiring manual access control configuration.

Storage vs. Media Library

Frontend Cloud has two distinct storage systems:

• User Storage (this feature): For user-specific files that belong to individual authenticated users (avatars, user uploads, personal documents)
• Media Library: For general website media management (website images, videos, design assets, and content). See Media Library for details.

What You Can Store

Frontend Cloud Storage is exclusively for user-generated files that belong to specific authenticated users:

User Avatars

• Profile pictures and display images
• Custom icons or badges
• User-customizable graphics

Document Uploads

• PDFs and documents
• Spreadsheets and presentations
• Text files and reports

Media Files

• Photos and images
• Audio recordings
• Video content

Application Data

• User-specific configuration files
• Exported data or backups
• Generated reports or outputs

File Organization

Files are automatically organized by user in the “users” bucket:

https://cloud.frontend.co/users/
├── user_abc123/
│   ├── avatar.jpg
│   ├── document.pdf
│   └── photo.png
├── user_def456/
│   ├── avatar.png
│   └── file.txt
└── user_ghi789/
    └── upload.jpg

Each user’s files are stored in a directory named with their User ID, ensuring complete isolation and easy retrieval.

Access Control

Storage access is tied to authentication:

• Anonymous Users: Cannot access storage at all
• Authenticated Users: Can only access files in their own bucket
• Automatic Enforcement: The system prevents unauthorized access automatically

You don’t need to manually configure permissions or check user access—Frontend Cloud handles this automatically.

Uploading Files

Users can upload files through your application’s interface. Frontend AI can help implement file upload functionality:

Example Upload Implementation

Tell Frontend AI to create file upload features:

• “Add a profile picture upload that saves to user storage”
• “Create a file upload form for documents”
• “Allow users to upload and manage their photos”

The AI will generate the necessary UI and integrate with the storage API.

File Upload Flow

1. User selects a file through your application’s UI
2. Application authenticates the user’s session
3. File is uploaded to the user’s storage bucket
4. File is stored under the user’s ID in the “users” bucket
5. Application receives the file URL: https://cloud.frontend.co/users/{userId}/{filename}

File URLs

When a file is successfully uploaded, you receive a URL that can be used to access the file:

https://cloud.frontend.co/users/user_abc123/avatar.jpg

These URLs can be:

• Stored in your CMS documents
• Used directly in <img> tags or download links
• Shared within your application
• Referenced in API responses

Retrieving Files

Accessing stored files requires authentication:

Authenticated Requests

Files can only be retrieved with a valid user session. The cloud URL is publicly accessible once generated, but only the authenticated user who owns the file can upload or manage it.

Displaying User Files

When building your application:

• Fetch file URLs for the authenticated user
• Display images using the cloud.frontend.co URLs
• List all files in the user’s storage
• Preview uploaded content

Common Use Cases

Profile Management

// User uploads a profile picture
// File is saved and URL returned
const avatarUrl = "https://cloud.frontend.co/users/user_123/avatar.jpg"

// Application displays the avatar
<img src={avatarUrl} alt="Profile Picture" />

The system automatically associates the file with the correct user.

Document Management System

• Users upload work documents
• Each user’s files are isolated in the “users” bucket
• Search and organize within user’s own storage
• Download or share files using cloud URLs

Media Gallery

• Users create photo albums
• Upload images to personal storage
• Display galleries using cloud.frontend.co URLs
• Organize and tag personal media

User-Generated Content

• Article or blog post attachments
• Comment attachments or supporting files
• User-submitted content for review
• Portfolio or showcase materials

Security Considerations

Frontend Cloud Storage is built with security in mind:

• Encrypted Storage: Files are stored securely in the cloud
• Access Authentication: Only authenticated users can upload to their bucket
• Isolation: Users cannot upload to other users’ directories
• Secure URLs: Files are served from cloud.frontend.co

Best Practices

When implementing storage features:

• Validate file types: Only allow appropriate file formats
• Set size limits: Prevent abuse with reasonable file size caps
• Implement cleanup: Remove orphaned or old files periodically
• Provide user controls: Let users manage their own files
• Store URLs in CMS: Save the returned cloud URLs in your CMS for easy reference

Implementing Storage Features

Using Frontend AI

The easiest way to add storage features:

• “Create a file upload button that saves to user storage”
• “Show all files in the current user’s storage”
• “Add a delete button for user files”
• “Display the user’s avatar from storage”

Frontend AI will handle the implementation details automatically.

Integration with CMS

Storage and CMS work together seamlessly:

• Store file URLs in CMS collections
• Reference user uploads in documents
• Associate files with CMS records
• Use image fields to link storage files

Example: User Profile with Avatar

// CMS profile document
{
  "userId": "user_123",
  "name": "John Doe",
  "avatarUrl": "https://cloud.frontend.co/users/user_123/avatar.jpg",
  "bio": "Software developer"
}

The avatar is stored in user storage and the cloud URL is saved in the CMS profile document.

Using Storage URLs

Once uploaded, the cloud URLs can be used anywhere in your application:

<!-- Display an image -->
<img src="https://cloud.frontend.co/users/user_123/photo.jpg" />

<!-- Download a document -->
<a href="https://cloud.frontend.co/users/user_123/document.pdf" download>
  Download Document
</a>

<!-- Background image -->
<div style="background-image: url('https://cloud.frontend.co/users/user_123/banner.jpg')">
</div>

Frontend Cloud Storage provides a simple, secure solution for user file management, with files hosted on cloud.frontend.co in the “users” bucket, eliminating the need to set up and maintain separate cloud storage infrastructure while ensuring user privacy and data isolation.