file-upload component

Drop-in semantic component. See examples, sizes, variants, and source.

Drag-and-drop dropzone plus per-file progress cards. Compose a file-upload-area as the dropzone and a file-upload-list of file-upload-card rows to show queued / uploading / completed files. State modifiers on the area (hover, disabled, multiple) and the card (success, uploading, error) drive the visuals; behavior is wired by file-upload.js.

File Upload Area

Basic Upload Area

Choose a file or drag & drop it here

JPEG, PNG, PDF, and MP4 formats, up to 50 MB.

<div class="file-upload-area">
  <i class="icon cloud-upload w-6 h-6"></i>
  <div class="content">
    <h4 class="title">Choose a file or drag & drop it here</h4>
    <p class="description">JPEG, PNG, PDF, and MP4 formats, up to 50 MB.</p>
  </div>
  <button class="button sm neutral">Browse File</button>
  <input type="file" class="file-input" multiple accept=".jpg,.jpeg,.png,.pdf,.mp4" />
</div>

Upload Area States

Release to upload

Your files will be uploaded

Upload disabled

File upload is currently unavailable

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div class="file-upload-area hover">
    <i class="icon cloud-upload w-6 h-6"></i>
    <div class="content">
      <h4 class="title">Release to upload</h4>
      <p class="description">Your files will be uploaded</p>
    </div>
  </div>

  <div class="file-upload-area disabled">
    <i class="icon cloud-upload w-6 h-6"></i>
    <div class="content">
      <h4 class="title">Upload disabled</h4>
      <p class="description">File upload is currently unavailable</p>
    </div>
  </div>
</div>

Multiple Files Upload

Drop multiple files here

You can upload up to 10 files at once

<div class="file-upload-area multiple">
  <i class="icon file-plus w-8 h-8"></i>
  <div class="content">
    <h4 class="title">Drop multiple files here</h4>
    <p class="description">You can upload up to 10 files at once</p>
  </div>
  <button class="button sm primary">Select Files</button>
  <input type="file" class="file-input" multiple />
</div>

<div class="selected-files-info hidden">
  <span class="files-count">0 files selected</span>
  <button class="clear-btn">Clear all</button>
</div>

File Upload Cards

Uploaded Files - Success

PDF

google-certificate.pdf

94 KB • Completed

<div class="file-upload-list">
  <div class="file-upload-card success">
    <div class="file-icon pdf">
      <span class="format">PDF</span>
    </div>
    <div class="content">
      <h5 class="title">google-certificate.pdf</h5>
      <div class="meta">
        <span class="size">94 KB</span>
        <span class="separator">•</span>
        <span class="status">
          <i class="icon circle-check w-3 h-3 text-green-600"></i>
          Completed
        </span>
      </div>
    </div>
    <button class="delete-btn" aria-label="Delete file">
      <i class="icon trash-2 w-4 h-4"></i>
    </button>
  </div>
</div>

Uploading Progress

DOC

project-proposal.docx

2.1 MB of 5.4 MB • Uploading...

<div class="file-upload-list">
  <div class="file-upload-card uploading">
    <div class="file-icon doc">
      <span class="format">DOC</span>
    </div>
    <div class="content">
      <h5 class="title">project-proposal.docx</h5>
      <div class="meta">
        <span class="size">2.1 MB of 5.4 MB</span>
        <span class="separator">•</span>
        <span class="status">Uploading...</span>
      </div>
      <div class="progress-bar">
        <div class="progress-fill" style="width: 39%"></div>
      </div>
    </div>
    <button class="delete-btn" aria-label="Cancel upload">
      <i class="icon x w-4 h-4"></i>
    </button>
  </div>
</div>

Upload Error

JPG

vacation-photo.jpg

File too large • Failed

<div class="file-upload-list">
  <div class="file-upload-card error">
    <div class="file-icon img">
      <span class="format">JPG</span>
    </div>
    <div class="content">
      <h5 class="title">vacation-photo.jpg</h5>
      <div class="meta">
        <span class="size">File too large</span>
        <span class="separator">•</span>
        <span class="status">
          <i class="icon circle-x w-3 h-3 text-red-600"></i>
          Failed
        </span>
      </div>
    </div>
    <button class="delete-btn" aria-label="Remove file">
      <i class="icon trash-2 w-4 h-4"></i>
    </button>
  </div>
</div>

Multiple Files

PDF

report-2024.pdf

1.2 MB • Completed

XLS

financial-data.xlsx

450 KB • Completed

MP4

presentation-video.mp4

12.3 MB of 45.2 MB • Uploading...

<div class="file-upload-list">
  <div class="file-upload-card success">
    <div class="file-icon pdf">
      <span class="format">PDF</span>
    </div>
    <div class="content">
      <h5 class="title">report-2024.pdf</h5>
      <div class="meta">
        <span class="size">1.2 MB</span>
        <span class="separator">•</span>
        <span class="status">
          <i class="icon circle-check w-3 h-3 text-green-600"></i>
          Completed
        </span>
      </div>
    </div>
    <button class="delete-btn" aria-label="Delete file">
      <i class="icon trash-2 w-4 h-4"></i>
    </button>
  </div>
  <div class="file-upload-card success">
    <div class="file-icon xls">
      <span class="format">XLS</span>
    </div>
    <div class="content">
      <h5 class="title">financial-data.xlsx</h5>
      <div class="meta">
        <span class="size">450 KB</span>
        <span class="separator">•</span>
        <span class="status">
          <i class="icon circle-check w-3 h-3 text-green-600"></i>
          Completed
        </span>
      </div>
    </div>
    <button class="delete-btn" aria-label="Delete file">
      <i class="icon trash-2 w-4 h-4"></i>
    </button>
  </div>
  <div class="file-upload-card uploading">
    <div class="file-icon mp4">
      <span class="format">MP4</span>
    </div>
    <div class="content">
      <h5 class="title">presentation-video.mp4</h5>
      <div class="meta">
        <span class="size">12.3 MB of 45.2 MB</span>
        <span class="separator">•</span>
        <span class="status">Uploading...</span>
      </div>
      <div class="progress-bar">
        <div class="progress-fill" style="width: 27%"></div>
      </div>
    </div>
    <button class="delete-btn" aria-label="Cancel upload">
      <i class="icon x w-4 h-4"></i>
    </button>
  </div>
</div>

<div class="file-upload-list">
  <div class="file-upload-card success">
    <div class="file-icon pdf">
      <span class="format">PDF</span>
    </div>
    <div class="content">
      <h5 class="title">report-2024.pdf</h5>
      <div class="meta">
        <span class="size">1.2 MB</span>
        <span class="separator">•</span>
        <span class="status">
          <i class="icon circle-check w-3 h-3 text-green-600"></i>
          Completed
        </span>
      </div>
    </div>
    <button class="delete-btn" aria-label="Delete file">
      <i class="icon trash-2 w-4 h-4"></i>
    </button>
  </div>
  <div class="file-upload-card success">
    <div class="file-icon xls">
      <span class="format">XLS</span>
    </div>
    <div class="content">
      <h5 class="title">financial-data.xlsx</h5>
      <div class="meta">
        <span class="size">450 KB</span>
        <span class="separator">•</span>
        <span class="status">
          <i class="icon circle-check w-3 h-3 text-green-600"></i>
          Completed
        </span>
      </div>
    </div>
    <button class="delete-btn" aria-label="Delete file">
      <i class="icon trash-2 w-4 h-4"></i>
    </button>
  </div>
  <div class="file-upload-card uploading">
    <div class="file-icon mp4">
      <span class="format">MP4</span>
    </div>
    <div class="content">
      <h5 class="title">presentation-video.mp4</h5>
      <div class="meta">
        <span class="size">12.3 MB of 45.2 MB</span>
        <span class="separator">•</span>
        <span class="status">Uploading...</span>
      </div>
      <div class="progress-bar">
        <div class="progress-fill" style="width: 27%"></div>
      </div>
    </div>
    <button class="delete-btn" aria-label="Cancel upload">
      <i class="icon x w-4 h-4"></i>
    </button>
  </div>
</div>

Size Variations

Tiny Size

Drop files here

Max 50 MB

<div class="file-uploads xs">
  <div class="file-upload-area">
    <i class="icon cloud-upload w-5 h-5"></i>
    <div class="content">
      <h4 class="title text-xs">Drop files here</h4>
      <p class="description text-xs">Max 50 MB</p>
    </div>
    <button class="button xs">Browse</button>
    <input type="file" class="file-input" multiple />
  </div>
</div>

Small Size

Choose files to upload

JPEG, PNG, PDF, MP4

<div class="file-uploads sm">
  <div class="file-upload-area">
    <i class="icon cloud-upload w-6 h-6"></i>
    <div class="content">
      <h4 class="title text-sm">Choose files to upload</h4>
      <p class="description text-xs">JPEG, PNG, PDF, MP4</p>
    </div>
    <button class="button sm">Select Files</button>
    <input type="file" class="file-input" multiple />
  </div>
</div>

Large Size

Drag and drop your files here

Supports multiple file formats up to 50 MB each

<div class="file-uploads xl">
  <div class="file-upload-area">
    <i class="icon cloud-upload w-8 h-8"></i>
    <div class="content">
      <h4 class="title text-lg">Drag and drop your files here</h4>
      <p class="description">Supports multiple file formats up to 50 MB each</p>
    </div>
    <button class="button xl">Choose Files</button>
    <input type="file" class="file-input" multiple />
  </div>
</div>

Common Patterns

Inline Upload Button

<div class="row">
  <button class="button">
    <i class="icon upload w-4 h-4"></i>
    Upload Document
  </button>

  <button class="button primary">
    <i class="icon file-plus w-4 h-4"></i>
    Add Files
  </button>

  <button class="button outline">
    <i class="icon paperclip w-4 h-4"></i>
    Attach
  </button>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`file-upload-area`	Dropzone container	Holds icon + content + button + hidden input
	`file-upload-list`	Container for queued file cards	Sibling of `file-upload-area`
	`file-upload-card`	Single queued / uploaded file row	Child of `file-upload-list`
Structure	`file-input`	Hidden `<input type="file">`	Inside `file-upload-area`
	`file-icon`	Document badge with format label	Add format class for color: `pdf doc xls ppt img zip mp4`
	`format`	Tiny corner label (e.g. PDF)	Inside `file-icon`
	`title` / `description` / `meta` / `status`	Card text slots	Inside `file-upload-card .content`
	`progress-bar` / `progress-fill`	Inline upload progress bar	Set `style="width: NN%"` on the fill
	`delete-btn`	Remove / cancel button	Right side of card
Area State	`hover`	Visual hover (manual demo state)	Modifier on `file-upload-area`
	`dragging`	Active drag-over state	Toggled by JS during drag
	`disabled`	Disables drop + browse	Modifier on `file-upload-area`
	`multiple`	Hint that area accepts multiple files	Pair with `multiple` attr on input
Card State	`success`	Completed upload — green tint	Modifier on `file-upload-card`
	`uploading`	In-progress — blue tint + bar	Modifier on `file-upload-card`
	`error`	Failed upload — red tint	Modifier on `file-upload-card`
Sizes	`file-uploads xs`	Tiny dropzone (120px min height)	Container modifier on `file-uploads`
	`file-uploads sm`	Small dropzone (160px)	Container modifier
	(default)	Medium dropzone (200px)	No wrapper needed
	`file-uploads xl`	Large dropzone (240px)	Container modifier
	`file-uploads lg`	Big dropzone (280px)	Container modifier
Image Upload	`image-upload`	Avatar / logo upload row with preview	Standalone variant; sibling of dropzone
	`preview`	Preview thumbnail container	Add `empty` for placeholder state
	`avatar`	Circular preview shape	Modifier on `image-upload`
	`company`	Rounded-square preview shape	Modifier on `image-upload`
Selected Info	`selected-files-info`	Blue info bar showing total selected	Toggle `hidden` when count is zero