File Uploads

Clean upload component with drag-and-drop support and smooth hover effects.

<div class="upload-box" id="uploadBox">
  <input type="file" id="fileInput" hidden multiple>
  <div class="upload-icon">⬆</div>
  <h3>Drag & Drop Files</h3>
  <p>or click to browse</p>
  <button>Select Files</button>
</div>

Lightweight upload area with modern dashed border styling.

<div class="upload-box dashed-upload">
  <div class="upload-icon">📁</div>
  <h3>Dashed Upload</h3>
  <p>Minimal clean style</p>
</div>

Dynamic glowing mesh gradient behind frosted glass overlay with micro-interactions.

<div class="upload-box aurora-upload">
  <div class="aurora-bg"></div>
  <div class="aurora-content">
    <div class="upload-icon">🌈</div>
    <h3>Aurora Upload</h3>
    <p>Animated mesh background</p>
  </div>
</div>

Cybersecurity-themed upload zone with active laser scanning overlay and neon accents.

<div class="upload-box biometric-upload">
  <div class="scan-grid"></div>
  <div class="scan-laser"></div>
  <div class="upload-icon security-icon">🛡️</div>
  <h3>Secure Upload</h3>
  <p>AES-256 Encrypted Transfer</p>
</div>

A compact drag-and-drop widget showcasing file uploading states and completion marks.

<div class="upload-box stack-upload">
  <div class="mini-dropzone">
    <span class="mini-dropzone-icon"><i class="fa-solid fa-cloud-arrow-up"></i></span>
    <span>Drag items here</span>
  </div>
  <div class="file-stack-list">
    <div class="file-stack-item">
      <span class="file-item-icon text-pdf"><i class="fa-solid fa-file-pdf"></i></span>
      <div class="file-item-details">
        <span class="file-item-name">invoice_may_2026.pdf</span>
        <span class="file-item-size">1.4 MB • Complete</span>
      </div>
      <span class="file-item-status status-check"><i class="fa-solid fa-circle-check"></i></span>
    </div>
  </div>
</div>

A perfectly circular drag-and-drop zone for a modern and minimal look.

<div class="upload-box circular-upload">
  <div class="circle-drop">
    <i class="fa-solid fa-cloud-arrow-up"></i>
  </div>
  <p>Drop here</p>
</div>

Structured panel style upload tailored for data-heavy dashboard interfaces.

<div class="upload-box panel-upload">
  <div class="panel-header">
    <span>Data Import</span>
    <i class="fa-solid fa-ellipsis"></i>
  </div>
  <div class="panel-body">
    <i class="fa-solid fa-file-csv fa-2x"></i>
    <h4>Upload CSV/Excel</h4>
    <button class="panel-btn">Browse</button>
  </div>
</div>

A compact pill-shaped button that expands to show recently picked file icons.

<div class="upload-box multi-picker-upload">
  <div class="picker-btn">
    <i class="fa-solid fa-plus"></i> Add Files
  </div>
  <div class="picker-avatars">
    <span class="p-av">📄</span>
    <span class="p-av">🖼️</span>
    <span class="p-av">+3</span>
  </div>
</div>

A document scanner simulation with an animated scanning laser line.

<div class="upload-box scanner-upload">
  <div class="scanner-frame">
    <div class="scan-line"></div>
    <i class="fa-regular fa-file-lines doc-icon"></i>
  </div>
  <p>Scan Document</p>
</div>

A sleek IDE-style window for developers to upload code files or snippets.

<div class="upload-box code-upload">
  <div class="code-header">
    <span class="mac-btn red"></span><span class="mac-btn yellow"></span><span class="mac-btn green"></span>
    <span class="code-title">upload.js</span>
  </div>
  <div class="code-body">
    <code><span class="kw">import</span> { upload } <span class="kw">from</span> 'fs';<br>
    <span class="cmt">// Drop dev files here</span><br>
    <span class="fn">initUpload</span>();</code>
  </div>
</div>

A hexagonal dropzone perfect for gaming or tech-focused applications.

<div class="upload-box hex-upload">
  <div class="hex-shape">
    <div class="hex-inner">
      <i class="fa-solid fa-cloud-arrow-up"></i>
    </div>
  </div>
</div>

A grid layout dropzone mimicking a media album interface.

<div class="upload-box media-upload">
  <div class="media-grid">
    <div class="m-box"><i class="fa-solid fa-image"></i></div>
    <div class="m-box"><i class="fa-solid fa-video"></i></div>
    <div class="m-box"><i class="fa-solid fa-music"></i></div>
    <div class="m-box active-drop"><i class="fa-solid fa-plus"></i></div>
  </div>
</div>

An engineering-style blueprint dropzone with grid lines.

<div class="upload-box blueprint-upload">
  <div class="blueprint-grid"></div>
  <div class="blueprint-content">
    <i class="fa-solid fa-compass-drafting"></i>
    <span>Upload CAD/Blueprints</span>
  </div>
</div>

A directory tree structure highlighting the active drop destination.

<div class="upload-box folder-tree-upload">
  <div class="tree-item"><i class="fa-solid fa-folder-open text-folder"></i> /root</div>
  <div class="tree-item sub"><i class="fa-solid fa-folder text-folder"></i> /assets</div>
  <div class="tree-dropzone">Drop files to /assets</div>
</div>

A very slim horizontal upload bar suitable for tight UI spaces.

<div class="upload-box strip-upload">
  <i class="fa-solid fa-cloud-arrow-up strip-icon"></i>
  <span class="strip-text">Drag files or Browse</span>
  <button class="strip-btn">Upload</button>
</div>