or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

drag-drop.md index.md modify-upload.md upload-component.md

tile.json

File Modification Controls

The ModifyUpload component provides standardized file modification controls with edit, clear, undo, and download actions. It integrates with Gradio's internationalization system and icon library to provide consistent UI patterns across applications.

Capabilities

ModifyUpload Component

File modification controls component with configurable action buttons and internationalization support.

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

// Component Props Interface
interface ModifyUploadProps {
  /** Show edit button */
  editable?: boolean;
  /** Show undo button */
  undoable?: boolean;
  /** Download URL for download button, null to hide download button */
  download?: string | null;
  /** Internationalization formatter for button labels */
  i18n: I18nFormatter;
}

Component Events

The ModifyUpload component dispatches events for user actions:

// Event Handlers
interface ModifyUploadEvents {
  /** Fired when edit button is clicked */
  edit: (event: CustomEvent<never>) => void;
  /** Fired when clear button is clicked */
  clear: (event: CustomEvent<never>) => void;
  /** Fired when undo button is clicked */
  undo: (event: CustomEvent<never>) => void;
}

Usage Examples:

// Basic modification controls
<ModifyUpload
  editable={true}
  undoable={false}
  download={null}
  i18n={i18nFormatter}
  on:edit={() => console.log("Edit clicked")}
  on:clear={() => console.log("Clear clicked")}
/>

// Full modification controls with download
<ModifyUpload
  editable={true}
  undoable={true}
  download="https://example.com/file.pdf"
  i18n={i18nFormatter}
  on:edit={handleEdit}
  on:clear={handleClear}
  on:undo={handleUndo}
>
  <!-- Optional additional buttons can be slotted here -->
  <CustomButton>Custom Action</CustomButton>
</ModifyUpload>

// Minimal controls (only clear button)
<ModifyUpload
  editable={false}
  undoable={false}
  download={null}
  i18n={i18nFormatter}
  on:clear={handleClear}
/>

Button Configuration

The component conditionally renders buttons based on props:

Edit Button: Rendered when editable={true}
- Uses Edit icon from @gradio/icons
- Label from i18n("common.edit")
- Dispatches "edit" event on click
Undo Button: Rendered when undoable={true}
- Uses Undo icon from @gradio/icons
- Label from i18n("common.undo")
- Dispatches "undo" event on click
Download Button: Rendered when download prop is provided
- Uses Download icon from @gradio/icons
- Label from i18n("common.download")
- Wrapped in DownloadLink component from @gradio/wasm
Clear Button: Always rendered
- Uses Clear icon from @gradio/icons
- Label from i18n("common.clear")
- Dispatches "clear" event on click
- Event propagation is stopped to prevent parent interactions

Internationalization

The component requires an I18nFormatter for translating button labels:

// Required i18n keys
interface RequiredI18nKeys {
  "common.edit": string;    // Edit button label
  "common.undo": string;    // Undo button label
  "common.download": string; // Download button label
  "common.clear": string;   // Clear button label
}

// Example i18n implementation
const i18nFormatter: I18nFormatter = (key: string) => {
  const translations = {
    "common.edit": "Edit",
    "common.undo": "Undo",
    "common.download": "Download",
    "common.clear": "Clear"
  };
  return translations[key] || key;
};

Styling and Layout

The component uses IconButtonWrapper from @gradio/atoms to provide consistent layout and styling. Additional buttons can be added through the default slot.

Integration Patterns

Common integration patterns with the Upload component:

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

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

// File upload with modification controls
<Upload
  filetype="image"
  root="https://api.example.com"
  upload={gradioClient.upload}
  stream_handler={gradioClient.stream}
  on:load={handleFileLoad}
/>

{#if uploadedFile}
  <ModifyUpload
    editable={true}
    undoable={canUndo}
    download={uploadedFile.url}
    i18n={i18nFormatter}
    on:edit={() => setEditMode(true)}
    on:clear={() => clearFile()}
    on:undo={() => undoLastAction()}
  />
{/if}

Event Handling

All event handlers receive CustomEvent objects without detail data:

function handleEdit(event: CustomEvent<never>) {
  // Edit logic here
  console.log("Edit requested");
}

function handleClear(event: CustomEvent<never>) {
  // Clear logic here - event propagation is already stopped
  console.log("Clear requested");
}

function handleUndo(event: CustomEvent<never>) {
  // Undo logic here
  console.log("Undo requested");
}