Appearance

Download System ​

File Information ​

  • Path: app/stores/download.ts, app/composables/api/useDownloadApi.ts
  • Purpose: Advanced download system for assets and folders

Overview ​

The Download System provides comprehensive download functionality for digital assets and folders. It supports single and bulk downloads, folder downloads as ZIP, image asset downloads, and download progress tracking.

Architecture ​

System Components ​

  1. Download Store: Centralized download state management
  2. Download API: Download API operations
  3. Download Components: Download UI and progress tracking
  4. ZIP Generation: Folder download as ZIP files
  5. Stream Saver: Large file download support

Key Features ​

1. Single Asset Download ​

  • Download individual assets
  • Image asset downloads (with format options)
  • Non-image asset downloads
  • Download progress tracking
  • Download completion notifications

2. Bulk Downloads ​

  • Download multiple selected assets
  • Download entire folders
  • Download entire collages
  • Bulk download queue management
  • Download progress per item

3. Folder Downloads ​

  • Download folder as ZIP file
  • Include all subfolders and assets
  • ZIP file generation
  • Download progress tracking
  • Large folder handling

4. Image Downloads ​

  • Image format selection (if supported)
  • Image quality settings
  • Image conversion on download
  • Direct image download
  • Image preview before download

5. Download Progress ​

  • Per-item download progress
  • Bulk download progress
  • Download queue display
  • Download completion tracking
  • Download error handling

File Structure ​

Core Files ​

Stores ​

  • app/stores/download.ts - Download store
    • Download state management
    • Download queue
    • Download progress
    • Download operations

Composables ​

  • app/composables/api/useDownloadApi.ts - Download API operations
    • Download asset
    • Download multiple assets
    • Download folder
    • Download progress tracking

Plugins ​

  • app/plugins/stream-saver.client.ts - StreamSaver configuration
    • Large file downloads
    • Stream-based downloads
    • Download progress tracking

Data Flow ​

Single Asset Download ​

  1. User clicks download on asset
  2. Download store method called
  3. Asset type checked (image vs other)
  4. Appropriate download method used
  5. Download progress tracked
  6. Download completion notification

Bulk Download ​

  1. User selects multiple assets
  2. Bulk download triggered
  3. Download queue created
  4. Downloads processed sequentially or in parallel
  5. Progress tracked per item
  6. Completion notification when all done

Folder Download ​

  1. User triggers folder download
  2. Folder contents fetched
  3. ZIP file generation initiated
  4. ZIP file created with all contents
  5. ZIP file downloaded
  6. Progress tracked during ZIP creation

User Interactions ​

  1. Single Download

    • Click download on asset card
    • Download starts immediately
    • Progress indicator shown
    • Completion notification

  2. Bulk Download

    • Select multiple assets
    • Click bulk download
    • Download queue created
    • Progress tracked
    • Completion notification

  3. Folder Download

    • Click download on folder
    • ZIP generation starts
    • Progress tracked
    • ZIP file downloaded

Download Methods ​

Image Downloads ​

  • Uses downloadImageAsset() method
  • Supports format selection
  • Direct image download
  • Image conversion support

File Downloads ​

  • Uses downloadFile() method
  • Direct file download
  • Stream-based for large files
  • Progress tracking

Bulk Downloads ​

  • Uses downloadMultipleFiles() method
  • Queue management
  • Sequential or parallel downloads
  • Progress tracking per item

Performance Optimizations ​

  1. Stream-based Downloads: Large files downloaded via streams
  2. Queue Management: Download queue prevents browser overload
  3. Progress Tracking: Real-time progress updates
  4. Error Handling: Graceful error handling and retry logic

API Endpoints ​

Download Asset ​

  • Endpoint: GET /assets/{id}/download (via downloadAsset())
  • Response: File download stream

Download Multiple Assets ​

  • Endpoint: POST /assets/download-multiple (via downloadMultiple())
  • Request: Array of asset IDs
  • Response: ZIP file download

Download Folder ​

  • Endpoint: GET /folders/{id}/download (via downloadFolder())
  • Response: ZIP file download with folder contents