Skip to content
WebEdit

🖼️ Media System

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

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

API Structure

The system exposes two main APIs:

Media API (/api/media)

High-level interface for media management:

  • File uploads with metadata
  • Preview generation
  • Metadata management
  • URL-based imports

Blob API (/api/blobs)

Low-level storage operations:

  • Direct blob access
  • Raw file storage
  • System maintenance