File Upload Interface

// Svelte Component Import
import { Upload } from "@gradio/upload";

// Component Props Interface
interface UploadProps {
  /** Accepted file types - string, array of strings, or null for any */
  filetype?: string | string[] | null;
  /** Current dragging state indicator */
  dragging?: boolean;
  /** Apply bounded height styling */
  boundedheight?: boolean;
  /** Center content alignment */
  center?: boolean;
  /** Enable flex layout styling */
  flex?: boolean;
  /** Upload mode - single file, multiple files, or directory */
  file_count?: "single" | "multiple" | "directory";
  /** Disable click-to-upload functionality */
  disable_click?: boolean;
  /** Server root URL for uploads */
  root: string;
  /** Hide the upload component */
  hidden?: boolean;
  /** File format handling mode */
  format?: "blob" | "file";
  /** Current upload state indicator */
  uploading?: boolean;
  /** Show upload progress visualization */
  show_progress?: boolean;
  /** Maximum file size limit in bytes */
  max_file_size?: number | null;
  /** Upload function from @gradio/client */
  upload: Client["upload"];
  /** Stream handler from @gradio/client for progress tracking */
  stream_handler: Client["stream"];
  /** Enable icon mode styling */
  icon_upload?: boolean;
  /** Component height (number in pixels or CSS string) */
  height?: number | string | undefined;
  /** Accessibility label for screen readers */
  aria_label?: string | undefined;
}

/**
 * Programmatically open the file picker dialog
 */
export function open_upload(): void;

/**
 * Handle clipboard paste for image files
 * Automatically extracts image data from clipboard and processes it
 */
export function paste_clipboard(): void;

/**
 * Programmatically open file upload dialog (alternative method)
 */
export function open_file_upload(): void;

/**
 * Load and process files programmatically
 * @param files - Array of File or Blob objects to process
 * @returns Promise resolving to processed FileData array or void
 */
export async function load_files(
  files: File[] | Blob[]
): Promise<(FileData | null)[] | void>;

/**
 * Handle drag-and-drop file loading
 * @param e - DragEvent containing dropped files
 */
export async function load_files_from_drop(e: DragEvent): Promise<void>;

/**
 * Handle file upload from file input selection
 * @param files - Array of Files from file input or drag-drop
 */
async function load_files_from_upload(files: File[]): Promise<void>;

// Event Handlers
interface UploadEvents {
  /** Fired when files are successfully loaded and processed */
  load: (event: CustomEvent<FileData | FileData[]>) => void;
  /** Fired when upload errors occur */
  error: (event: CustomEvent<string>) => void;
}

import { Upload } from "@gradio/upload";
import { client } from "@gradio/client";
import type { Client } from "@gradio/client";

const gradioClient: Client = await client("https://api.example.com");

// Basic single file upload
<Upload
  filetype="image"
  file_count="single"
  root="https://api.example.com"
  upload={gradioClient.upload}
  stream_handler={gradioClient.stream}
  on:load={(event) => {
    console.log("Single file uploaded:", event.detail);
  }}
>
  <div>Click to upload an image</div>
</Upload>

// Multiple file upload with restrictions
<Upload
  filetype={["image/jpeg", "image/png", ".pdf"]}
  file_count="multiple"
  max_file_size={10485760} // 10MB
  root="https://api.example.com"
  upload={gradioClient.upload}
  stream_handler={gradioClient.stream}
  on:load={(event) => {
    console.log("Multiple files uploaded:", event.detail);
  }}
  on:error={(event) => {
    console.error("Upload failed:", event.detail);
  }}
>
  <div>Drop multiple files here or click to browse</div>
</Upload>

// Directory upload
<Upload
  file_count="directory"
  root="https://api.example.com"
  upload={gradioClient.upload}
  stream_handler={gradioClient.stream}
  on:load={(event) => {
    console.log("Directory uploaded:", event.detail);
  }}
>
  <div>Select a folder to upload</div>
</Upload>

// Clipboard paste support
<Upload
  filetype="clipboard"
  root="https://api.example.com"
  upload={gradioClient.upload}
  stream_handler={gradioClient.stream}
  on:load={(event) => {
    console.log("Pasted from clipboard:", event.detail);
  }}
>
  <div>Paste image from clipboard</div>
</Upload>

// Single file type
filetype="image"          // Accepts image/*
filetype=".pdf"           // Accepts .pdf files
filetype="image/jpeg"     // Accepts only JPEG images

// Multiple file types
filetype={["image", "video"]}           // Accepts image/* and video/*
filetype={[".pdf", ".doc", ".docx"]}    // Accepts specific extensions
filetype={["image/jpeg", "image/png"]}  // Accepts specific MIME types

// Special values
filetype={null}           // Accepts any file type
filetype="*"              // Accepts any file type
filetype="file/*"         // Accepts any file type