Inputs

FileUpload

Drag and drop zone for selecting files, with type and size validation.

<script>
  import { FileUpload } from "@codeatlasdev/ui";
  let files = $state([]);
</script>

<FileUpload bind:files multiple accept="image/*" maxSize={10 * 1024 * 1024} />

The drop zone is a keyboard-operable control: Enter or Space opens the file picker. Files larger than maxSize are rejected with a per-file error message. In multiple mode new picks are appended to files, otherwise they replace it. The component never uploads: send files to your API yourself.

Basic

Multiple files with a size limit and the selected count.

Drop files here or click to browse PNG, JPG, PDF up to 10 MB

Code

<script lang="ts">
  import { FileUpload } from '@codeatlasdev/ui';

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

<div class="wrap">
  <FileUpload
    bind:files
    multiple
    hint="PNG, JPG, PDF up to 10 MB"
    maxSize={10 * 1024 * 1024}
  />
  {#if files.length > 0}
    <p class="out">{files.length} file{files.length > 1 ? 's' : ''} selected</p>
  {/if}
</div>

<style>
  .wrap {
    width: 100%;
    max-width: 480px;
  }

  .out {
    margin: var(--ca-space-2) 0 0;
    font-size: var(--ca-font-size-body2);
    color: var(--ca-text-secondary);
  }
</style>

Images only and disabled

Drop images here PNG, JPG, GIF, WebP

Upload unavailable

Code

<script lang="ts">
  import { FileUpload } from '@codeatlasdev/ui';
</script>

<div class="wrap">
  <FileUpload accept="image/*" label="Drop images here" hint="PNG, JPG, GIF, WebP" />
  <FileUpload disabled label="Upload unavailable" />
</div>

<style>
  .wrap {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 480px;
  }
</style>

Props

Prop	Type	Default	Description
`files`	`File[]`	`[]`	Bindable list of selected files.
`accept`	`string`	–	Accepted types, for example "image/*,.pdf". Shown as the hint when hint is not set.
`multiple`	`boolean`	`false`	Allows selecting multiple files.
`maxSize`	`number`	–	Maximum file size in bytes. Larger files are rejected with an error.
`label`	`string`	`'Drop files here or click to browse' (localized)`	Drop zone text and accessible name.
`hint`	`string`	–	Helper text below the label.
`disabled`	`boolean`	`false`	Disables the upload.
`class`	`string`	–	Extra classes on the root.
`onchange`	`(files: File[]) => void`	–	Called when the file list changes.
`children`	`Snippet`	–	Custom content inside the drop zone.