Skip to main content

Preview

Drag and drop files here, or click to browse

Max 5MB per file, up to 5 files

  • sample-image.jpg1000.0 KB
  • document.pdf2.0 MB

Drag files or click to upload

<div class="file-upload file-upload-dropzone" data-drag-drop="true">
  <input type="file" id="file-input" class="file-input" multiple accept="image/*" />
  <label for="file-input" class="file-dropzone">
    <div class="file-upload-icon">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <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="file-upload-text">Drag and drop files here, or click to browse</p>
    <p class="file-upload-hint">Max 5MB per file, up to 5 files</p>
  </label>
</div>
<ul class="file-list">
  <li class="file-item">
    <div class="file-preview"><img src="preview.jpg" alt="" /></div>
    <div class="file-info">
      <span class="file-name">example.jpg</span>
      <span class="file-size">1.2 MB</span>
    </div>
    <div class="file-progress"><div class="file-progress-bar" style="width: 65%"></div></div>
    <button class="file-remove">&times;</button>
  </li>
</ul>

Rate this tool