Appearance

External Upload ​

File Information ​

  • Path: pages/_workspace_id/external/upload.vue
  • Route: /:workspace_id/external/upload
  • Purpose: External user asset upload interface with OTP verification

Overview ​

The External Upload page allows external/guest users to upload files to a workspace after OTP verification. It provides a simplified upload interface with file validation, progress tracking, and upload queue management specifically designed for external users with limited access.

Key Features ​

  1. OTP Verification

    • OTP code input
    • Email verification
    • Session management
    • Access validation

  2. File Upload

    • Drag-and-drop upload
    • File selection
    • File validation
    • Upload progress tracking

  3. Upload Queue

    • Multiple file uploads
    • Queue management
    • Progress indicators
    • Error handling

  4. External User Context

    • Workspace validation
    • Access permission checks
    • Upload limits enforcement
    • Session management

Components Used ​

  • upload-chunk-external - External chunked upload component
  • File upload components
  • Progress indicators
  • OTP input components

Data Properties ​

javascript
{
  files: [],             // Selected files
  uploadQueue: [],       // Upload queue
  uploading: false,     // Upload state
  uploadProgress: {},   // Progress by file
  errors: [],           // Upload errors
  verified: false,      // OTP verification status
  workspaceId: null     // Workspace ID from route
}

Computed Properties ​

workspaceId ​

Returns workspace ID from route

canUpload ​

Checks if user can upload (verified and has permission)

uploadProgress ​

Returns overall upload progress

Methods ​

verifyOTP(otpCode) ​

Verifies OTP code:

  • Validates OTP with backend
  • Sets verified status
  • Creates session
  • Handles errors

selectFiles(files) ​

Selects files for upload:

  • Validates file types
  • Validates file sizes
  • Adds to upload queue
  • Checks upload limits

uploadFiles() ​

Starts file upload:

  • Validates verification status
  • Processes upload queue
  • Tracks progress
  • Handles errors

removeFile(fileId) ​

Removes file from queue:

  • Removes from queue
  • Cancels upload if in progress
  • Updates UI

API Endpoints ​

Verify OTP ​

  • Endpoint: POST /external/verify-otp
  • Request Body: OTP code and workspace ID
  • Response: Verification token and session

Upload File (External) ​

  • Endpoint: POST /external/upload
  • Request: FormData with file and metadata
  • Response: Upload confirmation

Get Upload Status ​

  • Endpoint: GET /external/upload-status
  • Query Parameters: upload_id
  • Response: Upload status and progress

User Flow ​

  1. External user navigates to upload page
  2. User enters OTP code (if not verified)
  3. OTP is verified
  4. User selects files for upload
  5. Files are validated
  6. Upload starts automatically
  7. Progress is tracked
  8. Upload completes
  9. Success message displayed

Middleware ​

  • external-upload-auth - External upload authentication
  • external-otp-verify - OTP verification check

Notes for Development ​

  • Page requires external user authentication
  • OTP verification required before upload
  • Upload limits enforced per external user
  • Session expires after upload
  • Uses external upload mixin