# File Upload
A component for uploading files with drag-and-drop and browse support.

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

<FileUpload>
	<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>

```

## Custom Content

Supply your own text and icons within the dropzone.

```svelte
<script lang="ts">
	import FileIcon from '@lucide/svelte/icons/file';
	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

```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

```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>

```

## Clear Files



Use the `Provider` pattern to access the `clearFiles` method.

```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>

	<button class="btn preset-filled hover:preset-filled-error-500 w-fit" onclick={() => fileUpload().clearFiles()}>Clear Files</button>
</div>

```

## Direction

```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

### FileUploadRoot

| Property | Type | Description |
| --- | --- | --- |
| `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` | boolean | undefined | Whether to allow drag and drop in the dropzone element Default: true |
| `maxFileSize` | number | undefined | The maximum file size in bytes Default: Infinity |
| `minFileSize` | number | undefined | The minimum file size in bytes Default: 0 |
| `maxFiles` | number | undefined | The maximum number of files Default: 1 |
| `preventDocumentDrop` | boolean | undefined | Whether to prevent the drop event on the document Default: true |
| `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` | string | undefined | The current locale. Based on the BCP 47 definition. Default: "en-US" |
| `dir` | "ltr" | "rtl" | undefined | The document's text/writing direction. Default: "ltr" |
| `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 |

### FileUploadRootProvider

| Property | Type | Description |
| --- | --- | --- |
| `value`* | () => FileUploadApi<PropTypes> |  |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |

### FileUploadRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | Snippet<[() => FileUploadApi<PropTypes>]> |  |

### FileUploadLabel

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"label">]> | undefined | Render the element yourself |

### FileUploadDropzone

| Property | Type | Description |
| --- | --- | --- |
| `disableClick` | boolean | undefined | Whether to disable the click event on the dropzone |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |

### FileUploadTrigger

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"button">]> | undefined | Render the element yourself |

### FileUploadHiddenInput

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"input">]> | undefined | Render the element yourself |

### FileUploadItemGroup

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"ul">]> | undefined | Render the element yourself |

### FileUploadItem

| Property | Type | Description |
| --- | --- | --- |
| `file`* | File |  |
| `type` | ItemType | undefined |  |
| `element` | Snippet<[HTMLAttributes<"li">]> | undefined | Render the element yourself |

### FileUploadItemName

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |

### FileUploadItemSizeText

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |

### FileUploadItemDeleteTrigger

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"button">]> | undefined | Render the element yourself |