File Upload

vel-src: components/file-upload.css

A drag-and-drop file upload component with a dashed dropzone area, active drag state with purple glow, and a file list showing uploaded items with names, sizes, and remove buttons.

Class	Properties
vel-dropzone	dashed border, border-radius: 2xl, surface-1 bg, centered flex column, hover: primary border + faint bg
vel-dropzone-active	drag-over state — primary-400 border, purple bg tint, scale(1.01), box-shadow glow
vel-dropzone-icon	3.5rem centered icon area, color: muted, font-size: 2rem
vel-dropzone-text	main prompt text — base size, medium weight, color: text
vel-dropzone-hint	secondary hint text — sm size, color: muted, negative top margin
vel-file-list	flex column container for file items, gap, margin-top
vel-file-item	flex row — surface-2 bg, border, border-radius: lg, hover: surface-3
vel-file-item-name	flex: 1, sm font, medium weight, text-overflow: ellipsis
vel-file-item-size	xs font, color: muted, flex-shrink: 0
vel-file-item-remove	1.5rem circle button, hover: danger-400 color + red tint bg

Examples

Dropzone with file list

Drop files here or browse

PNG, JPG, PDF up to 10 MB

design-system-v2.pdf 3.4 MB

hero-banner.png 841 KB

example.html

<div style="padding:24px;background:#060b17;font-family:system-ui,sans-serif;border-radius:12px;">
  <div style="max-width:520px;">

    <!-- Dropzone -->
    <div class="vel-dropzone">
      <div class="vel-dropzone-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
          <polyline points="17 8 12 3 7 8"/>
          <line x1="12" y1="3" x2="12" y2="15"/>
        </svg>
      </div>
      <p class="vel-dropzone-text">Drop files here or <span style="color:#a87fff;cursor:pointer;">browse</span></p>
      <p class="vel-dropzone-hint">PNG, JPG, PDF up to 10 MB</p>
    </div>

    <!-- File list -->
    <div class="vel-file-list">
      <div class="vel-file-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16" style="color:#a87fff;flex-shrink:0;">
          <path d="M3 3.5A1.5 1.5 0 0 1 4.5 2h6.879a1.5 1.5 0 0 1 1.06.44l4.122 4.12A1.5 1.5 0 0 1 17 7.622V16.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 16.5v-13Z"/>
        </svg>
        <span class="vel-file-item-name">design-system-v2.pdf</span>
        <span class="vel-file-item-size">3.4 MB</span>
        <button class="vel-file-item-remove" title="Remove">&times;</button>
      </div>
      <div class="vel-file-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16" style="color:#2ebde5;flex-shrink:0;">
          <path d="M3 3.5A1.5 1.5 0 0 1 4.5 2h6.879a1.5 1.5 0 0 1 1.06.44l4.122 4.12A1.5 1.5 0 0 1 17 7.622V16.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 16.5v-13Z"/>
        </svg>
        <span class="vel-file-item-name">hero-banner.png</span>
        <span class="vel-file-item-size">841 KB</span>
        <button class="vel-file-item-remove" title="Remove">&times;</button>
      </div>
    </div>

  </div>
</div>

Active drag state

Release to upload

Files will be added to your list

example.html

<div style="padding:24px;background:#060b17;font-family:system-ui,sans-serif;border-radius:12px;">
  <div style="max-width:520px;">
    <div class="vel-dropzone vel-dropzone-active">
      <div class="vel-dropzone-icon" style="color:#a87fff;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
          <polyline points="17 8 12 3 7 8"/>
          <line x1="12" y1="3" x2="12" y2="15"/>
        </svg>
      </div>
      <p class="vel-dropzone-text" style="color:#a87fff;">Release to upload</p>
      <p class="vel-dropzone-hint">Files will be added to your list</p>
    </div>
  </div>
</div>