Appearance

DAM Upload Page ​

File Information ​

  • Path: pages/_workspace_id/dam/upload.vue
  • Route: /:workspace_id/dam/upload
  • Middleware: authCheck, checkWorkspace, can-access-dam-module, check-if-suspended
  • Layout: damLayout

Purpose ​

The DAM Upload page provides a dedicated interface for uploading digital assets to the workspace. It uses the AssetUpload component to handle file selection, drag-and-drop, upload queue management, and progress tracking. This page serves as the main entry point for bulk asset uploads.

Key Features ​

  1. File Upload Interface

    • Drag and drop file selection
    • Multiple file selection support
    • File validation before upload
    • Upload queue management

  2. Upload Modes

    • Direct upload for small files
    • Chunked/multipart upload for large files
    • Automatic mode selection based on file size

  3. Progress Tracking

    • Real-time upload progress per file
    • Overall queue progress
    • Upload status indicators

  4. Error Handling

    • Automatic retry on failure
    • Manual retry option
    • Clear error messages
    • Cancel upload functionality

  5. Upload Queue Management

    • View all queued uploads
    • Pause/resume uploads
    • Remove files from queue
    • Reorder uploads

Components Used ​

  • AssetUpload - Main upload component (~/components/dam/AssetUpload.vue)
    • Handles file selection
    • Manages upload queue
    • Displays progress
    • Handles errors

Data Properties ​

javascript
{
  uploadCompleted: boolean,     // Upload completion status
  showUpload: boolean,          // Upload component visibility
  workspaceId: string          // Workspace ID from route params
}

Methods ​

onAssetUploaded() ​

Handles upload completion:

  • Sets uploadCompleted flag
  • Hides upload component
  • Optionally redirects to uploaded assets page
  • Updates UI state

Upload Flow ​

  1. Page Load

    • User navigates to /:workspace_id/dam/upload
    • AssetUpload component is rendered
    • Upload interface is displayed

  2. File Selection

    • User selects files via:
      • Drag and drop
      • File input click
      • Multiple file selection
    • Files are validated (size, type, permissions)

  3. Upload Initialization

    • Files are added to upload queue
    • Upload objects are created for each file
    • Queue processing begins

  4. Upload Execution

    • Small files (< 10MB): Direct upload via FormData
    • Large files (>= 10MB): Chunked/multipart upload
    • Progress is tracked and displayed
    • Errors are handled with retry logic

  5. Upload Completion

    • Assets are created in backend
    • Thumbnails are generated (async)
    • Assets are indexed in Typesense (async)
    • Upload queue is updated
    • Success notification is shown

API Endpoints ​

  • POST /api/assets/upload - Direct upload endpoint

    • Request: FormData with file and metadata
    • Response: Asset object with ID and metadata

  • POST /s3/initiate-upload - Start multipart upload

    • Request: File metadata and size
    • Response: Upload ID and presigned URLs

  • POST /s3/complete-upload - Complete multipart upload

    • Request: Upload ID and part ETags
    • Response: Final asset location and metadata

Upload Modes ​

Direct Upload ​

  • Used for files < 10MB (configurable threshold)
  • Single HTTP POST request
  • FormData with file and metadata
  • Simpler flow, faster for small files

Chunked Upload ​

  • Used for files >= 10MB
  • File split into 10MB chunks
  • Each chunk uploaded separately
  • Parts assembled on S3
  • Better for large files and network issues

Error Handling ​

  • Network Errors: Automatic retry (up to 3 attempts)
  • Validation Errors: Shown immediately, file not queued
  • Upload Failures: Status updated, manual retry available
  • Storage Full: Upload disabled, warning shown
  • Permission Errors: Access denied message

State Management ​

The upload page integrates with:

  • Upload Queue Mixin (uploadQueue.js): Manages upload queue state
  • Upload Common Mixin (upload-common.js): Common upload utilities
  • DAM Store: Updates asset list after upload

User Interactions ​

  1. File Selection

    • Click upload area or drag files
    • Select multiple files
    • Files appear in queue

  2. Upload Management

    • View upload progress
    • Pause/resume uploads
    • Cancel uploads
    • Remove from queue

  3. After Upload

    • View uploaded assets
    • Navigate to asset details
    • Continue uploading more files

Styling ​

  • Uses custom CSS classes:
    • collage-body - Main container
    • AssetUpload component handles its own styling
    • Responsive design for mobile/tablet/desktop

Integration Points ​

  • AssetUpload Component: Main upload interface
  • Upload Queue Mixin: Queue management
  • S3 API: File storage
  • DAM Store: State updates
  • Analytics: Upload tracking

Notes for Development ​

  • The page is minimal, delegating most functionality to AssetUpload component
  • Upload queue persists across page navigation (stored in mixin)
  • Large file uploads can be paused and resumed
  • Upload progress is tracked per file and overall
  • Failed uploads can be retried individually
  • Storage limits are checked before allowing uploads