File uploads

Drop a file, or choose it

A drop zone

The chosen files are listed and can be removed.

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

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>
</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>