File Upload Minimal

Fetch pattern JSON: curl https://webspire.de/patterns/file-upload/minimal.json

minimal.html

<div class="ws-file-upload mx-auto max-w-md">
  <!-- Compact file input -->
  <div class="flex items-center gap-3 rounded-lg border border-[var(--ws-file-upload-border)] bg-[var(--ws-file-upload-bg)] px-4 py-3">
    <button type="button" class="flex-shrink-0 rounded-lg bg-[var(--ws-file-upload-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-file-upload-action-text)] transition hover:opacity-90">Choose File</button>
    <span class="min-w-0 flex-1 truncate text-sm text-[var(--ws-file-upload-text-soft)]">No file selected</span>
    <svg class="h-5 w-5 flex-shrink-0 text-[var(--ws-file-upload-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/></svg>
  </div>

  <!-- File list -->
  <ul class="mt-3 divide-y divide-[var(--ws-file-upload-border)] rounded-lg border border-[var(--ws-file-upload-border)]" role="list">
    <li class="flex items-center justify-between px-4 py-3">
      <div class="flex items-center gap-3">
        <svg class="h-4 w-4 text-[var(--ws-file-upload-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
        <div>
          <p class="text-sm font-medium text-[var(--ws-file-upload-text)]">report.pdf</p>
          <p class="text-xs text-[var(--ws-file-upload-text-soft)]">1.2 MB</p>
        </div>
      </div>
      <span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Uploaded</span>
    </li>
    <li class="flex items-center justify-between px-4 py-3">
      <div class="flex items-center gap-3">
        <svg class="h-4 w-4 text-[var(--ws-file-upload-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
        <div>
          <p class="text-sm font-medium text-[var(--ws-file-upload-text)]">design-assets.zip</p>
          <p class="text-xs text-[var(--ws-file-upload-text-soft)]">8.5 MB</p>
        </div>
      </div>
      <span class="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">Uploading</span>
    </li>
  </ul>
</div>

Details

Family

file-upload

Tier

enhanced

Kind

component

Extends

file-upload/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

file-uploadcompactinputminimalform

Slots

Name	Required	Description
input	Yes	File input button with filename display.
fileList	No	Uploaded file list with status badges.

Minimal variant with a compact button-style file input. File list below shows each file with name, size, and a status badge (Uploaded/Uploading). Less visual weight than the dropzone base variant.