Appearance

Upload Common Mixin ​

File Information ​

  • Path: mixins/upload-common.js
  • Purpose: Common upload functionality shared across upload components

Overview ​

The Upload Common mixin provides essential upload functionality including file validation, upload initialization, progress tracking, error handling, and icon generation. It's used by all upload components to ensure consistent upload behavior across the application.

Key Features ​

  1. File Validation

    • File size validation
    • File type validation
    • Extension normalization
    • Error message generation

  2. Upload Initialization

    • Upload object creation
    • Metadata preparation
    • Upload configuration

  3. Progress Tracking

    • Progress calculation
    • Progress event emission
    • Upload status updates

  4. Error Handling

    • Error detection
    • Error message formatting
    • Retry logic support

  5. Icon Generation

    • File type icon selection
    • Icon path resolution
    • Fallback icons

Methods ​

validateFile(file, options) ​

Validates a file before upload:

  • Checks file size against limits
  • Validates file type/extension
  • Returns validation result object
  • Sets error messages if invalid

Parameters:

  • file (File): File object to validate
  • options (Object): Validation options
    • maxFileSize: Maximum file size in bytes
    • allowedTypes: Array of allowed MIME types
    • allowedExtensions: Array of allowed extensions

Returns:

javascript
{
  valid: boolean,
  message: string,
  errors: array
}

initUpload(file, options) ​

Initializes an upload object:

  • Creates upload metadata
  • Sets upload configuration
  • Generates upload ID
  • Returns upload object

Parameters:

  • file (File): File to upload
  • options (Object): Upload options
    • workspaceId: Workspace ID
    • folderId: Target folder ID
    • metadata: Additional metadata

Returns:

javascript
{
  id: string,
  file: File,
  workspaceId: string,
  folderId: string,
  status: 'pending',
  progress: 0,
  metadata: object
}

updateProgress(uploadId, progress) ​

Updates upload progress:

  • Updates progress value
  • Emits progress events
  • Updates UI state

Parameters:

  • uploadId (string): Upload ID
  • progress (number): Progress percentage (0-100)

handleUploadError(uploadId, error) ​

Handles upload errors:

  • Logs error details
  • Updates upload status
  • Formats error messages
  • Triggers retry if applicable

Parameters:

  • uploadId (string): Upload ID
  • error (Error): Error object

getFileIcon(file) ​

Gets icon for file type:

  • Determines file type
  • Returns appropriate icon path
  • Falls back to general icon

Parameters:

  • file (File|Object): File object or file metadata

Returns: Icon path string

normalizeFileExtension(filename) ​

Normalizes file extension:

  • Extracts extension
  • Converts to lowercase
  • Removes leading dot
  • Returns normalized extension

Parameters:

  • filename (string): File name

Returns: Normalized extension string

parseSizeToBytes(sizeStr) ​

Parses size string to bytes:

  • Handles KB, MB, GB, TB units
  • Returns size in bytes
  • Defaults to 500MB if invalid

Parameters:

  • sizeStr (string): Size string (e.g., "10MB")

Returns: Size in bytes (number)

Data Properties ​

The mixin doesn't add data properties directly, but components using it typically have:

javascript
{
  uploadQueue: array,        // Upload queue
  activeUploads: array,     // Currently uploading files
  uploadErrors: object      // Upload errors by ID
}

Icon Constants ​

The mixin defines icon constants:

  • GENERAL_ICON - Default file icon
  • VIDEO_ICON - Video file icon
  • IMAGE_ICON - Image file icon
  • AUDIO_ICON - Audio file icon

Usage Examples ​

Basic Usage ​

vue
<script>
import uploadCommon from '~/mixins/upload-common'

export default {
  mixins: [uploadCommon],
  methods: {
    async handleFileSelect(files) {
      for (const file of files) {
        // Validate file
        const validation = this.validateFile(file, {
          maxFileSize: 100 * 1024 * 1024, // 100MB
          allowedTypes: ['image/jpeg', 'image/png']
        })
        
        if (validation.valid) {
          // Initialize upload
          const upload = this.initUpload(file, {
            workspaceId: this.$route.params.workspace_id,
            folderId: this.currentFolderId
          })
          
          // Add to queue (requires uploadQueue mixin)
          this.addToQueue(upload)
        } else {
          this.$snackbar.error(validation.message)
        }
      }
    },
    
    getFileIconPath(file) {
      return this.getFileIcon(file)
    }
  }
}
</script>

With Progress Tracking ​

vue
<script>
import uploadCommon from '~/mixins/upload-common'

export default {
  mixins: [uploadCommon],
  methods: {
    async uploadFile(upload) {
      try {
        // Upload file
        const response = await this.$axios.post('/api/assets/upload', formData, {
          onUploadProgress: (progressEvent) => {
            const progress = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            )
            this.updateProgress(upload.id, progress)
          }
        })
        
        // Handle success
        this.handleUploadSuccess(upload.id, response.data)
      } catch (error) {
        this.handleUploadError(upload.id, error)
      }
    }
  }
}
</script>

Integration Points ​

  • Upload Queue Mixin: Queue management
  • S3 API: File storage
  • Asset Upload Component: Main upload interface
  • External Uploads Mixin: External upload handling

Error Handling ​

The mixin provides error handling for:

  • File size exceeded
  • Invalid file type
  • Network errors
  • Server errors
  • Validation errors

Notes for Development ​

  • Mixin is used by all upload components
  • File validation is consistent across components
  • Icon generation supports all file types
  • Progress tracking is standardized
  • Error messages are user-friendly