Rich Inputfile

Enhanced file input with drag and drop, previews, and validation.

← Back to components GitHub Repo Playground

Basic Usage

Drag and drop or click to select a file.

Select a file...

<rich-inputfile label="Upload File"></rich-inputfile>

Image Upload with Preview

Images automatically show a thumbnail preview.

<rich-inputfile
  label="Upload Image"
  allowed-extensions="jpg,jpeg,png,gif,webp"
></rich-inputfile>

File Type Restriction

Only allow specific file types.

Only PDF and Word documents allowed

<rich-inputfile
  label="Upload Document"
  allowed-extensions="pdf,doc,docx"
></rich-inputfile>

Size Limit

Restrict maximum file size.

Maximum 1MB file size

<rich-inputfile
  label="Upload (max 1MB)"
  max-size="1048576"
></rich-inputfile>

No Preview

Disable thumbnail preview for images.

<rich-inputfile
  label="Upload File (no preview)"
  show-preview="false"
></rich-inputfile>

Disabled State

Disable the file input.

<rich-inputfile label="Upload (disabled)" disabled></rich-inputfile>

No Dropzone

Click-only mode without drag and drop.

<rich-inputfile
  label="Click to Upload"
  dropzone="false"
></rich-inputfile>

Custom Preview Size

Adjust the thumbnail preview size.

<rich-inputfile
  label="Large Preview"
  preview-size="100"
></rich-inputfile>

Programmatic Control

Control the component via JavaScript.

Use buttons to interact

// Get file
const file = inputfile.getFile();

// Get as ArrayBuffer
const buffer = await inputfile.getFileArrayBuffer();

// Get as Data URL
const dataUrl = await inputfile.getFileDataURL();

// Clear file
inputfile.clear();