Media Intake Panel

A panel that lets users import multiple media files with validation, progress, cancellation, and preview.

Capabilities

File intake and validation

• Accepts images added via drag-and-drop or browse button; rejects non-images or files above 2 MB with inline error while leaving valid selections in queue @test

Upload progress and cancellation

• Starts uploading queued files with per-file progress display; canceling an in-progress file stops further progress and marks it canceled @test

Preview gallery

• Successfully uploaded images render as thumbnails; selecting a thumbnail opens a larger preview and clearing uploads removes all previews @test

Implementation

@generates

API

export type UploadStatus = 'queued' | 'uploading' | 'uploaded' | 'canceled' | 'error';

export interface QueuedMedia {
  id: string;
  name: string;
  size: number;
  type: string;
  status: UploadStatus;
  progress: number;
  previewUrl?: string;
  errorMessage?: string;
}

declare const MediaIntakePanel: DefineComponent<{
  uploadEndpoint: {
    type: StringConstructor;
    required: true;
  };
  accept?: string;
  maxFileSize?: number;
}, {}, any, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
  select: (files: QueuedMedia[]) => void;
  upload: (files: QueuedMedia[]) => void;
  error: (detail: { file: QueuedMedia; message: string }) => void;
  cancel: (file: QueuedMedia) => void;
  clear: () => void;
  preview: (file: QueuedMedia) => void;
}>;
export default MediaIntakePanel;

Dependencies { .dependencies }

primevue { .dependency }

UI toolkit providing upload and media presentation components.