or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

drag-drop.mdindex.mdmodify-upload.mdupload-component.md
tile.json

index.mddocs/

Gradio Upload

Gradio Upload provides comprehensive file upload components for the Gradio machine learning web application framework. It enables file uploads through drag-and-drop interfaces and click-to-browse functionality with configurable file type restrictions, upload progress tracking, and file modification controls.

Package Information

  • Package Name: @gradio/upload
  • Package Type: npm
  • Language: TypeScript with Svelte components
  • Installation: npm install @gradio/upload

Core Imports

import { Upload, ModifyUpload, create_drag } from "@gradio/upload";
import type { FileData, Client } from "@gradio/client";
import type { I18nFormatter } from "@gradio/utils";

For CommonJS:

const { Upload, ModifyUpload, create_drag } = require("@gradio/upload");

Basic Usage

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

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

// Basic file upload component
<Upload
  filetype={["image", "video"]}
  file_count="multiple"
  root="https://api.example.com"
  upload={gradioClient.upload}
  stream_handler={gradioClient.stream}
  on:load={(event) => {
    console.log("Files uploaded:", event.detail);
  }}
  on:error={(event) => {
    console.error("Upload error:", event.detail);
  }}
>
  <div>Click to upload or drag files here</div>
</Upload>

Architecture

Gradio Upload is built around several key components:

  • Upload Component: Main file upload interface with drag-drop support, file validation, and progress tracking
  • ModifyUpload Component: File modification controls providing edit, clear, undo, and download actions
  • Upload Progress: Real-time upload progress visualization with server-sent events
  • Drag & Drop System: Reusable drag-drop utilities for file handling across components
  • Type Safety: Full TypeScript integration with Svelte component props and event handling

Capabilities

File Upload Interface

Main file upload component with comprehensive drag-and-drop support, file type validation, and progress tracking. Supports single files, multiple files, or directory uploads.

// Upload Component Props
interface UploadProps {
  filetype?: string | string[] | null;
  dragging?: boolean;
  boundedheight?: boolean;
  center?: boolean;
  flex?: boolean;
  file_count?: "single" | "multiple" | "directory";
  disable_click?: boolean;
  root: string;
  hidden?: boolean;
  format?: "blob" | "file";
  uploading?: boolean;
  show_progress?: boolean;
  max_file_size?: number | null;
  upload: Client["upload"];
  stream_handler: Client["stream"];
  icon_upload?: boolean;
  height?: number | string | undefined;
  aria_label?: string | undefined;
}

File Upload Interface

File Modification Controls

File modification component providing standardized edit, clear, undo, and download actions with internationalization support.

interface ModifyUploadProps {
  editable?: boolean;
  undoable?: boolean;
  download?: string | null;
  i18n: I18nFormatter;
}

File Modification Controls

Drag & Drop Utilities

Reusable drag-and-drop functionality for creating custom file upload interfaces with configurable file type acceptance and upload modes.

function create_drag(): {
  drag: (node: HTMLElement, options: DragActionOptions) => ActionReturn;
  open_file_upload: () => void;
};

interface DragActionOptions {
  disable_click?: boolean;
  accepted_types?: string | string[] | null;
  mode?: "single" | "multiple" | "directory";
  on_drag_change?: (dragging: boolean) => void;
  on_files?: (files: File[]) => void;
}

Drag & Drop Utilities

External Dependencies

This package integrates with the Gradio ecosystem and requires:

  • @gradio/client: File data types, upload functionality, and streaming capabilities
  • @gradio/atoms: UI components (IconButton, IconButtonWrapper)
  • @gradio/icons: Icon components (Edit, Clear, Undo, Download)
  • @gradio/utils: Internationalization utilities (I18nFormatter)
  • @gradio/wasm: WebAssembly utilities (DownloadLink component)
  • svelte: Component framework (peer dependency)

Core Types

// From @gradio/client
interface FileData {
  path: string;
  orig_name?: string;
  blob?: File;
  size?: number;
  mime_type?: string;
  is_stream?: boolean;
}

interface Client {
  upload: (
    file_data: FileData[],
    root: string,
    upload_id: string,
    max_file_size?: number
  ) => Promise<(FileData | null)[]>;
  stream: (url: URL) => Promise<{
    onmessage: (event: MessageEvent) => void;
    close: () => void;
  }>;
}

// From @gradio/utils
interface I18nFormatter {
  (key: string, ...args: any[]): string;
}