FileUpload

<script lang="ts">
  import { FileUpload } from 'sv5ui';

  let files = $state<File[]>([]);
</script>

<FileUpload bind:value={files} />

<FileUpload multiple label="Drop files here or click to upload" description="You can upload multiple files at once" />

<!-- Images only -->
<FileUpload accept="image/*" label="Upload images" description="PNG, JPG, GIF up to 10MB" />

<!-- PDF only -->
<FileUpload accept=".pdf" label="Upload document" description="PDF files only" />

<!-- Multiple types -->
<FileUpload accept="image/*,.pdf,.doc,.docx" label="Upload files" description="Images, PDF, or Word documents" />

<!-- Area variant (default) — dropzone style -->
<FileUpload variant="area" label="Drop files here" />

<!-- Button variant — compact trigger -->
<FileUpload variant="button" label="Choose file" />

<FileUpload size="sm" label="Small upload" />
<FileUpload size="md" label="Medium upload" />
<FileUpload size="lg" label="Large upload" />

<!-- List layout (default) -->
<FileUpload layout="list" multiple label="List layout" />

<!-- Grid layout -->
<FileUpload layout="grid" multiple accept="image/*" label="Grid layout" />

<FileUpload
  icon="lucide:image"
  label="Upload your avatar"
  description="Recommended: 400x400px, PNG or JPG"
  accept="image/*"
/>

<FileUpload loading label="Uploading..." />