File Upload

A component that allows users to select and upload files through drag and drop or file browser.

<script setup lang="ts">
import { ref } from 'vue'
import { FileUpload } from '@destyler-ui/vue'

const testProps = ref<string[]>([])

// Create a mock image file for testing purposes (synchronously)
function createMockImageFile(): File {
  // Create a small 1x1 transparent PNG as a base64 data URL
  const base64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='
  const byteCharacters = atob(base64Data)
  const byteNumbers = new Array(byteCharacters.length)
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i)
  }
  const byteArray = new Uint8Array(byteNumbers)
  const blob = new Blob([byteArray], { type: 'image/png' })
  return new File([blob], 'test-image.png', { type: 'image/png' })
}

const mockImageFile = createMockImageFile()
</script>

<template>
  <FileUpload.Root v-model="testProps">
    <FileUpload.Dropzone>
      <FileUpload.Label>Drag your file(s) here</FileUpload.Label>
    </FileUpload.Dropzone>
    <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
    <FileUpload.ClearTrigger>Clear</FileUpload.ClearTrigger>
    <FileUpload.ItemGroup>
      <FileUpload.Context v-slot="api">
        <FileUpload.Item v-for="file in api.acceptedFiles" :key="file.name as string" :file="file">
          <FileUpload.ItemPreview>
            <FileUpload.ItemPreviewImage />
          </FileUpload.ItemPreview>
          <FileUpload.ItemName>{{ file.name }}</FileUpload.ItemName>
          <FileUpload.ItemSizeText>{{ api.getFileSize(file) }}</FileUpload.ItemSizeText>
          <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
        </FileUpload.Item>
      </FileUpload.Context>
      <!-- Static mock item for testing to ensure all parts are rendered -->
      <FileUpload.Item :file="mockImageFile">
        <FileUpload.ItemPreview>
          <FileUpload.ItemPreviewImage />
        </FileUpload.ItemPreview>
        <FileUpload.ItemName>{{ mockImageFile.name }}</FileUpload.ItemName>
        <FileUpload.ItemSizeText>1 KB</FileUpload.ItemSizeText>
        <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
      </FileUpload.Item>
    </FileUpload.ItemGroup>
    <FileUpload.HiddenInput />
  </FileUpload.Root>
</template>

import { useState } from 'react'
import { FileUpload } from '@destyler-ui/react'

// Create a mock image file for testing purposes (synchronously)
function createMockImageFile(): File {
  // Create a small 1x1 transparent PNG as a base64 data URL
  const base64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='
  const byteCharacters = atob(base64Data)
  const byteNumbers = Array.from({ length: byteCharacters.length })
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i)
  }
  const byteArray = new Uint8Array(byteNumbers)
  const blob = new Blob([byteArray], { type: 'image/png' })
  return new File([blob], 'test-image.png', { type: 'image/png' })
}

const mockImageFile = createMockImageFile()

export function Basic() {
  const [_files, setFiles] = useState<string[]>([])

  return (
    <FileUpload.Root onFileChange={details => setFiles(details.acceptedFiles.map(f => f.name))}>
      <FileUpload.Dropzone>
        <FileUpload.Label>Drag your file(s) here</FileUpload.Label>
      </FileUpload.Dropzone>
      <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
      <FileUpload.ClearTrigger>Clear</FileUpload.ClearTrigger>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {api => (
            <>
              {api.acceptedFiles.map(file => (
                <FileUpload.Item key={file.name} file={file}>
                  <FileUpload.ItemPreview>
                    <FileUpload.ItemPreviewImage />
                  </FileUpload.ItemPreview>
                  <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
                  <FileUpload.ItemSizeText>{api.getFileSize(file)}</FileUpload.ItemSizeText>
                  <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
                </FileUpload.Item>
              ))}
            </>
          )}
        </FileUpload.Context>
        {/* Static mock item for testing to ensure all parts are rendered */}
        <FileUpload.Item file={mockImageFile}>
          <FileUpload.ItemPreview>
            <FileUpload.ItemPreviewImage />
          </FileUpload.ItemPreview>
          <FileUpload.ItemName>{mockImageFile.name}</FileUpload.ItemName>
          <FileUpload.ItemSizeText>1 KB</FileUpload.ItemSizeText>
          <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
        </FileUpload.Item>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

import { FileUpload } from '@destyler-ui/solid/file-upload'
import { For } from 'solid-js'

export function Basic() {
  return (
    <FileUpload.Root maxFiles={5}>
      <FileUpload.Label>File Upload</FileUpload.Label>
      <FileUpload.Dropzone>Drag your file(s) here</FileUpload.Dropzone>
      <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {context => (
            <For each={context().acceptedFiles}>
              {file => (
                <FileUpload.Item file={file}>
                  <FileUpload.ItemPreview type="image/*">
                    <FileUpload.ItemPreviewImage />
                  </FileUpload.ItemPreview>
                  <FileUpload.ItemPreview type=".*">Any Icon</FileUpload.ItemPreview>
                  <FileUpload.ItemName />
                  <FileUpload.ItemSizeText />
                  <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
                </FileUpload.Item>
              )}
            </For>
          )}
        </FileUpload.Context>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

<script lang="ts">
  import { FileUpload } from '@destyler-ui/svelte'

  function createMockImageFile(): File {
    const data = atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==')
    const bytes = Uint8Array.from(data, (character) => character.charCodeAt(0))
    return new File([bytes], 'test-image.png', { type: 'image/png' })
  }

  const mockImageFile = createMockImageFile()
</script>

<FileUpload.Root>
  <FileUpload.Dropzone>
    <FileUpload.Label>Drag your file(s) here</FileUpload.Label>
  </FileUpload.Dropzone>
  <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
  <FileUpload.ClearTrigger>Clear</FileUpload.ClearTrigger>
  <FileUpload.ItemGroup>
    <FileUpload.Context>
      {#snippet render(api)}
        {#each api().acceptedFiles as file (`${file.name}-${file.lastModified}`)}
          <FileUpload.Item {file}>
            <FileUpload.ItemPreview>
              <FileUpload.ItemPreviewImage />
            </FileUpload.ItemPreview>
            <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
            <FileUpload.ItemSizeText>{api().getFileSize(file)}</FileUpload.ItemSizeText>
            <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
          </FileUpload.Item>
        {/each}
      {/snippet}
    </FileUpload.Context>
    <FileUpload.Item file={mockImageFile}>
      <FileUpload.ItemPreview>
        <FileUpload.ItemPreviewImage />
      </FileUpload.ItemPreview>
      <FileUpload.ItemName>{mockImageFile.name}</FileUpload.ItemName>
      <FileUpload.ItemSizeText>1 KB</FileUpload.ItemSizeText>
      <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
    </FileUpload.Item>
  </FileUpload.ItemGroup>
  <FileUpload.HiddenInput />
</FileUpload.Root>

Anatomy

<script setup lang="ts">
import { FileUpload } from '@destyler-ui/vue'
</script>

<template>
  <FileUpload.Root>
    <FileUpload.Label />
    <FileUpload.Dropzone>
      <FileUpload.Trigger />
    </FileUpload.Dropzone>
    <FileUpload.ItemGroup>
      <FileUpload.Item>
        <FileUpload.ItemPreview>
          <FileUpload.ItemPreviewImage />
        </FileUpload.ItemPreview>
        <FileUpload.ItemName />
        <FileUpload.ItemSizeText />
        <FileUpload.ItemDeleteTrigger />
      </FileUpload.Item>
    </FileUpload.ItemGroup>
    <FileUpload.ClearTrigger />
    <FileUpload.HiddenInput />
  </FileUpload.Root>
</template>

import { FileUpload } from '@destyler-ui/react'

export default function Basic() {
  return (
    <FileUpload.Root>
      <FileUpload.Label />
      <FileUpload.Dropzone>
        <FileUpload.Trigger />
      </FileUpload.Dropzone>
      <FileUpload.ItemGroup>
        <FileUpload.Item>
          <FileUpload.ItemPreview>
            <FileUpload.ItemPreviewImage />
          </FileUpload.ItemPreview>
          <FileUpload.ItemName />
          <FileUpload.ItemSizeText />
          <FileUpload.ItemDeleteTrigger />
        </FileUpload.Item>
      </FileUpload.ItemGroup>
      <FileUpload.ClearTrigger />
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

import { FileUpload } from '@destyler-ui/solid'
import { For } from 'solid-js'

export default function Basic() {
  return (
    <FileUpload.Root>
      <FileUpload.Label />
      <FileUpload.Dropzone>
        <FileUpload.Trigger />
      </FileUpload.Dropzone>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {api => (
            <For each={api().acceptedFiles}>
              {file => (
                <FileUpload.Item file={file}>
                  <FileUpload.ItemPreview type="image/*">
                    <FileUpload.ItemPreviewImage />
                  </FileUpload.ItemPreview>
                  <FileUpload.ItemName />
                  <FileUpload.ItemSizeText />
                  <FileUpload.ItemDeleteTrigger />
                </FileUpload.Item>
              )}
            </For>
          )}
        </FileUpload.Context>
      </FileUpload.ItemGroup>
      <FileUpload.ClearTrigger />
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

<script lang="ts">
  import { FileUpload } from '@destyler-ui/svelte'
</script>

<FileUpload.Root>
  <FileUpload.Dropzone>
    <FileUpload.Label>Drag your files here</FileUpload.Label>
  </FileUpload.Dropzone>
  <FileUpload.Trigger>Choose files</FileUpload.Trigger>
  <FileUpload.ClearTrigger>Clear</FileUpload.ClearTrigger>
  <FileUpload.ItemGroup>
    <FileUpload.Context>
      {#snippet render(api)}
        {#each api().acceptedFiles as file (file.name)}
          <FileUpload.Item {file}>
            <FileUpload.ItemPreview>
              <FileUpload.ItemPreviewImage />
            </FileUpload.ItemPreview>
            <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
            <FileUpload.ItemSizeText>{api().getFileSize(file)}</FileUpload.ItemSizeText>
            <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
          </FileUpload.Item>
        {/each}
      {/snippet}
    </FileUpload.Context>
  </FileUpload.ItemGroup>
  <FileUpload.HiddenInput />
</FileUpload.Root>

Examples

Basic

<script setup lang="ts">
import { ref } from 'vue'
import { FileUpload } from '@destyler-ui/vue'

const testProps = ref<string[]>([])

// Create a mock image file for testing purposes (synchronously)
function createMockImageFile(): File {
  // Create a small 1x1 transparent PNG as a base64 data URL
  const base64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='
  const byteCharacters = atob(base64Data)
  const byteNumbers = new Array(byteCharacters.length)
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i)
  }
  const byteArray = new Uint8Array(byteNumbers)
  const blob = new Blob([byteArray], { type: 'image/png' })
  return new File([blob], 'test-image.png', { type: 'image/png' })
}

const mockImageFile = createMockImageFile()
</script>

<template>
  <FileUpload.Root v-model="testProps">
    <FileUpload.Dropzone>
      <FileUpload.Label>Drag your file(s) here</FileUpload.Label>
    </FileUpload.Dropzone>
    <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
    <FileUpload.ClearTrigger>Clear</FileUpload.ClearTrigger>
    <FileUpload.ItemGroup>
      <FileUpload.Context v-slot="api">
        <FileUpload.Item v-for="file in api.acceptedFiles" :key="file.name as string" :file="file">
          <FileUpload.ItemPreview>
            <FileUpload.ItemPreviewImage />
          </FileUpload.ItemPreview>
          <FileUpload.ItemName>{{ file.name }}</FileUpload.ItemName>
          <FileUpload.ItemSizeText>{{ api.getFileSize(file) }}</FileUpload.ItemSizeText>
          <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
        </FileUpload.Item>
      </FileUpload.Context>
      <!-- Static mock item for testing to ensure all parts are rendered -->
      <FileUpload.Item :file="mockImageFile">
        <FileUpload.ItemPreview>
          <FileUpload.ItemPreviewImage />
        </FileUpload.ItemPreview>
        <FileUpload.ItemName>{{ mockImageFile.name }}</FileUpload.ItemName>
        <FileUpload.ItemSizeText>1 KB</FileUpload.ItemSizeText>
        <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
      </FileUpload.Item>
    </FileUpload.ItemGroup>
    <FileUpload.HiddenInput />
  </FileUpload.Root>
</template>

import { useState } from 'react'
import { FileUpload } from '@destyler-ui/react'

// Create a mock image file for testing purposes (synchronously)
function createMockImageFile(): File {
  // Create a small 1x1 transparent PNG as a base64 data URL
  const base64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='
  const byteCharacters = atob(base64Data)
  const byteNumbers = Array.from({ length: byteCharacters.length })
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i)
  }
  const byteArray = new Uint8Array(byteNumbers)
  const blob = new Blob([byteArray], { type: 'image/png' })
  return new File([blob], 'test-image.png', { type: 'image/png' })
}

const mockImageFile = createMockImageFile()

export function Basic() {
  const [_files, setFiles] = useState<string[]>([])

  return (
    <FileUpload.Root onFileChange={details => setFiles(details.acceptedFiles.map(f => f.name))}>
      <FileUpload.Dropzone>
        <FileUpload.Label>Drag your file(s) here</FileUpload.Label>
      </FileUpload.Dropzone>
      <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
      <FileUpload.ClearTrigger>Clear</FileUpload.ClearTrigger>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {api => (
            <>
              {api.acceptedFiles.map(file => (
                <FileUpload.Item key={file.name} file={file}>
                  <FileUpload.ItemPreview>
                    <FileUpload.ItemPreviewImage />
                  </FileUpload.ItemPreview>
                  <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
                  <FileUpload.ItemSizeText>{api.getFileSize(file)}</FileUpload.ItemSizeText>
                  <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
                </FileUpload.Item>
              ))}
            </>
          )}
        </FileUpload.Context>
        {/* Static mock item for testing to ensure all parts are rendered */}
        <FileUpload.Item file={mockImageFile}>
          <FileUpload.ItemPreview>
            <FileUpload.ItemPreviewImage />
          </FileUpload.ItemPreview>
          <FileUpload.ItemName>{mockImageFile.name}</FileUpload.ItemName>
          <FileUpload.ItemSizeText>1 KB</FileUpload.ItemSizeText>
          <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
        </FileUpload.Item>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

import { FileUpload } from '@destyler-ui/solid/file-upload'
import { For } from 'solid-js'

export function Basic() {
  return (
    <FileUpload.Root maxFiles={5}>
      <FileUpload.Label>File Upload</FileUpload.Label>
      <FileUpload.Dropzone>Drag your file(s) here</FileUpload.Dropzone>
      <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {context => (
            <For each={context().acceptedFiles}>
              {file => (
                <FileUpload.Item file={file}>
                  <FileUpload.ItemPreview type="image/*">
                    <FileUpload.ItemPreviewImage />
                  </FileUpload.ItemPreview>
                  <FileUpload.ItemPreview type=".*">Any Icon</FileUpload.ItemPreview>
                  <FileUpload.ItemName />
                  <FileUpload.ItemSizeText />
                  <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
                </FileUpload.Item>
              )}
            </For>
          )}
        </FileUpload.Context>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

<script lang="ts">
  import { FileUpload } from '@destyler-ui/svelte'

  function createMockImageFile(): File {
    const data = atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==')
    const bytes = Uint8Array.from(data, (character) => character.charCodeAt(0))
    return new File([bytes], 'test-image.png', { type: 'image/png' })
  }

  const mockImageFile = createMockImageFile()
</script>

<FileUpload.Root>
  <FileUpload.Dropzone>
    <FileUpload.Label>Drag your file(s) here</FileUpload.Label>
  </FileUpload.Dropzone>
  <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
  <FileUpload.ClearTrigger>Clear</FileUpload.ClearTrigger>
  <FileUpload.ItemGroup>
    <FileUpload.Context>
      {#snippet render(api)}
        {#each api().acceptedFiles as file (`${file.name}-${file.lastModified}`)}
          <FileUpload.Item {file}>
            <FileUpload.ItemPreview>
              <FileUpload.ItemPreviewImage />
            </FileUpload.ItemPreview>
            <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
            <FileUpload.ItemSizeText>{api().getFileSize(file)}</FileUpload.ItemSizeText>
            <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
          </FileUpload.Item>
        {/each}
      {/snippet}
    </FileUpload.Context>
    <FileUpload.Item file={mockImageFile}>
      <FileUpload.ItemPreview>
        <FileUpload.ItemPreviewImage />
      </FileUpload.ItemPreview>
      <FileUpload.ItemName>{mockImageFile.name}</FileUpload.ItemName>
      <FileUpload.ItemSizeText>1 KB</FileUpload.ItemSizeText>
      <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
    </FileUpload.Item>
  </FileUpload.ItemGroup>
  <FileUpload.HiddenInput />
</FileUpload.Root>

With Field

Combine file upload with a form field for validation and labeling.

<script setup lang="ts">
import { FileUpload } from '@destyler-ui/vue'
import { Field } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root>
    <FileUpload.Root :maxFiles="5">
      <FileUpload.Label>Label</FileUpload.Label>
      <FileUpload.Trigger>Select</FileUpload.Trigger>
      <FileUpload.ItemGroup />
      <FileUpload.HiddenInput data-testid="input" />
    </FileUpload.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'
import { FileUpload } from '@destyler-ui/react'

export function WithField() {
  return (
    <Field.Root>
      <FileUpload.Root maxFiles={5}>
        <FileUpload.Label>Label</FileUpload.Label>
        <FileUpload.Trigger>Select</FileUpload.Trigger>
        <FileUpload.ItemGroup />
        <FileUpload.HiddenInput data-testid="input" />
      </FileUpload.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'
import { FileUpload } from '@destyler-ui/solid/file-upload'

export function WithField(props: Field.RootProps) {
  return (
    <Field.Root {...props}>
      <FileUpload.Root maxFiles={5}>
        <FileUpload.Label>Label</FileUpload.Label>
        <FileUpload.Trigger>Select</FileUpload.Trigger>
        <FileUpload.ItemGroup />
        <FileUpload.HiddenInput data-testid="input" />
      </FileUpload.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  import type { FieldRootProps } from '@destyler-ui/svelte'

  export interface WithFieldProps extends FieldRootProps {}
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
  import { FileUpload } from '@destyler-ui/svelte'

  const props: WithFieldProps = $props()
</script>

<Field.Root {...props}>
  <FileUpload.Root maxFiles={5}>
    <FileUpload.Label>Label</FileUpload.Label>
    <FileUpload.Trigger>Select</FileUpload.Trigger>
    <FileUpload.ItemGroup />
    <FileUpload.HiddenInput data-testid="input" />
  </FileUpload.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Root Provider

<script setup lang="ts">
import { FileUpload, useFileUpload } from '@destyler-ui/vue'

const fileUpload = useFileUpload({ maxFiles: 5 })
</script>

<template>
  <button @click="fileUpload.clearFiles()">Clear</button>

  <FileUpload.RootProvider :value="fileUpload">
    <FileUpload.Label>File Upload</FileUpload.Label>
    <FileUpload.Dropzone>Drop your files here</FileUpload.Dropzone>
    <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
    <FileUpload.ItemGroup>
      <FileUpload.Context v-slot="{ acceptedFiles }">
        <FileUpload.Item v-for="file in acceptedFiles" :file="file" :key="file.name">
          <FileUpload.ItemPreview type="image/*">
            <FileUpload.ItemPreviewImage />
          </FileUpload.ItemPreview>
          <FileUpload.ItemPreview type=".*">
            <div>Generic Icon</div>
          </FileUpload.ItemPreview>
          <FileUpload.ItemName />
          <FileUpload.ItemSizeText />
          <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
        </FileUpload.Item>
      </FileUpload.Context>
    </FileUpload.ItemGroup>
    <FileUpload.HiddenInput />
  </FileUpload.RootProvider>
</template>

import { FileUpload, useFileUpload } from '@destyler-ui/react'

export function RootProvider() {
  const fileUpload = useFileUpload({ maxFiles: 5 })

  return (
    <>
      <button onClick={() => fileUpload.clearFiles()}>Clear</button>

      <FileUpload.RootProvider value={fileUpload}>
        <FileUpload.Label>File Upload</FileUpload.Label>
        <FileUpload.Dropzone>Drop your files here</FileUpload.Dropzone>
        <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
        <FileUpload.ItemGroup>
          <FileUpload.Context>
            {api => (
              <>
                {api.acceptedFiles.map(file => (
                  <FileUpload.Item key={file.name} file={file}>
                    <FileUpload.ItemPreview type="image/*">
                      <FileUpload.ItemPreviewImage />
                    </FileUpload.ItemPreview>
                    <FileUpload.ItemPreview type=".*">
                      <div>Generic Icon</div>
                    </FileUpload.ItemPreview>
                    <FileUpload.ItemName />
                    <FileUpload.ItemSizeText />
                    <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
                  </FileUpload.Item>
                ))}
              </>
            )}
          </FileUpload.Context>
        </FileUpload.ItemGroup>
        <FileUpload.HiddenInput />
      </FileUpload.RootProvider>
    </>
  )
}

import { FileUpload, useFileUpload } from '@destyler-ui/solid/file-upload'
import { For } from 'solid-js'

export function RootProvider() {
  const fileUpload = useFileUpload({ maxFiles: 5 })

  return (
    <>
      <button onClick={() => fileUpload().clearFiles()}>Clear</button>

      <FileUpload.RootProvider value={fileUpload}>
        <FileUpload.Label>File Upload</FileUpload.Label>
        <FileUpload.Dropzone>Drag your file(s)here</FileUpload.Dropzone>
        <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
        <FileUpload.ItemGroup>
          <FileUpload.Context>
            {context => (
              <For each={context().acceptedFiles}>
                {file => (
                  <FileUpload.Item file={file}>
                    <FileUpload.ItemPreview type="image/*">
                      <FileUpload.ItemPreviewImage />
                    </FileUpload.ItemPreview>
                    <FileUpload.ItemPreview type=".*">Any Icon</FileUpload.ItemPreview>
                    <FileUpload.ItemName />
                    <FileUpload.ItemSizeText />
                    <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
                  </FileUpload.Item>
                )}
              </For>
            )}
          </FileUpload.Context>
        </FileUpload.ItemGroup>
        <FileUpload.HiddenInput />
      </FileUpload.RootProvider>
    </>
  )
}

<script lang="ts">
  import { FileUpload, useFileUpload } from '@destyler-ui/svelte'

  const id = $props.id()
  const fileUpload = useFileUpload({ id, maxFiles: 5 })
</script>

<button type="button" onclick={() => fileUpload().clearFiles()}>Clear</button>

<FileUpload.RootProvider value={fileUpload}>
  <FileUpload.Label>File Upload</FileUpload.Label>
  <FileUpload.Dropzone>Drop your files here</FileUpload.Dropzone>
  <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
  <FileUpload.ItemGroup>
    <FileUpload.Context>
      {#snippet render(api)}
        {#each api().acceptedFiles as file (`${file.name}-${file.lastModified}`)}
          <FileUpload.Item {file}>
            <FileUpload.ItemPreview type="image/*">
              <FileUpload.ItemPreviewImage />
            </FileUpload.ItemPreview>
            <FileUpload.ItemPreview type=".*"><div>Generic Icon</div></FileUpload.ItemPreview>
            <FileUpload.ItemName />
            <FileUpload.ItemSizeText />
            <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
          </FileUpload.Item>
        {/each}
      {/snippet}
    </FileUpload.Context>
  </FileUpload.ItemGroup>
  <FileUpload.HiddenInput />
</FileUpload.RootProvider>

API Reference

Root

Prop	Default	Type
`accept`	—	Record<string, string[]> \| "image/png" \| "image/gif" \| "image/jpeg" \| "image/svg+xml" \| "image/webp" \| "image/avif" \| "image/heic" \| "image/bmp" \| "application/pdf" \| "application/zip" \| "application/json" \| "application/xml" \| "application/msword" \| "application/vnd.openxmlformats-officedocument.wordprocessingml.document" \| "application/vnd.ms-excel" \| "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" \| "application/vnd.ms-powerpoint" \| "application/vnd.openxmlformats-officedocument.presentationml.presentation" \| "application/rtf" \| "application/x-rar" \| "application/x-7z-compressed" \| "application/x-tar" \| "application/vnd.microsoft.portable-executable" \| "text/css" \| "text/csv" \| "text/html" \| "text/markdown" \| "text/plain" \| "font/ttf" \| "font/otf" \| "font/woff" \| "font/woff2" \| "font/eot" \| "font/svg" \| "video/mp4" \| "video/webm" \| "video/ogg" \| "video/quicktime" \| "video/x-msvideo" \| "audio/mpeg" \| "audio/ogg" \| "audio/wav" \| "audio/webm" \| "audio/aac" \| "audio/flac" \| "audio/x-m4a" \| "image/" \| "audio/" \| "video/" \| "text/" \| "application/" \| "font/" \| (string & {}) \| fileUpload.FileMimeType[] The accept file types
`allowDrop`	`true`	`false \| true` Whether to allow drag and drop in the dropzone element
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`capture`	—	`"user" \| "environment"` The default camera to use when capturing media
`directory`	—	`false \| true` Whether to accept directories, only works in webkit browsers
`disabled`	—	`false \| true` Whether the file input is disabled
`id`	—	`string` The unique identifier of the machine.
`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; }>` The ids of the elements. Useful for composition.
`invalid`	—	`false \| true` Whether the file input is invalid
`locale`	`"en-US"`	`string` The current locale. Based on the BCP 47 definition.
`maxFiles`	`1`	`number` The maximum number of files
`maxFileSize`	`Infinity`	`number` The maximum file size in bytes
`minFileSize`	`0`	`number` The minimum file size in bytes
`name`	—	`string` The name of the underlying file input
`preventDocumentDrop`	`true`	`false \| true` Whether to prevent the drop event on the document
`required`	—	`false \| true` Whether the file input is required
`translations`	—	`fileUpload.IntlTranslations` The localized messages to use.
`validate`	—	`(file: File, details: fileUpload.FileValidateDetails) => fileUpload.FileError[] \| null` Function to validate a file

Emit	Event
`fileAccept`	`[details: FileAcceptDetails]` Function called when the file is accepted
`fileChange`	`[details: FileChangeDetails]` Function called when the value changes, whether accepted or rejected
`fileReject`	`[details: FileRejectDetails]` Function called when the file is rejected

ClearTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Dropzone

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disableClick`	—	`false \| true` Whether to disable the click event on the dropzone

HiddenInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`file*`	—	`File`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemDeleteTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemGroup

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemName

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemPreview

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`type`	`'.*'`	`string` The file type to match against. Matches all file types by default.

ItemPreviewImage

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemSizeText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`accept`	—	Record<string, string[]> \| "image/png" \| "image/gif" \| "image/jpeg" \| "image/svg+xml" \| "image/webp" \| "image/avif" \| "image/heic" \| "image/bmp" \| "application/pdf" \| "application/zip" \| "application/json" \| "application/xml" \| "application/msword" \| "application/vnd.openxmlformats-officedocument.wordprocessingml.document" \| "application/vnd.ms-excel" \| "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" \| "application/vnd.ms-powerpoint" \| "application/vnd.openxmlformats-officedocument.presentationml.presentation" \| "application/rtf" \| "application/x-rar" \| "application/x-7z-compressed" \| "application/x-tar" \| "application/vnd.microsoft.portable-executable" \| "text/css" \| "text/csv" \| "text/html" \| "text/markdown" \| "text/plain" \| "font/ttf" \| "font/otf" \| "font/woff" \| "font/woff2" \| "font/eot" \| "font/svg" \| "video/mp4" \| "video/webm" \| "video/ogg" \| "video/quicktime" \| "video/x-msvideo" \| "audio/mpeg" \| "audio/ogg" \| "audio/wav" \| "audio/webm" \| "audio/aac" \| "audio/flac" \| "audio/x-m4a" \| "image/" \| "audio/" \| "video/" \| "text/" \| "application/" \| "font/" \| (string & {}) \| fileUpload.FileMimeType[] The accept file types
`allowDrop`	`true`	`false \| true` Whether to allow drag and drop in the dropzone element
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`capture`	—	`"user" \| "environment"` The default camera to use when capturing media
`directory`	—	`false \| true` Whether to accept directories, only works in webkit browsers
`disabled`	—	`false \| true` Whether the file input is disabled
`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; }>` The ids of the elements. Useful for composition.
`invalid`	—	`false \| true` Whether the file input is invalid
`locale`	`"en-US"`	`string` The current locale. Based on the BCP 47 definition.
`maxFiles`	`1`	`number` The maximum number of files
`maxFileSize`	`Infinity`	`number` The maximum file size in bytes
`minFileSize`	`0`	`number` The minimum file size in bytes
`name`	—	`string` The name of the underlying file input
`onFileAccept`	—	`(details: FileAcceptDetails) => void` Function called when the file is accepted
`onFileChange`	—	`(details: FileChangeDetails) => void` Function called when the value changes, whether accepted or rejected
`onFileReject`	—	`(details: FileRejectDetails) => void` Function called when the file is rejected
`preventDocumentDrop`	`true`	`false \| true` Whether to prevent the drop event on the document
`required`	—	`false \| true` Whether the file input is required
`translations`	—	`fileUpload.IntlTranslations` The localized messages to use.
`validate`	—	`(file: File, details: fileUpload.FileValidateDetails) => fileUpload.FileError[] \| null` Function to validate a file

ClearTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseFileUploadContext) => ReactNode`

Dropzone

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disableClick`	—	`false \| true` Whether to disable the click event on the dropzone

HiddenInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`file*`	—	`File`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemDeleteTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemGroup

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemName

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemPreview

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`type`	`'.*'`	`string` The file type to match against. Matches all file types by default.

ItemPreviewImage

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemSizeText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseFileUploadReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`accept`	—	(string & {}) \| Record<string, string[]> \| "image/png" \| "image/gif" \| "image/jpeg" \| "image/svg+xml" \| "image/webp" \| "image/avif" \| "image/heic" \| "image/bmp" \| "application/pdf" \| "application/zip" \| "application/json" \| "application/xml" \| "application/msword" \| "application/vnd.openxmlformats-officedocument.wordprocessingml.document" \| "application/vnd.ms-excel" \| "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" \| "application/vnd.ms-powerpoint" \| "application/vnd.openxmlformats-officedocument.presentationml.presentation" \| "application/rtf" \| "application/x-rar" \| "application/x-7z-compressed" \| "application/x-tar" \| "application/vnd.microsoft.portable-executable" \| "text/css" \| "text/csv" \| "text/html" \| "text/markdown" \| "text/plain" \| "font/ttf" \| "font/otf" \| "font/woff" \| "font/woff2" \| "font/eot" \| "font/svg" \| "video/mp4" \| "video/webm" \| "video/ogg" \| "video/quicktime" \| "video/x-msvideo" \| "audio/mpeg" \| "audio/ogg" \| "audio/wav" \| "audio/webm" \| "audio/aac" \| "audio/flac" \| "audio/x-m4a" \| "image/" \| "audio/" \| "video/" \| "text/" \| "application/" \| "font/" \| fileUpload.FileMimeType[] The accept file types
`allowDrop`	`true`	`false \| true` Whether to allow drag and drop in the dropzone element
`asChild`	—	`(props: (userProps?: solid_js62.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`capture`	—	`"user" \| "environment"` The default camera to use when capturing media
`directory`	—	`false \| true` Whether to accept directories, only works in webkit browsers
`disabled`	—	`false \| true` Whether the file input is disabled
`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; }>` The ids of the elements. Useful for composition.
`invalid`	—	`false \| true` Whether the file input is invalid
`locale`	`"en-US"`	`string` The current locale. Based on the BCP 47 definition.
`maxFiles`	`1`	`number` The maximum number of files
`maxFileSize`	`Infinity`	`number` The maximum file size in bytes
`minFileSize`	`0`	`number` The minimum file size in bytes
`name`	—	`string` The name of the underlying file input
`onFileAccept`	—	`(details: FileAcceptDetails) => void` Function called when the file is accepted
`onFileChange`	—	`(details: FileChangeDetails) => void` Function called when the value changes, whether accepted or rejected
`onFileReject`	—	`(details: FileRejectDetails) => void` Function called when the file is rejected
`preventDocumentDrop`	`true`	`false \| true` Whether to prevent the drop event on the document
`required`	—	`false \| true` Whether the file input is required
`translations`	—	`fileUpload.IntlTranslations` The localized messages to use.
`validate`	—	`(file: File, details: FileValidateDetails) => fileUpload.FileError[] \| null` Function to validate a file

ClearTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js62.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseFileUploadContext) => Element`

Dropzone

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js62.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`disableClick`	—	`false \| true` Whether to disable the click event on the dropzone

HiddenInput

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js62.JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`file*`	—	`File`
`asChild`	—	`(props: (userProps?: solid_js62.JSX.LiHTMLAttributes<HTMLLIElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemDeleteTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js62.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemGroup

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js62.JSX.HTMLAttributes<HTMLUListElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemName

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js62.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemPreview

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js62.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`type`	`'.*'`	`string` The file type to match against. Matches all file types by default.

ItemPreviewImage

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js62.JSX.ImgHTMLAttributes<HTMLImageElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemSizeText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js62.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js62.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseFileUploadReturn`
`asChild`	—	`(props: (userProps?: solid_js62.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js62.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`accept`	—	`Record<string, string[]> \| FileMimeType \| FileMimeType[] \| undefined` The accept file types
`allowDrop`	`true`	`false \| true` Whether to allow drag and drop in the dropzone element
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`capture`	—	`"user" \| "environment"` The default camera to use when capturing media
`children`	—	`Snippet<[]> \| undefined`
`directory`	—	`false \| true` Whether to accept directories, only works in webkit browsers
`disabled`	—	`false \| true` Whether the file input is disabled
`id`	—	`string`
`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; }>` The ids of the elements. Useful for composition.
`invalid`	—	`false \| true` Whether the file input is invalid
`locale`	`"en-US"`	`string` The current locale. Based on the BCP 47 definition.
`maxFiles`	`1`	`number` The maximum number of files
`maxFileSize`	`Infinity`	`number` The maximum file size in bytes
`minFileSize`	`0`	`number` The minimum file size in bytes
`name`	—	`string` The name of the underlying file input
`onFileAccept`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").FileUploadFileAcceptDetails) => void` Function called when the file is accepted
`onFileChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").FileUploadFileChangeDetails) => void` Function called when the value changes, whether accepted or rejected
`onFileReject`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").FileUploadFileRejectDetails) => void` Function called when the file is rejected
`preventDocumentDrop`	`true`	`false \| true` Whether to prevent the drop event on the document
`required`	—	`false \| true` Whether the file input is required
`translations`	—	`IntlTranslations \| undefined` The localized messages to use.
`validate`	—	`((file: File, details: FileValidateDetails) => FileError[] \| null) \| undefined` Function to validate a file

ClearTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render`	—	`Snippet<[UseFileUploadContext]>`

Dropzone

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`disableClick`	—	`false \| true` Whether to disable the click event on the dropzone

HiddenInput

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Item

Prop	Default	Type
`file*`	—	`File`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"li">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemDeleteTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemGroup

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"ul">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemName

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemPreview

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`type`	—	`string` The file type to match against. Matches all file types by default.

ItemPreviewImage

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"img">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemSizeText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseFileUploadReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Trigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`