or run

npx @tessl/cli init
Log in

Version

Files

docs

api-services.mdbase-classes.mdcomposables.mdconfiguration.mdindex.mdutilities.md

evals

scenario-1

rubric.jsontask.md

scenario-10

rubric.jsontask.md

scenario-2

rubric.jsontask.md

scenario-3

rubric.jsontask.md

scenario-4

rubric.jsontask.md

scenario-5

rubric.jsontask.md

scenario-6

rubric.jsontask.md

scenario-7

rubric.jsontask.md

scenario-8

rubric.jsontask.md

scenario-9

rubric.jsontask.md
tile.json

task.mdevals/scenario-5/

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.