FileUpload

Drop zone for choosing one or several files. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

import { UiFileUpload } from '@ziyarago/ui/vue'

Documents

Passport copy

Drop files here or browsePDF, JPG up to 10 MB

Vue

<UiFileUpload
  label="Passport copy"
  title="Drop files here or browse"
  hint="PDF, JPG up to 10 MB"
  accept=".pdf,.jpg,.png"
 />

Images, multiple

Hotel photos

Upload photosJPG or PNG, up to 20 files

Vue

<UiFileUpload
  label="Hotel photos"
  image
  multiple
  title="Upload photos"
  hint="JPG or PNG, up to 20 files"
  accept="image/*"
 />

Accept and maxSize (2 MB)

Visa scan

Drop the scan here or browsePDF or JPG up to 2 MB; others are rejected via onReject

Vue

<UiFileUpload
  label="Visa scan"
  title="Drop the scan here or browse"
  hint="PDF or JPG up to 2 MB; others are rejected via onReject"
  accept=".pdf,image/jpeg"
  :max-size="2097152"
 />

Sizes

Passport copy

Drop files here or browsePDF, JPG up to 10 MB

Passport copy

Drop files here or browsePDF, JPG up to 10 MB

Passport copy

Drop files here or browsePDF, JPG up to 10 MB

Passport copy

Drop files here or browsePDF, JPG up to 10 MB

Passport copy

Drop files here or browsePDF, JPG up to 10 MB

Vue

<UiFileUpload size="xs" label="Passport copy" hint="PDF, JPG up to 10 MB" />

<UiFileUpload size="sm" label="Passport copy" hint="PDF, JPG up to 10 MB" />

<UiFileUpload size="md" label="Passport copy" hint="PDF, JPG up to 10 MB" />

<UiFileUpload size="lg" label="Passport copy" hint="PDF, JPG up to 10 MB" />

<UiFileUpload size="xl" label="Passport copy" hint="PDF, JPG up to 10 MB" />

API reference

Drop-zone style file picker. Use for documents and attachments.

Props

PropType and valuesDefaultDescription

titlestring'Drop files here or browse'Main text in the zone.

hintstring'PDF, JPG up to 10 MB'Secondary text in the zone. Purely informational: use accept and maxSize to enforce limits.

acceptstring—Accepted types as in the native attribute, e.g. ".pdf,image/*". Also applied to dropped files.

maxSizenumber—Maximum size of one file in bytes. Larger files are rejected.

multiplebooleanfalseAllow selecting several files.

imagebooleanfalseUse the image icon instead of the upload icon.

labelstring—Label shown above the control.

errorstring—Error message under the control. Turns the control red and is announced with role="alert".

sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the array of accepted File objects, from the picker or a drop. Without multiple only the first one is kept.

rejectCalled as (file, reason) for each refused file; reason is "type" (not in accept), "size" (over maxSize) or "count" (extra file when multiple is off).

Notes

Click, Enter or Space opens the picker; files can also be dropped onto the zone, which highlights while dragging.
Stateless: the component does not list the chosen files, render them yourself.