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/*"
/>

<script lang="ts">
  import { FileUpload, Alert } from 'sv5ui';
  import type { FileUploadRejection } from 'sv5ui';

  let files = $state<File[]>([]);
  let rejected = $state<FileUploadRejection[]>([]);

  function reasonLabel(reason: FileUploadRejection['reason']) {
    if (reason === 'accept')   return 'wrong type';
    if (reason === 'maxSize')  return 'too large (max 2 MB)';
    return 'limit reached (max 3 files)';
  }
</script>

<FileUpload
  multiple
  accept="image/*"
  maxSize={2 * 1024 * 1024}
  maxFiles={3}
  label="Upload images"
  description="Up to 3 files · max 2 MB each · images only"
  bind:value={files}
  onReject={(r) => (rejected = r)}
/>

{#if rejected.length > 0}
  <Alert color="error" variant="soft" icon="lucide:alert-triangle"
    title={`Rejected ${rejected.length} file(s)`}
  >
    {#snippet descriptionSlot()}
      <ul>
        {#each rejected as r, i (i)}
          <li><strong>{r.file.name}</strong> — {reasonLabel(r.reason)}</li>
        {/each}
      </ul>
    {/snippet}
  </Alert>
{/if}

<!-- The root element exposes data-full when maxFiles is reached.
     You can style for it, e.g.:
       <FileUpload class="data-full:opacity-60" ... />
-->

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

  let files = $state<File[]>([]);
  const error = $derived(files.length === 0 ? 'Please attach at least one document' : '');
</script>

<FormField
  label="Attachments"
  hint="Required"
  required
  help="PDF, DOC, or images"
  {error}
>
  <FileUpload
    multiple
    accept=".pdf,.doc,.docx,image/*"
    bind:value={files}
  />
</FormField>

<!-- When error is set, FileUpload:
     - applies aria-invalid + red border highlight
     - aria-describedby points to FormField's description and error text
     - emits focus/blur/change to the parent <Form> -->

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