SuperUpload

Drag-and-drop file uploads with progress tracking, previews, and automatic chunking for large files. All configured via data-* attributes.

Drag & Drop Progress Previews Chunked

View Full Documentation

What Makes It Super

Drag & Drop Zone

Visual drop zone with hover states. Supports nested content and custom drop indicators.

<div data-az-component="super-upload"
     data-az-drop-zone="true"
     data-az-drop-text="Drop files here"
     data-az-drop-active-class="border-amber-500">

File Validation

Validate file types, sizes, and dimensions before upload. Custom validation rules supported.

<input data-az-accept="image/*,application/pdf"
       data-az-max-size="10MB"
       data-az-max-files="5"
       data-az-min-dimensions="800x600">

Image Previews

Instant image previews with thumbnail generation. Video and PDF previews also supported.

<div data-az-preview="true"
     data-az-preview-size="150"
     data-az-preview-fit="cover"
     data-az-preview-video="thumbnail">

Progress Tracking

Per-file and total progress bars. Pause, resume, and cancel individual uploads.

<div data-az-progress="bar"
     data-az-progress-total="true"
     data-az-pausable="true"
     data-az-cancelable="true">

Chunked Uploads

Automatic chunking for large files. Resume interrupted uploads with chunk verification.

<div data-az-chunked="true"
     data-az-chunk-size="5MB"
     data-az-resumable="true"
     data-az-concurrent-chunks="3">

Server Integration

Works with any backend. Signed URLs, presigned S3 uploads, and custom headers supported.

<div data-az-upload-url="/api/upload"
     data-az-signed-url="/api/sign-upload"
     data-az-headers='{"X-CSRF": "token"}'
     data-az-field-name="file">

Complete Example

A complete file upload component with drag-and-drop, validation, and chunked uploads.

<div 
  data-az-component="super-upload"
  data-az-upload-url="/api/files"
  data-az-drop-zone="true"
  data-az-multiple="true"
  data-az-accept="image/*,application/pdf"
  data-az-max-size="50MB"
  data-az-max-files="10"
  data-az-chunked="true"
  data-az-chunk-size="5MB"
  data-az-preview="true"
  data-az-progress="bar"
  data-az-pausable="true"
  class="border-2 border-dashed border-zinc-700 rounded-2xl p-12">
  
  <div data-az-drop-text>
    <p>Drag files here or click to browse</p>
    <p class="text-sm text-zinc-500">Max 50MB per file, 10 files max</p>
  </div>
  
  <input type="file" data-az-input multiple hidden>
  
  <div data-az-file-list>
    <!-- File items rendered here -->
  </div>
  
  <template data-az-file-template>
    <div data-az-file-item>
      <img data-az-file-preview>
      <span data-az-file-name></span>
      <span data-az-file-size></span>
      <progress data-az-file-progress></progress>
      <button data-az-file-remove>Remove</button>
    </div>
  </template>
  
</div>

Ready for Better File Uploads?

SuperUpload is part of AZ UI Kit. Request a briefing to learn more about our enterprise licensing.

DEMANDER UN BRIEFING Back to AZ UI Kit