FileUpload

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FileUpload
  id="file"
  name="file"
  label="Upload file"
  accept="accept"
  multiple="false"
/>

Legacy mount name: data-component="FileUpload".

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/FileUpload.wrn

component FileUpload {
  props {
    class = ""
    id = "file"
    name = "file"
    label = "Upload file"
    accept = ""
    multiple = false
    help = "Drag and drop or browse"
  }
  view {
        <label for="{id}" class="flex min-h-40 cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition hover:border-violet-500 hover:bg-violet-50/50 focus-within:ring-4 focus-within:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-900/50 {class}">
        <span class="text-3xl" aria-hidden="true">⇧</span>
        <span class="mt-2 font-semibold">{label}</span>
        <span class="mt-1 text-sm text-slate-500">{help}</span>
        <input id="{id}" name="{name}" type="file" accept="{accept}" multiple="{multiple}" class="sr-only" />
        </label>
    }
}