Appearance

Asset Upload Component ​

File Information ​

  • Path: components/dam/AssetUpload.vue
  • Purpose: Main component for uploading digital assets with drag-and-drop, file selection, upload queue management, and progress tracking

Overview ​

The AssetUpload component provides a comprehensive file upload interface for the DAM system. It supports multiple upload modes (direct and chunked), handles file validation, manages upload queues, tracks progress, and provides error handling with retry capabilities. The component is used across the application wherever file uploads are needed.

Key Features ​

  1. Multiple Upload Modes

    • Direct upload for small files (< 10MB)
    • Chunked/multipart upload for large files (>= 10MB)
    • Automatic mode selection based on file size
    • External upload mode for guest users

  2. File Selection Methods

    • Drag and drop interface
    • Click to browse files
    • Multiple file selection
    • Folder upload support (if enabled)

  3. Upload Queue Management

    • Queue display with status indicators
    • Pause/resume uploads
    • Cancel uploads
    • Remove from queue
    • Reorder uploads

  4. Progress Tracking

    • Real-time progress per file
    • Overall queue progress
    • Upload speed indicators
    • Time remaining estimates

  5. Error Handling

    • Automatic retry on failure
    • Manual retry option
    • Clear error messages
    • Error recovery

Props ​

javascript
{
  mode: {
    type: String,
    default: 'both',           // 'both', 'files', 'folders', 'external'
    description: 'Upload mode - both files and folders, files only, folders only, or external upload'
  },
  flag: {
    type: String,
    default: null,              // 'external' for external uploads
    description: 'Special flag for external upload mode'
  },
  workspaceId: {
    type: String,
    required: true,
    description: 'Workspace ID for upload destination'
  },
  folderId: {
    type: String,
    default: null,
    description: 'Target folder ID (null for root)'
  },
  maxFileSize: {
    type: Number,
    default: 1073741824,        // 1GB
    description: 'Maximum file size in bytes'
  },
  allowedTypes: {
    type: Array,
    default: () => [],
    description: 'Allowed file types (empty array = all types)'
  },
  maxConcurrent: {
    type: Number,
    default: 3,
    description: 'Maximum concurrent uploads'
  },
  chunkSize: {
    type: Number,
    default: 10485760,         // 10MB
    description: 'Chunk size for multipart uploads'
  }
}

Events ​

javascript
{
  'uploaded': (asset) => {},           // Single upload completed
  'upload-complete': (assets) => {},   // All uploads completed
  'upload-error': (error, file) => {}, // Upload error occurred
  'upload-progress': (progress) => {},  // Progress update
  'queue-updated': (queue) => {},      // Queue state changed
  'file-selected': (files) => {},      // Files selected
  'close': () => {}                    // Component close requested
}

Data Properties ​

javascript
{
  contentLoading: boolean,        // Initial loading state
  queue: array,                   // Upload queue array
  externalFiles: array,          // External upload files
  completed: boolean,             // All uploads completed
  successCount: number,          // Successfully uploaded count
  totalFileCount: number,        // Total files to upload
  alreadyUploaded: number,       // Previously uploaded items pending action
  showSbmtBtn: boolean,          // Show submit button
  nextDisabled: boolean,         // Disable next button
  submitBtnTxt: string,          // Submit button text
  uploadStarted: boolean,        // Upload process started
  extenalPendingCount: number,   // External pending count
  flag: string                   // Upload flag (internal/external)
}

Mixins Used ​

  • uploadQueue - Upload queue management (~/mixins/uploadQueue)
  • upload-common - Common upload utilities (~/mixins/upload-common)
  • external-uploads - External upload handling (if flag === 'external')

Methods ​

handleFileSelect(files) ​

Handles file selection:

  • Validates files (size, type, permissions)
  • Creates upload objects for each file
  • Adds files to upload queue
  • Emits file-selected event
  • Starts upload process if queue is ready

handleDrop(event) ​

Handles drag and drop:

  • Prevents default browser behavior
  • Extracts files from data transfer
  • Validates dropped files
  • Calls handleFileSelect with dropped files

startUpload(file) ​

Starts upload for a file:

  • Determines upload mode (direct vs chunked)
  • Creates upload object
  • Adds to queue
  • Begins upload process

uploadFile(file, uploadId) ​

Uploads a single file:

  • For small files: Direct upload via FormData
  • For large files: Initiates chunked upload
  • Tracks progress
  • Handles errors
  • Updates queue status

uploadChunked(file, uploadId) ​

Handles chunked upload:

  • Splits file into chunks
  • Initiates multipart upload
  • Uploads chunks sequentially or in parallel
  • Tracks progress per chunk
  • Completes multipart upload
  • Handles chunk errors

retryUpload(uploadId) ​

Retries a failed upload:

  • Resets upload status
  • Clears error state
  • Restarts upload process
  • Updates queue

cancelUpload(uploadId) ​

Cancels an upload:

  • Aborts active upload request
  • Removes from queue
  • Cleans up resources
  • Updates UI

pauseUpload(uploadId) ​

Pauses an upload:

  • Saves current state
  • Stops upload process
  • Updates status to 'paused'
  • Allows resume later

resumeUpload(uploadId) ​

Resumes a paused upload:

  • Restores saved state
  • Continues from last position
  • Updates status to 'uploading'
  • Resumes upload process

onNextAction() ​

Handles next/submit action:

  • Validates upload completion
  • Processes uploaded files
  • Emits completion events
  • Handles navigation

validateFile(file) ​

Validates a file:

  • Checks file size against maxFileSize
  • Validates file type against allowedTypes
  • Checks workspace/folder permissions
  • Returns validation result and errors

Upload Flow ​

  1. File Selection

    • User selects files or drags and drops
    • Files are validated
    • Upload objects are created

  2. Queue Management

    • Files added to upload queue
    • Queue processed based on maxConcurrent
    • Status tracked per file

  3. Upload Execution

    • Small files: Direct upload
    • Large files: Chunked upload
    • Progress tracked and displayed

  4. Completion

    • Assets created in backend
    • Queue updated
    • Events emitted
    • UI refreshed

API Integration ​

Direct Upload ​

  • Endpoint: POST /api/assets/upload
  • Request: FormData with file and metadata
  • Response: Asset object

Chunked Upload ​

  • Initiate: POST /s3/initiate-upload
  • Upload Chunks: PUT to presigned URLs
  • Complete: POST /s3/complete-upload

Error Handling ​

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

State Management ​

Integrates with:

  • Upload Queue Mixin: Manages queue state
  • DAM Store: Updates asset list after upload
  • Upload Common Mixin: Common utilities

Usage Examples ​

Basic Usage ​

vue
<template>
  <AssetUpload
    :workspace-id="workspaceId"
    :folder-id="currentFolderId"
    @upload-complete="handleUploadComplete"
    @upload-error="handleUploadError"
  />
</template>

<script>
export default {
  methods: {
    handleUploadComplete(assets) {
      // Handle completed uploads
      this.$store.dispatch('dam/addAssets', assets)
    },
    handleUploadError(error, file) {
      // Handle upload error
      this.$snackbar.error(`Upload failed: ${error.message}`)
    }
  }
}
</script>

External Upload Mode ​

vue
<template>
  <AssetUpload
    :workspace-id="workspaceId"
    mode="both"
    flag="external"
    @uploaded="handleExternalUpload"
  />
</template>

With Custom Configuration ​

vue
<template>
  <AssetUpload
    :workspace-id="workspaceId"
    :max-file-size="52428800"
    :allowed-types="['image/jpeg', 'image/png']"
    :max-concurrent="5"
    @upload-progress="handleProgress"
  />
</template>

Styling ​

  • Uses custom CSS classes:
    • collage-assets-upload - Main container
    • assets-upload-header - Header section
    • assetsUploadWapper - Upload wrapper
    • Responsive design for mobile/tablet/desktop

Integration Points ​

  • Upload Queue Mixin: Queue management
  • Upload Common Mixin: Common utilities
  • S3 API: File storage
  • DAM Store: State updates
  • Analytics: Upload tracking

Notes for Development ​

  • Component handles both internal and external uploads
  • Upload queue persists across component lifecycle
  • Large file uploads can be paused and resumed
  • Progress is tracked per file and overall
  • Failed uploads can be retried individually
  • Storage limits are checked before allowing uploads
  • Component emits events for parent component integration