File input

Setup

<script lang="ts">
  import { Label, Fileupload, Helper } from 'svelte-5-ui-lib';
</script>

Interactive Fileupload Builder

<Fileupload
   bind:files
 />
{#each files as file}<p>{file.name}</p>{/each}

Examples

Selected files: No files selected

<script lang="ts">
  import { Fileupload, Helper } from 'svelte-5-ui-lib';
  let selectedFiles: FileList | undefined = $state();
  let fileNames = $derived(
    selectedFiles
      ? Array.from(selectedFiles)
          .map((file) => file.name)
          .join(", ")
      : "No files selected"
  );
</script>

<Fileupload clearable bind:files={selectedFiles} multiple />

<Helper color="emerald" class="mt-2">Selected files: {fileNames}</Helper>

Component data