or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-uppy--file-input

Simple UI of a file input button that works with Uppy right out of the box

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@uppy/file-input@4.2.x

To install, run

npx @tessl/cli install tessl/npm-uppy--file-input@4.2.0

index.mddocs/

@uppy/file-input

@uppy/file-input is a minimalist file input plugin for the Uppy file uploading ecosystem. It renders a simple button that triggers the browser's native file selection dialog when clicked, making it the most basic UI plugin available in Uppy's plugin architecture.

Package Information

  • Package Name: @uppy/file-input
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @uppy/file-input

Core Imports

import FileInput from "@uppy/file-input";
import type { FileInputOptions } from "@uppy/file-input";

For CommonJS:

const FileInput = require("@uppy/file-input");

Basic Usage

import Uppy from "@uppy/core";
import FileInput from "@uppy/file-input";

// Create Uppy instance
const uppy = new Uppy();

// Add FileInput plugin
uppy.use(FileInput, {
  target: '#upload-form',
  pretty: true,
  inputName: 'files[]'
});

// Listen for files
uppy.on('files-added', (files) => {
  console.log('Files selected:', files);
});

Architecture

@uppy/file-input follows Uppy's plugin architecture pattern:

  • Plugin Base: Extends UIPlugin from @uppy/core for DOM rendering capabilities
  • Lifecycle Management: Implements install() and uninstall() methods for proper cleanup
  • Event-Driven: Uses Uppy's event system to communicate file selection to the core
  • UI Rendering: Uses Preact for efficient DOM updates and component rendering
  • Localization: Supports i18n through Uppy's translation system

The plugin creates either a native file input or a styled button that triggers file selection, then processes selected files through Uppy's standard file handling pipeline.

Capabilities

FileInput Plugin Class

The main plugin class that integrates with Uppy Core to provide file input functionality.

import type { Uppy, Meta, Body, UIPlugin } from '@uppy/core';
import type { ComponentChild } from 'preact';

export default class FileInput<M extends Meta, B extends Body> extends UIPlugin<
  FileInputOptions,
  M,
  B
> {
  static VERSION: string;
  input: HTMLFileInputElement | null;
  
  constructor(uppy: Uppy<M, B>, opts?: FileInputOptions);
  
  addFiles(files: File[]): void;
  render(): ComponentChild;
  install(): void;
  uninstall(): void;
}

Usage:

import Uppy from "@uppy/core";
import FileInput from "@uppy/file-input";

const uppy = new Uppy();
const fileInput = new FileInput(uppy, {
  target: '#my-form',
  pretty: true,
  inputName: 'uploads[]'
});

uppy.use(fileInput);

Add Files Method

Programmatically adds files to the Uppy instance.

/**
 * Adds files to the Uppy instance
 * @param files - Array of File objects to add
 */
addFiles(files: File[]): void;

Usage:

// Manually add files (typically used internally)
const files = [new File(['content'], 'example.txt', { type: 'text/plain' })];
fileInput.addFiles(files);

Plugin Installation

Installs the plugin to the specified target element.

/**
 * Installs the plugin and mounts it to the target element
 */
install(): void;

/**
 * Removes the plugin from the DOM
 */
uninstall(): void;

Configuration Options

Configuration interface for customizing the FileInput plugin behavior.

import type { UIPluginOptions } from '@uppy/core';
import type { LocaleStrings } from '@uppy/utils/lib/Translator';

export interface FileInputOptions extends UIPluginOptions {
  /** Whether to show a styled button instead of native input (default: true) */
  pretty?: boolean;
  /** Name attribute for the file input element (default: 'files[]') */
  inputName?: string;
  /** Custom localization strings */
  locale?: LocaleStrings<FileInputLocale>;
}

interface FileInputLocale {
  strings: {
    chooseFiles: string;
  };
}

Usage:

uppy.use(FileInput, {
  target: '#upload-area',
  pretty: true,           // Show styled button
  inputName: 'documents[]', // Form input name
  locale: {
    strings: {
      chooseFiles: 'Select Files'  // Custom button text
    }
  }
});

Localization

Default locale configuration for internationalization support.

// Default locale configuration
interface FileInputLocale {
  strings: {
    chooseFiles: string;
  };
}

The default English locale provides:

{
  strings: {
    chooseFiles: 'Choose files'
  }
}

Custom Localization:

uppy.use(FileInput, {
  target: '#upload',
  locale: {
    strings: {
      chooseFiles: 'Dateien auswählen'  // German
    }
  }
});

Types

Core types used throughout the FileInput plugin.

// Core types from @uppy/core
export interface Meta {
  [key: string]: unknown;
}

export interface Body {
  [key: string]: unknown;
}

export interface Uppy<M extends Meta = Meta, B extends Body = Body> {
  // Core Uppy instance interface
  addFiles(files: Array<{ source: string; name: string; type: string; data: File }>): void;
  log(message: unknown): void;
  // ... other Uppy methods
}

export interface UIPluginOptions {
  id?: string;
  target?: string | Element;
}

// Internal types
interface HTMLFileInputElement extends HTMLInputElement {
  files: FileList;
}

type DefinePluginOpts<T, K extends keyof T> = T & Required<Pick<T, K>>;

Browser Compatibility

@uppy/file-input works in all modern browsers that support:

  • HTML5 File API
  • ES6+ features (when using TypeScript/ES modules)
  • Preact rendering (handled internally)

The plugin automatically handles:

  • Multiple file selection based on Uppy restrictions
  • File type filtering via the accept attribute
  • Input clearing after selection to enable re-selection of same files