# 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';
	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](/docs/get-started/fundamentals#provider-pattern) to gain access to 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

### FileUploadRootProps

| Property              | Default  | 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?            | 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.&#xA;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                                                                                       |

### FileUploadRootProviderProps

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

### FileUploadRootContextProps

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

### FileUploadLabelProps

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

### FileUploadDropzoneProps

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

### FileUploadTriggerProps

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

### FileUploadHiddenInputProps

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

### FileUploadItemGroupProps

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

### FileUploadItemProps

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

### FileUploadItemNameProps

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

### FileUploadItemSizeTextProps

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

### FileUploadItemDeleteTriggerProps

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