File Upload

File Upload lets people pick files from their device. It is a styled native file input with an optional drop zone and an init() module for dropping and listing files.

Public web API

A data-bitsy-file-upload root with a label and a native <input type="file">.

<div data-bitsy-file-upload data-bitsy-variant="dropzone">
  <label for="import">Import contacts</label>
  <div data-bitsy-file-upload-zone>
    <p>Drag a CSV file here, or</p>
    <input id="import" type="file" accept=".csv,text/csv" aria-describedby="import-help">
  </div>
  <p id="import-help" data-bitsy-file-upload-description>CSV up to 10 MB.</p>
  <ul data-bitsy-file-upload-list aria-live="polite"></ul>
</div>

<script type="module">
  import { init } from "@bitsyui/bits/file-upload/init";
  init();
</script>

data-bitsy-variant="dropzone" with a data-bitsy-file-upload-zone wrapper makes the large target.
Put accepted types and the size limit in data-bitsy-file-upload-description; use data-bitsy-file-upload-error for errors.
The input stays visible and is always the way in; the zone only adds dropping.

Try it

Choose files with the button, or drop a CSV on the zone.

Receipt

Image or PDF, up to 5 MB.

Import contacts

Drag a CSV file here, or

CSV up to 10 MB.

Attachments

Choose at least one file.

Logo

Behavior

Without the script the native input works; nothing can be dropped and the list stays empty.
init() sets data-bitsy-state="dragover" on the zone, filters drops by accept, fills the input, fires change, and writes names into the list as text. It marks each root with data-bitsy-file-upload-ready and returns a cleanup function.

Foundation versus Bit

The foundation leaves <input type="file"> to the browser. data-bitsy-file-upload styles the file button and the drop zone from --bitsy-file-upload-* hooks.