🖼️ Media

Overview

The WebEdit media system provides a complete solution for handling files, images, and other media assets. It combines frontend components for user interaction with backend services for storage and processing.

Architecture

Media vs Blobs

Media entries are the high-level representation of files, while blobs are the actual file data. This separation allows multiple media entries to reference the same blob (deduplication) and keeps metadata separate from content.

Storage Layer

• Blobs: Raw file storage in S3-compatible storage (Garage)
• Media: High-level metadata and references
• Previews: Cached thumbnails (320x180px for images)

Frontend Components

• MediaList: Grid view displaying available media
• MediaDetail: Detailed view of individual media items
• MediaDropzone: Upload interface with drag-and-drop
• MediaEntity: Preview card with basic metadata

State Management

• siteStore: Media metadata and references
• streamStore: Upload progress tracking
• MediaStore: Local file state management

Data Flow

Upload Process

1. Client Preparation

   • User selects file via MediaDropzone
   • System generates unique IDs (blobId, mediaId)
   • File metadata is collected (size, type, name)

2. Stream Creation

   • Metadata is prefixed to file content
   • Binary stream format:

     [4 bytes magic number]
     [4 bytes metadata length]
     [metadata as JSON]
     [file content]

3. Server Processing

   • Extract and validate metadata
   • Store file content in blob storage
   • Create preview for images
   • Set up file references and mappings

File Access

1. Media Request

   • Frontend requests file by mediaId
   • Server looks up corresponding blobId
   • Content is served with correct headers

2. Preview Generation

   • Automatic for images (320x180px)
   • Generated on first request
   • Cached for subsequent access

Frontend Routes

Route	Component	Purpose
/s/:siteId/media	MediaList	Browse media files
/s/:siteId/media/:mediaId	MediaDetail	View/edit single item

State Updates

Upload Process

1. Generate unique IDs
2. Update local state
3. Stream file data
4. Track upload progress
5. Update metadata on completion

Delete Process

1. Remove from frontend store
2. Send deletion request
3. Clean up references
4. Navigate back to list

Deduplication

The system automatically deduplicates files using content hashing, allowing multiple media entries to reference the same blob while maintaining separate metadata.

Future Work

• Add a nice media sidebar for better in editing workflow