File Upload — Veritheme

Default Drop Zone

Large dashed border area for dragging and dropping files.

html

Drag & drop files here

or

SVG, PNG, JPG or GIF (max. 800x400px)

<div class="vt-border-2 vt-border-dashed vt-border-border-default vt-rounded-lg vt-p-12 vt-flex vt-flex-col vt-items-center vt-text-center">
  <svg class="vt-w-10 vt-h-10 vt-text-mains-quaternary vt-mb-4">...</svg>
  <p class="vt-text-sm vt-font-medium">Drag &amp; drop files here</p>
  <button>Browse Files</button>
  <p class="vt-text-xs vt-text-mains-quaternary">SVG, PNG, JPG or GIF</p>
</div>

With File List

Drop zone with a list of uploaded files showing progress.

html

Drag & drop files here

or

banner-hero.png 2.4 MB

presentation.pdf 8.1 MB

demo-video.mp4 24.7 MB

<div>
  <!-- Drop zone -->
  <div class="vt-border-2 vt-border-dashed vt-border-border-default vt-rounded-lg vt-p-8">...</div>
  <!-- File list -->
  <div class="vt-space-y-2">
    <div class="vt-flex vt-items-center vt-gap-3 vt-p-3 vt-rounded-2xl vt-border vt-border-border-default">
      <div class="vt-icon-badge vt-w-8 vt-h-8 vt-rounded-lg vt-bg-surfaces-moderate"><svg>...</svg></div>
      <div class="vt-flex-1">
        <span class="vt-text-sm">banner-hero.png</span>
        <div class="vt-h-1.5 vt-rounded-full vt-bg-surfaces-subtle">...</div>
      </div>
    </div>
    ...
  </div>
</div>

Compact

Small inline button for attaching files.

html

<button class="vt-border vt-border-border-default vt-rounded-lg vt-px-4 vt-py-2">
  <svg class="vt-w-4 vt-h-4">...</svg>
  Attach files
</button>

Image Preview

Drop zone for images with a preview grid below.

html

Drop images here

PNG, JPG or WebP up to 10MB

<div>
  <!-- Drop zone -->
  <div class="vt-border-2 vt-border-dashed vt-border-border-default vt-rounded-lg vt-p-8">
    <svg class="vt-w-10 vt-h-10">...</svg>
    <p class="vt-text-sm">Drop images here</p>
  </div>
  <!-- Preview grid -->
  <div class="vt-flex vt-gap-3">
    <div class="vt-w-24 vt-h-24 vt-rounded-lg vt-bg-surfaces-moderate">...</div>
    <div class="vt-w-24 vt-h-24 vt-rounded-lg vt-bg-surfaces-moderate">...</div>
    <div class="vt-w-24 vt-h-24 vt-border-2 vt-border-dashed"><svg>...</svg></div>
  </div>
</div>

Drag Active State

Visual feedback when files are being dragged over the drop zone.

html

Release to upload

<div class="vt-border-2 vt-border-dashed vt-border-info-primary vt-bg-info-primary/5 vt-rounded-lg vt-p-12 vt-flex vt-flex-col vt-items-center">
  <svg class="vt-w-10 vt-h-10 vt-text-info-primary">...</svg>
  <p class="vt-text-sm vt-text-info-primary">Release to upload</p>
</div>

API Reference

All CSS classes available for the File Upload component.

Class	Type	Description
`vt-border-2 vt-border-dashed`	Border	Dashed border style for the drop zone area
`vt-border-border-default`	Border	Default border color for inactive drop zone
`vt-border-info-primary`	Border	Blue border for active drag-over state
`vt-bg-info-primary/5`	Color	Subtle blue background for drag-active state
`vt-rounded-lg`	Shape	Rounded corners for drop zone and file items
`vt-rounded-2xl`	Shape	Larger radius for file list items
`vt-bg-surfaces-moderate`	Color	Muted background for file type icon containers
`vt-bg-surfaces-subtle`	Color	Subtle background for progress bar track
`vt-bg-info-primary`	Color	Blue fill for upload progress bar
`vt-h-1.5 vt-rounded-full`	Shape	Thin rounded progress bar height
`vt-text-mains-quaternary`	Color	Muted text for helper text and file sizes
`vt-text-info-primary`	Color	Blue text for drag-active state label
`vt-hover:border-info-primary`	Interactive	Blue border on hover for add-more button

Accessibility

Keyboard and screen reader support.

Feature	Details
Label	The drop zone should have an accessible label describing expected file types
Keyboard	Drop zone is focusable and activatable via Enter/Space to open file picker
Feedback	Announce upload status changes (uploading, complete, error) via aria-live
Drag and drop	Provide keyboard alternative since drag-and-drop is not accessible