Skeleton

Select file or drag here

import { FileUpload } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  return (
    <FileUpload name="example" accept="image/*" maxFiles={2} onFileChange={console.log} onFileReject={console.error} classes="w-full" />
  );
};

Select file or drag here

Attach up to 2 files.

import { FileUpload } from '@skeletonlabs/skeleton-react';
import { ImagePlus as IconDropzone, Paperclip as IconFile, XCircle as IconRemove } from 'lucide-react';

export const Page: React.FC = () => {
  return (
    <FileUpload
      name="example"
      accept="image/*"
      maxFiles={2}
      subtext="Attach up to 2 files."
      iconInterface={<IconDropzone className="size-8" />}
      iconFile={<IconFile className="size-4" />}
      iconFileRemove={<IconRemove className="size-4" />}
      onFileChange={console.log}
      onFileReject={console.error}
      classes="w-full"
    />
  );
};

Button

Use the children node to overwrite the default dropzone interface. Allow for a custom interface.

import { FileUpload } from '@skeletonlabs/skeleton-react';
import { Upload as IconUpload } from 'lucide-react';

export const Page: React.FC = () => {
  return (
    <FileUpload name="example-button" accept="image/*" onFileChange={console.log} maxFiles={2}>
      <button className="btn preset-filled">
        <IconUpload className="size-4" />
        <span>Select File</span>
      </button>
    </FileUpload>
  );
};

Disabled

Select file or drag here

Bind to API

You can optionally bind to the internal Zag component API to access additional methods such as clearFiles().

Select file or drag here

import { FileUpload, type FileUploadApi } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  // API Reference
  let apiRef: FileUploadApi;

  return (
    <section className="w-full space-y-4">
      <FileUpload name="example" accept="image/*" maxFiles={2} internalApi={(api) => (apiRef = api)} />
      <button
        type="button"
        className="btn preset-filled"
        onClick={() => {
          apiRef.clearFiles();
        }}
      >
        Clear Files
      </button>
    </section>
  );
};

RTL

Select file or drag here

import { FileUpload } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  return (
    <FileUpload
      name="example"
      accept="image/*"
      maxFiles={2}
      onFileChange={console.log}
      onFileReject={console.error}
      classes="w-full"
      dir="rtl"
    />
  );
};

Additional Features

Accepted File Formats

<FileUpload accept="image/*">
<FileUpload accept={"text/html": [".html", ".htm"]}>

File Validation

<FileUpload maxFiles={5}>
<FileUpload minFileSize={1024 * 1024 * 5}> {/* 5 mb */}
<FileUpload maxFileSize={1024 * 1024 * 10}> {/* 10 mb */}

Custom Validation

function validateFileSize(file) {
  if (file.size > 1024 * 1024 * 10) return ["FILE_TOO_LARGE"];
  return null;
}

<FileUpload validate={validateFileSize} onFileReject={console.error}>

Events

<FileUpload onFileChange={console.log}> {/* Triggers when files changed. */}
<FileUpload onFileAccept={console.log}> {/* Triggers when files are accepted. */}
<FileUpload onFileReject={console.error}> {/* Triggers when files are rejected. */}

Image Previews

function generatePreview(event) {
  const reader = new FileReader();
  reader.onload = (event) => {
    const image = event.target.result;
    // set the image as the src of an image element
  }
  reader.readAsDataURL(details.acceptedFiles[0]);
}

<FileUpload onFileChange={generatePreview}>

Miscellaneous

<FileUpload allowDrop> {/* Enable drag-and-drop */}
<FileUpload directory> {/* Enable dirctories */}
<FileUpload capture> {/* Enable media capture on mobile devices */}

API Reference

FileUpload

Property	Type	Description
`label`	string	Set the interface text value.
`subtext`	string	Set the interface subtext value.
`base`	string	Set root base classes
`classes`	string	Set root arbitrary classes
`interfaceBase`	string	Set interface base classes
`interfaceBg`	string	Set interface background classes
`interfaceBorder`	string	Set interface border classes
`interfaceBorderColor`	string	Set interface border color classes
`interfacePadding`	string	Set interface border classes
`interfaceRounded`	string	Set interface border radius classes
`interfaceClasses`	string	Set interface arbitrary classes
`interfaceIcon`	string	Set interface icon classes
`interfaceText`	string	Set interface text classes
`interfaceSubtext`	string	Set interface subtext classes
`filesListBase`	string	Set file list base classes
`filesListClasses`	string	Set file list arbitrary classes
`fileBase`	string	Set file base classes
`fileBg`	string	Set file background classes
`fileGap`	string	Set file gap classes
`filePadding`	string	Set file padding classes
`fileRounded`	string	Set file border-radius classes
`fileClasses`	string	Set file arbitrary classes
`fileIcon`	string	Set file icon classes
`fileName`	string	Set file name classes
`fileSize`	string	Set file size classes
`fileButton`	string	Set file button classes
`stateDisabled`	string	Set disabled state classes for the root.
`stateInvalid`	string	Set invalid state classes for the interface.
`stateDragging`	string	Set dragging state classes for the interface.
`iconInterface`	ReactNode	Provide an icon for the interface.
`iconFile`	ReactNode	Provide an icon proceeding each file.
`iconFileRemove`	ReactNode	Provide an icon for the remove file action.
`internalApi`		Binds the Zag API for external use.
`children`	ReactNode
`name`	string	The name of the underlying file input
`ids`		The ids of the elements. Useful for composition.
`translations`		The localized messages to use.
`accept`	Record<string, string[]> \| FileMimeType \| FileMimeType[]	The accept file types
`disabled`	boolean	Whether the file input is disabled
`required`	boolean	Whether the file input is required
`allowDrop`	boolean	Whether to allow drag and drop in the dropzone element Default: true
`maxFileSize`	number	The maximum file size in bytes Default: Infinity
`minFileSize`	number	The minimum file size in bytes Default: 0
`maxFiles`	number	The maximum number of files Default: 1
`validate`		Function to validate a file
`onFileChange`		Function called when the value changes, whether accepted or rejected
`onFileAccept`		Function called when the file is accepted
`onFileReject`		Function called when the file is rejected
`capture`	"user" \| "environment"	The default camera to use when capturing media
`directory`	boolean	Whether to accept directories, only works in webkit browsers
`invalid`	boolean	Whether the file input is invalid
`locale`	string	The current locale. Based on the BCP 47 definition. Default: "en-US"
`dir`	"ltr" \| "rtl"	The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.