File Upload · Skeleton

Select file or drag here.

tsx

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

export default function Default() {
	return (
		<FileUpload>
			<FileUpload.Dropzone>
				<FileIcon className="size-10" />
				<span>Select file or drag here.</span>
				<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
				<FileUpload.HiddenInput />
			</FileUpload.Dropzone>
			<FileUpload.ItemGroup>
				<FileUpload.Context>
					{(fileUpload) =>
						fileUpload.acceptedFiles.map((file) => (
							<FileUpload.Item key={file.name} file={file}>
								<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
								<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
								<FileUpload.ItemDeleteTrigger />
							</FileUpload.Item>
						))
					}
				</FileUpload.Context>
			</FileUpload.ItemGroup>
		</FileUpload>
	);
}

Select file or drag here.

svelte

<script lang="ts">
	import { FileIcon } from '@lucide/svelte';
	import { FileUpload } from '@skeletonlabs/skeleton-svelte';
</script>

<FileUpload>
	<FileUpload.Dropzone>
		<FileIcon class="size-10" />
		<span>Select file or drag here.</span>
		<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
		<FileUpload.HiddenInput />
	</FileUpload.Dropzone>
	<FileUpload.ItemGroup>
		<FileUpload.Context>
			{#snippet children(fileUpload)}
				{#each fileUpload().acceptedFiles as file (file.name)}
					<FileUpload.Item {file}>
						<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
						<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
						<FileUpload.ItemDeleteTrigger />
					</FileUpload.Item>
				{/each}
			{/snippet}
		</FileUpload.Context>
	</FileUpload.ItemGroup>
</FileUpload>

Disabled

Set the disabled prop to enable the disabled state.

tsx

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

export default function Disabled() {
	return (
		<FileUpload disabled>
			<FileUpload.Dropzone>
				<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
				<FileUpload.HiddenInput />
			</FileUpload.Dropzone>
			<FileUpload.ItemGroup>
				<FileUpload.Context>
					{(fileUpload) =>
						fileUpload.acceptedFiles.map((file) => (
							<FileUpload.Item key={file.name} file={file}>
								<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
								<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
								<FileUpload.ItemDeleteTrigger />
							</FileUpload.Item>
						))
					}
				</FileUpload.Context>
			</FileUpload.ItemGroup>
		</FileUpload>
	);
}

svelte

<script lang="ts">
	import { FileUpload } from '@skeletonlabs/skeleton-svelte';
</script>

<FileUpload disabled={true}>
	<FileUpload.Dropzone>
		<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
		<FileUpload.HiddenInput />
	</FileUpload.Dropzone>
	<FileUpload.ItemGroup>
		<FileUpload.Context>
			{#snippet children(fileUpload)}
				{#each fileUpload().acceptedFiles as file (file.name)}
					<FileUpload.Item {file}>
						<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
						<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
						<FileUpload.ItemDeleteTrigger />
					</FileUpload.Item>
				{/each}
			{/snippet}
		</FileUpload.Context>
	</FileUpload.ItemGroup>
</FileUpload>

Button Only

Replace the interface with a simple “browse” button.

tsx

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

export default function Button() {
	return (
		<FileUpload className="w-fit">
			<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
			<FileUpload.HiddenInput />
		</FileUpload>
	);
}

svelte

<script lang="ts">
	import { FileUpload } from '@skeletonlabs/skeleton-svelte';
</script>

<FileUpload class="w-fit" onFileAccept={console.log}>
	<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
	<FileUpload.HiddenInput />
</FileUpload>

Provider Pattern

Use the Provider Pattern to gain access to the inner component APIs.

example.png
4 bytes

tsx

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

export default function ClearFiles() {
	const fileUpload = useFileUpload({
		defaultAcceptedFiles: [new File(['file'], 'example.png', { type: 'image/png' })],
	});
	return (
		<div className="grid gap-4 w-full">
			<FileUpload.Provider value={fileUpload}>
				<FileUpload.Dropzone>
					<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
					<FileUpload.HiddenInput />
				</FileUpload.Dropzone>
				<FileUpload.ItemGroup>
					<FileUpload.Context>
						{(fileUpload) =>
							fileUpload.acceptedFiles.map((file) => (
								<FileUpload.Item key={file.name} file={file}>
									<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
									<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
									<FileUpload.ItemDeleteTrigger />
								</FileUpload.Item>
							))
						}
					</FileUpload.Context>
				</FileUpload.ItemGroup>
			</FileUpload.Provider>

			{/* Clear Button */}
			<div className="card p-4 preset-outlined-primary-200-800 flex justify-center items-center">
				<button className="btn preset-filled-primary-500" onClick={() => fileUpload.clearFiles()}>
					Clear Files
				</button>
			</div>
		</div>
	);
}

example.png

4 bytes

svelte

<script lang="ts">
	import { FileUpload, useFileUpload } from '@skeletonlabs/skeleton-svelte';

	const id = $props.id();
	const fileUpload = useFileUpload({
		id,
		defaultAcceptedFiles: [new File(['file'], 'example.png', { type: 'image/png' })],
	});
</script>

<div class="grid gap-4 w-full">
	<FileUpload.Provider value={fileUpload}>
		<FileUpload.Dropzone>
			<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
			<FileUpload.HiddenInput />
		</FileUpload.Dropzone>
		<FileUpload.ItemGroup>
			<FileUpload.Context>
				{#snippet children(fileUpload)}
					{#each fileUpload().acceptedFiles as file (file.name)}
						<FileUpload.Item {file}>
							<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
							<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
							<FileUpload.ItemDeleteTrigger />
						</FileUpload.Item>
					{/each}
				{/snippet}
			</FileUpload.Context>
		</FileUpload.ItemGroup>
	</FileUpload.Provider>

	<!-- Clear Button -->
	<div class="card p-4 preset-outlined-primary-200-800 flex justify-center items-center">
		<button class="btn preset-filled-primary-500" onclick={() => fileUpload().clearFiles()}>Clear Files</button>
	</div>
</div>

Direction

Set the text direction (ltr or rtl) using the dir prop.

Label

tsx

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

export default function Dir() {
	return (
		<FileUpload dir="rtl">
			<FileUpload.Label>Label</FileUpload.Label>
			<FileUpload.Dropzone>
				<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
				<FileUpload.HiddenInput />
			</FileUpload.Dropzone>
			<FileUpload.ItemGroup>
				<FileUpload.Context>
					{(fileUpload) =>
						fileUpload.acceptedFiles.map((file) => (
							<FileUpload.Item key={file.name} file={file}>
								<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
								<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
								<FileUpload.ItemDeleteTrigger />
							</FileUpload.Item>
						))
					}
				</FileUpload.Context>
			</FileUpload.ItemGroup>
		</FileUpload>
	);
}

Label

svelte

<script lang="ts">
	import { FileUpload } from '@skeletonlabs/skeleton-svelte';
</script>

<FileUpload dir="rtl">
	<FileUpload.Label>Label</FileUpload.Label>
	<FileUpload.Dropzone>
		<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
		<FileUpload.HiddenInput />
	</FileUpload.Dropzone>
	<FileUpload.ItemGroup>
		<FileUpload.Context>
			{#snippet children(fileUpload)}
				{#each fileUpload().acceptedFiles as file (file.name)}
					<FileUpload.Item {file}>
						<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
						<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
						<FileUpload.ItemDeleteTrigger />
					</FileUpload.Item>
				{/each}
			{/snippet}
		</FileUpload.Context>
	</FileUpload.ItemGroup>
</FileUpload>

API Reference

Root

txt

flex flex-col gap-2 w-full data-disabled:disabled

Prop	Default	Type
`name`	—	string \| undefined The name of the underlying file input
`ids`	—	Partial<{ root: string; dropzone: string; hiddenInput: string; trigger: string; label: string; item: (id: string) => string; itemName: (id: string) => string; itemSizeText: (id: string) => string; itemPreview: (id: string) => string; }> \| undefined The ids of the elements. Useful for composition.
`translations`	—	IntlTranslations \| undefined The localized messages to use.
`accept`	—	Record<string, string[]> \| FileMimeType \| FileMimeType[] \| undefined The accept file types
`disabled`	—	boolean \| undefined Whether the file input is disabled
`required`	—	boolean \| undefined Whether the file input is required
`allowDrop`	true	boolean \| undefined Whether to allow drag and drop in the dropzone element
`maxFileSize`	Infinity	number \| undefined The maximum file size in bytes
`minFileSize`	0	number \| undefined The minimum file size in bytes
`maxFiles`	1	number \| undefined The maximum number of files
`preventDocumentDrop`	true	boolean \| undefined Whether to prevent the drop event on the document
`validate`	—	((file: File, details: FileValidateDetails) => FileError[] \| null) \| undefined Function to validate a file
`defaultAcceptedFiles`	—	File[] \| undefined The default accepted files when rendered. Use when you don't need to control the accepted files of the input.
`acceptedFiles`	—	File[] \| undefined The controlled accepted files
`onFileChange`	—	((details: FileChangeDetails) => void) \| undefined Function called when the value changes, whether accepted or rejected
`onFileAccept`	—	((details: FileAcceptDetails) => void) \| undefined Function called when the file is accepted
`onFileReject`	—	((details: FileRejectDetails) => void) \| undefined Function called when the file is rejected
`capture`	—	"user" \| "environment" \| undefined The default camera to use when capturing media
`directory`	—	boolean \| undefined Whether to accept directories, only works in webkit browsers
`invalid`	—	boolean \| undefined Whether the file input is invalid
`transformFiles`	—	((files: File[]) => Promise<File[]>) \| undefined Function to transform the accepted files to apply transformations
`locale`	"en-US"	string \| undefined The current locale. Based on the BCP 47 definition.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	FileUploadApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(fileUpload: FileUploadApi<PropTypes>) => ReactNode

Label

txt

label-text

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"label">) => Element) \| undefined Render the element yourself

Dropzone

txt

card px-4 py-10 border border-dashed border-surface-200-800 flex flex-col justify-center items-center gap-2 data-dragging:preset-tonal

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Trigger

txt

btn preset-filled

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

HiddenInput

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"input">) => Element) \| undefined Render the element yourself

ItemGroup

txt

flex flex-col gap-2

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"ul">) => Element) \| undefined Render the element yourself

Item

txt

grid grid-cols-[auto_1fr_auto] gap-4 items-center preset-tonal px-4 py-2 rounded

Prop	Default	Type
`file`	—	File
`type`	—	ItemType \| undefined
`element`	—	((attributes: HTMLAttributes<"li">) => Element) \| undefined Render the element yourself

ItemName

txt

text-sm

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

ItemSizeText

txt

text-xs opacity-60

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

ItemDeleteTrigger

txt

btn-icon

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Root

txt

flex flex-col gap-2 w-full data-disabled:disabled

Prop	Default	Type
`name`	—	string \| undefined The name of the underlying file input
`ids`	—	Partial<{ root: string; dropzone: string; hiddenInput: string; trigger: string; label: string; item: (id: string) => string; itemName: (id: string) => string; itemSizeText: (id: string) => string; itemPreview: (id: string) => string; }> \| undefined The ids of the elements. Useful for composition.
`translations`	—	IntlTranslations \| undefined The localized messages to use.
`accept`	—	Record<string, string[]> \| FileMimeType \| FileMimeType[] \| undefined The accept file types
`disabled`	—	boolean \| undefined Whether the file input is disabled
`required`	—	boolean \| undefined Whether the file input is required
`allowDrop`	true	boolean \| undefined Whether to allow drag and drop in the dropzone element
`maxFileSize`	Infinity	number \| undefined The maximum file size in bytes
`minFileSize`	0	number \| undefined The minimum file size in bytes
`maxFiles`	1	number \| undefined The maximum number of files
`preventDocumentDrop`	true	boolean \| undefined Whether to prevent the drop event on the document
`validate`	—	((file: File, details: FileValidateDetails) => FileError[] \| null) \| undefined Function to validate a file
`defaultAcceptedFiles`	—	File[] \| undefined The default accepted files when rendered. Use when you don't need to control the accepted files of the input.
`acceptedFiles`	—	File[] \| undefined The controlled accepted files
`onFileChange`	—	((details: FileChangeDetails) => void) \| undefined Function called when the value changes, whether accepted or rejected
`onFileAccept`	—	((details: FileAcceptDetails) => void) \| undefined Function called when the file is accepted
`onFileReject`	—	((details: FileRejectDetails) => void) \| undefined Function called when the file is rejected
`capture`	—	"user" \| "environment" \| undefined The default camera to use when capturing media
`directory`	—	boolean \| undefined Whether to accept directories, only works in webkit browsers
`invalid`	—	boolean \| undefined Whether the file input is invalid
`transformFiles`	—	((files: File[]) => Promise<File[]>) \| undefined Function to transform the accepted files to apply transformations
`locale`	"en-US"	string \| undefined The current locale. Based on the BCP 47 definition.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	() => FileUploadApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => FileUploadApi<PropTypes>]>

Label

txt

label-text

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

Dropzone

txt

card px-4 py-10 border border-dashed border-surface-200-800 flex flex-col justify-center items-center gap-2 data-dragging:preset-tonal

Prop	Default	Type
`disableClick`	—	boolean \| undefined Whether to disable the click event on the dropzone
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Trigger

txt

btn preset-filled

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

HiddenInput

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself

ItemGroup

txt

flex flex-col gap-2

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"ul">]> \| undefined Render the element yourself

Item

txt

grid grid-cols-[auto_1fr_auto] gap-4 items-center preset-tonal px-4 py-2 rounded

Prop	Default	Type
`file`	—	File
`type`	—	ItemType \| undefined
`element`	—	Snippet<[HTMLAttributes<"li">]> \| undefined Render the element yourself

ItemName

txt

text-sm

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ItemSizeText

txt

text-xs opacity-60

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ItemDeleteTrigger

txt

btn-icon

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself