Appearance

Upload Queue Mixin ​

File Information ​

  • Path: mixins/uploadQueue.js
  • Purpose: Upload queue management with concurrent upload limits

Overview ​

The Upload Queue mixin manages the upload queue system, controlling concurrent uploads, scheduling upload tasks, and maintaining queue state. It ensures that uploads don't overwhelm the system by limiting the number of simultaneous uploads.

Key Features ​

  1. Concurrent Upload Control

    • Limits simultaneous uploads
    • Configurable max concurrent uploads
    • Queue scheduling

  2. Queue Management

    • Task scheduling
    • Queue processing
    • Queue reset

  3. Upload State Tracking

    • Active uploads count
    • Pending queue
    • Upload completion handling

Data Properties ​

javascript
{
  MAX_CONCURRENT_UPLOADS: {
    type: Number,
    default: 5,
    description: 'Maximum number of concurrent uploads'
  }
}

Methods ​

scheduleUploadTask(task) ​

Schedules an upload task:

  • Adds task to pending queue
  • Triggers queue processing
  • Returns immediately (non-blocking)

Parameters:

  • task (Function): Upload task function that returns a Promise

Example:

javascript
this.scheduleUploadTask(async () => {
  return await this.uploadFile(file)
})

processQueue() ​

Processes the upload queue:

  • Checks concurrent upload limit
  • Starts uploads if under limit
  • Manages active uploads count
  • Automatically processes next when upload completes

Behavior:

  • Runs automatically when tasks are scheduled
  • Processes queue until limit reached or queue empty
  • Continues processing when uploads complete

resetQueue() ​

Resets the upload queue:

  • Clears pending queue
  • Resets active uploads count
  • Cancels all pending tasks

Usage:

  • Called on component destroy
  • Can be called manually to clear queue

Queue State ​

The mixin maintains internal state:

  • activeUploads (number): Currently active uploads count
  • pendingQueue (array): Array of pending upload tasks

Usage Examples ​

Basic Usage ​

vue
<script>
import uploadQueue from '~/mixins/uploadQueue'

export default {
  mixins: [uploadQueue],
  data() {
    return {
      MAX_CONCURRENT_UPLOADS: 3 // Override default
    }
  },
  methods: {
    async handleFiles(files) {
      for (const file of files) {
        // Schedule upload task
        this.scheduleUploadTask(async () => {
          return await this.uploadFile(file)
        })
      }
    },
    
    async uploadFile(file) {
      const formData = new FormData()
      formData.append('file', file)
      
      try {
        const response = await this.$axios.post('/api/assets/upload', formData, {
          onUploadProgress: (progressEvent) => {
            // Update progress
            const progress = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            )
            this.updateFileProgress(file.id, progress)
          }
        })
        
        return response.data
      } catch (error) {
        throw error
      }
    }
  },
  
  beforeDestroy() {
    // Clean up queue on component destroy
    this.resetQueue()
  }
}
</script>

With Upload Common Mixin ​

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

export default {
  mixins: [uploadQueue, uploadCommon],
  methods: {
    async handleFileSelect(files) {
      for (const file of files) {
        // Validate file
        const validation = this.validateFile(file)
        if (!validation.valid) {
          this.$snackbar.error(validation.message)
          continue
        }
        
        // Initialize upload
        const upload = this.initUpload(file, {
          workspaceId: this.workspaceId
        })
        
        // Schedule upload
        this.scheduleUploadTask(async () => {
          return await this.executeUpload(upload)
        })
      }
    },
    
    async executeUpload(upload) {
      // Upload implementation
      // Progress tracking
      // Error handling
    }
  }
}
</script>

Concurrent Upload Behavior ​

  1. Task Scheduling

    • Task added to pending queue
    • Queue processing triggered

  2. Queue Processing

    • Checks if under concurrent limit
    • If yes: Starts upload immediately
    • If no: Waits in queue

  3. Upload Completion

    • Active count decremented
    • Queue processing triggered again
    • Next task starts if available

Configuration ​

Default Concurrent Limit ​

  • Default: 5 concurrent uploads
  • Can be overridden in component data

Custom Limit Example ​

javascript
data() {
  return {
    MAX_CONCURRENT_UPLOADS: 3 // Custom limit
  }
}

Lifecycle Integration ​

The mixin automatically:

  • Resets queue on component destroy
  • Cleans up active uploads
  • Prevents memory leaks

Integration Points ​

  • Upload Common Mixin: Upload functionality
  • Asset Upload Component: Main upload interface
  • S3 API: File storage
  • Axios: HTTP requests

Notes for Development ​

  • Mixin is lightweight and efficient
  • Queue processing is automatic
  • Concurrent limit prevents system overload
  • Tasks are executed asynchronously
  • Queue state is maintained internally
  • Component cleanup is automatic