tessl/npm-gradio--upload

File upload component for the Gradio machine learning web application framework

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Gradio Upload

Name: tessl/npm-gradio--upload
Author: tessl

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;
}