File uploads

Drop a file, or choose it

A drop zone

The chosen files are listed, a photo with its thumbnail, and each can be removed.

Drop files here or choose themJPG, PNG or PDF, up to 10 MB

oat-flat-white.jpg95.7 KB

cappuccino.jpg162.1 KB

Show the code

<div class="w-100">
<label class="dropzone" data-dropzone="fu-1">
<input type="file" accept="image/*,.pdf" multiple>
<i class="ti ti-cloud-upload">
</i>
<b>Drop files here or choose them</b>
<span class="fs-sm">JPG, PNG or PDF, up to 10 MB</span>
</label>
<div class="stack tight mt-2" id="fu-1">
<div class="file-item">
<img class="file-thumb" src="assets/demo/products/oat-flat-white.jpg" alt="">
<div class="grow">
<b>oat-flat-white.jpg</b>
<small>95.7 KB</small>
</div>
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-tip="Remove" aria-label="Remove oat-flat-white.jpg" data-unfile>
<i class="ti ti-x">
</i>
</button>
</div>
<div class="file-item">
<img class="file-thumb" src="assets/demo/products/cappuccino.jpg" alt="">
<div class="grow">
<b>cappuccino.jpg</b>
<small>162.1 KB</small>
</div>
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-tip="Remove" aria-label="Remove cappuccino.jpg" data-unfile>
<i class="ti ti-x">
</i>
</button>
</div>
</div>
</div>

Photos as tiles

A product’s photos, each a tile with a remove button.

Drop photos here or choose themPNG or JPG, up to 5 MB each

Show the code

<div class="w-100">
<label class="dropzone" data-dropzone="fu-2">
<input type="file" accept="image/*" multiple>
<i class="ti ti-photo-up">
</i>
<b>Drop photos here or choose them</b>
<span class="fs-sm">PNG or JPG, up to 5 MB each</span>
</label>
<div class="photo-tiles mt-2" id="fu-2" data-photo-tiles>
<div class="photo-tile">
<img src="assets/demo/products/oat-flat-white.jpg" alt="oat-flat-white.jpg">
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-tip="Remove" aria-label="Remove oat-flat-white.jpg" data-unfile>
<i class="ti ti-x">
</i>
</button>
</div>
<div class="photo-tile">
<img src="assets/demo/products/cappuccino.jpg" alt="cappuccino.jpg">
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-tip="Remove" aria-label="Remove cappuccino.jpg" data-unfile>
<i class="ti ti-x">
</i>
</button>
</div>
<div class="photo-tile">
<img src="assets/demo/products/matcha-latte.jpg" alt="matcha-latte.jpg">
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-tip="Remove" aria-label="Remove matcha-latte.jpg" data-unfile>
<i class="ti ti-x">
</i>
</button>
</div>
</div>
</div>

A button

For a single file in a form.

Choose a photoJPG or PNG, square works best

Show the code

<label class="btn">
<i class="ti ti-upload">
</i>Choose a photo<input type="file" accept="image/*" class="sr-only">
</label>
<span class="fs-sm muted">JPG or PNG, square works best</span>