File Upload

Drag-and-drop file upload. The accepted-file list is dynamic, so you provide an <template> for one item and stimulus-zag stamps one out per file.

Drag files here, or

<div
  data-controller="zag-file-upload"
  data-part="root"
  data-zag-file-upload-max-files-value="5"
  class="max-w-md space-y-3"
>
  <div
    data-part="dropzone"
    class="border-input text-muted-foreground hover:border-primary data-[dragging]:border-primary data-[dragging]:bg-primary/10 cursor-pointer rounded-lg border-2 border-dashed p-6 text-center text-sm"
  >
    Drag files here, or
    <button data-part="trigger" class="text-primary font-medium hover:underline">browse</button>
  </div>
  <input data-part="hidden-input" class="sr-only" />
  <ul data-part="item-group" class="space-y-1"></ul>
  <template data-zag-file-upload-target="itemTemplate">
    <li
      data-part="item"
      class="border-border flex items-center justify-between rounded border px-3 py-2 text-sm"
    >
      <span data-part="item-name" class="font-medium"></span>
      <span class="flex items-center gap-2">
        <span data-part="item-size-text" class="text-muted-foreground text-xs"></span>
        <button
          data-part="item-delete-trigger"
          class="text-muted-foreground hover:text-destructive"
          aria-label="Remove"
        >
          ×
        </button>
      </span>
    </li>
  </template>
</div>

Parts

root, label, dropzone, trigger, clear-trigger, hidden-input, item-group, item, item-name, item-size-text, item-preview, item-delete-trigger.

Values

Attribute	Type	Default	Description
data-zag-file-upload-accept-value	String	""	Accepted MIME types / extensions.
data-zag-file-upload-max-files-value	Number	1	Maximum number of files.
data-zag-file-upload-max-file-size-value	Number	0	Max file size in bytes (0 = none).
data-zag-file-upload-directory-value	Boolean	false	Allow directory selection.
data-zag-file-upload-name-value	String	""	name for form submission.
data-zag-file-upload-disabled-value	Boolean	false	Disable uploads.
data-zag-file-upload-required-value	Boolean	false	Mark required.

Events

Emits zag-file-upload:change ({ acceptedFiles, rejectedFiles }) and :reject.

Programmatic control

files (getter), setFiles(File[]), clear(), open().