File Upload — uicraft

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="uc-border-2 uc-border-dashed uc-border-border-default uc-rounded-lg uc-p-12 uc-flex uc-flex-col uc-items-center uc-text-center">
  <svg class="uc-w-10 uc-h-10 uc-text-fg-disabled uc-mb-4">...</svg>
  <p class="uc-text-sm uc-font-medium">Drag &amp; drop files here</p>
  <button>Browse Files</button>
  <p class="uc-text-xs uc-text-fg-disabled">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="uc-border-2 uc-border-dashed uc-border-border-default uc-rounded-lg uc-p-8">...</div>
  <!-- File list -->
  <div class="uc-space-y-2">
    <div class="uc-flex uc-items-center uc-gap-3 uc-p-3 uc-rounded-2xl uc-border uc-border-border-default">
      <div class="uc-w-8 uc-h-8 uc-rounded-lg uc-bg-neutrals-muted"><svg>...</svg></div>
      <div class="uc-flex-1">
        <span class="uc-text-sm">banner-hero.png</span>
        <div class="uc-h-1.5 uc-rounded-full uc-bg-neutrals-subtle">...</div>
      </div>
    </div>
    ...
  </div>
</div>

Compact

Small inline button for attaching files.

html

<button class="uc-border uc-border-border-default uc-rounded-lg uc-px-4 uc-py-2">
  <svg class="uc-w-4 uc-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="uc-border-2 uc-border-dashed uc-border-border-default uc-rounded-lg uc-p-8">
    <svg class="uc-w-10 uc-h-10">...</svg>
    <p class="uc-text-sm">Drop images here</p>
  </div>
  <!-- Preview grid -->
  <div class="uc-flex uc-gap-3">
    <div class="uc-w-24 uc-h-24 uc-rounded-lg uc-bg-neutrals-muted">...</div>
    <div class="uc-w-24 uc-h-24 uc-rounded-lg uc-bg-neutrals-muted">...</div>
    <div class="uc-w-24 uc-h-24 uc-border-2 uc-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="uc-border-2 uc-border-dashed uc-border-accents-blue uc-bg-accents-blue/5 uc-rounded-lg uc-p-12 uc-flex uc-flex-col uc-items-center">
  <svg class="uc-w-10 uc-h-10 uc-text-accents-blue">...</svg>
  <p class="uc-text-sm uc-text-accents-blue">Release to upload</p>
</div>

API Reference

All CSS classes available for the File Upload component.

Class	Type	Description
`uc-border-2 uc-border-dashed`	Border	Dashed border style for the drop zone area
`uc-border-border-default`	Border	Default border color for inactive drop zone
`uc-border-accents-blue`	Border	Blue border for active drag-over state
`uc-bg-accents-blue/5`	Color	Subtle blue background for drag-active state
`uc-rounded-lg`	Shape	Rounded corners for drop zone and file items
`uc-rounded-2xl`	Shape	Larger radius for file list items
`uc-bg-neutrals-muted`	Color	Muted background for file type icon containers
`uc-bg-neutrals-subtle`	Color	Subtle background for progress bar track
`uc-bg-accents-blue`	Color	Blue fill for upload progress bar
`uc-h-1.5 uc-rounded-full`	Shape	Thin rounded progress bar height
`uc-text-fg-disabled`	Color	Muted text for helper text and file sizes
`uc-text-accents-blue`	Color	Blue text for drag-active state label
`uc-hover:border-accents-blue`	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