Forms

Classic Upload

Wrap a native file input in .quanta-file-upload to style it as a button. The hidden <input> still opens your system picker; JS’s setupUpload() then handles preview/list.

<div class="quanta-single-file-upload-wrapper">
  <div class="quanta-file-upload quanta-btn-primary quanta-btn whitespace-nowrap" id="classicBox">
      <span class="">Select File</span>
      <input type="file" />
  </div>
  <div class="quanta-file-preview" id="previewClassic"></div>
</div>

Select File

On hover `.quanta-file-upload` fades (opacity 0.8) and its border turns var(--quanta-primary). A :focus-within outline and shadow also appear to meet accessibility standards.

Dashed‑Border Box

Use .quanta-file-upload-box for a full‑width drag target styled with a dashed border.

<div class="quanta-file-upload-wrapper flex-col">
    <div class="quanta-file-upload-modern" id="dropList">
        <div class="quanta-file-upload-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8">
                <path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" />
            </svg>
        </div>
        <div class="quanta-file-upload-text">Drag & drop files or click</div>
        <input type="file" multiple />
    </div>
    <div class="quanta-file-preview" id="previewList"></div>
</div>

Drag & drop files or click

The dashed box transitions its border and text color on hover/focus, exactly the same fast timing as .quanta-file-upload.

Drag & Drop

For drag/drop, wrap in .quanta-file-upload-modern. The JS listens for drag events to toggle .dragover and injects files on drop.

<div class="quanta-file-upload-wrapper flex-col">
    <div class="quanta-file-upload-modern" id="dropList">
        <div class="quanta-file-upload-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8">
                <path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" />
            </svg>
        </div>
        <div class="quanta-file-upload-text">Drag & drop files or click</div>
        <input type="file" multiple />
    </div>
    <div class="quanta-file-preview" id="previewList"></div>
</div>

Drag & drop files or click

When you drop, the JS reads e.dataTransfer.files, sets input.files, and invokes the same preview routine.

Thumbnail Preview

To show image thumbnails, call setupUpload(..., { type: 'thumb', … }) and add .quanta-file-upload-show-preview around your preview container.

<div id="boxImage" class="quanta-image-box-wrapper">
    <img src="https://as1.ftcdn.net/jpg/10/22/24/80/1000_F_1022248039_7LDxHRi3Mlt9BK3wzLBUGZp9XAO1gt2s.webp" alt="Upload Avatar" class="quanta-clickable-image" />
    <input type="file" accept="image/*" style="display: none;" />
</div>

Size Variants

Control padding & font‑size with: .quanta-file-upload-sm / .-lg,

Select File