File Upload - 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`	React.ReactNode	Provide an icon for the interface.
`iconFile`	React.ReactNode	Provide an icon proceeding each file.
`iconFileRemove`	React.ReactNode	Provide an icon for the remove file action.
`children`	React.ReactNode	-
`required`	boolean	Whether the file input is required
`name`	string	The name of the underlying file input
`dir`	string	The document's text/writing direction. Default: ltr
`directory`	boolean	Whether to accept directories, only works in webkit browsers
`getRootNode`	object	A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`disabled`	boolean	Whether the file input is disabled
`accept`	(unknown)	The accept file types
`capture`	string	The default camera to use when capturing media
`locale`	string	The current locale. Based on the BCP 47 definition. Default: en-US
`ids`	Partial<...>	The ids of the elements. Useful for composition.
`translations`	IntlTranslations	The localized messages to use.
`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`	object	Function to validate a file
`onFileChange`	object	Function called when the value changes, whether accepted or rejected
`onFileAccept`	object	Function called when the file is accepted
`onFileReject`	object	Function called when the file is rejected