File Uploader
A customizable file uploader built with Tailwind CSS and Dropzone.js, supporting drag-and-drop uploads, file previews, and single or multiple file handling.
| Class Name | Type | Description |
|---|---|---|
| dz-list-preview | Style | List layout preview |
| dz-thumbnail-preview | Style | Thumbnail layout preview |
| dz-preview-template | Style | Predefined preview structure |
| dz-file-info | Style | File name and size |
| dz-dropbox-preview | Modifier | Dropbox-style preview |
| dropzone-avatar | Modifier | Circular avatar uploader |
The File Uploader component uses the Dropzone.js plugin for its core functionality, while Hummingbird handles the visual styling. Please refer to the official Dropzone.js documentation for initialization instructions.
How to use
1. Install Dropzone.js
$ npm install --save dropzone2. Import CSS
Import styles after importing Tailwind and Hummingbird CSS:
@import '@hummingbirdui/hummingbird/src/plugins/dropzone.css';3. Initialization
let myDropzone = new Dropzone("div#myId", { url: "/file/post"});List preview
Use dz-list-preview to display files in a list style, dz-preview-template to define each file’s preview, and dz-file-info to style the name and size.
HTML
<form action="/api/upload" class="dropzone" data-dropzone="dropzone-list-preview">
<div class="dz-message">
<div class="flex items-center justify-center gap-2">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.25 17.5C3.91667 17.5 3.625 17.375 3.375 17.125C3.125 16.875 3 16.5833 3 16.25V3.75C3 3.41667 3.125 3.125 3.375 2.875C3.625 2.625 3.91667 2.5 4.25 2.5H12.1458C12.3264 2.5 12.4757 2.55903 12.5937 2.67708C12.7118 2.79514 12.7708 2.94444 12.7708 3.125C12.7708 3.30556 12.7118 3.45486 12.5937 3.57292C12.4757 3.69097 12.3264 3.75 12.1458 3.75H4.25V16.25H16.75V8.375C16.75 8.19444 16.809 8.04514 16.9271 7.92708C17.0451 7.80903 17.1944 7.75 17.375 7.75C17.5556 7.75 17.7049 7.80903 17.8229 7.92708C17.941 8.04514 18 8.19444 18 8.375V16.25C18 16.5833 17.875 16.875 17.625 17.125C17.375 17.375 17.0833 17.5 16.75 17.5H4.25ZM15.7083 7.125C15.5278 7.125 15.3785 7.06597 15.2604 6.94792C15.1424 6.82986 15.0833 6.68056 15.0833 6.5V5.4375H14.0208C13.8403 5.4375 13.691 5.37847 13.5729 5.26042C13.4549 5.14236 13.3958 4.99306 13.3958 4.8125C13.3958 4.63194 13.4549 4.48264 13.5729 4.36458C13.691 4.24653 13.8403 4.1875 14.0208 4.1875H15.0833V3.125C15.0833 2.94444 15.1424 2.79514 15.2604 2.67708C15.3785 2.55903 15.5278 2.5 15.7083 2.5C15.8889 2.5 16.0382 2.55903 16.1562 2.67708C16.2743 2.79514 16.3333 2.94444 16.3333 3.125V4.1875H17.3958C17.5764 4.1875 17.7257 4.24653 17.8437 4.36458C17.9618 4.48264 18.0208 4.63194 18.0208 4.8125C18.0208 4.99306 17.9618 5.14236 17.8437 5.26042C17.7257 5.37847 17.5764 5.4375 17.3958 5.4375H16.3333V6.5C16.3333 6.68056 16.2743 6.82986 16.1562 6.94792C16.0382 7.06597 15.8889 7.125 15.7083 7.125ZM6.14583 14.125H14.875C15.0139 14.125 15.1111 14.0694 15.1667 13.9583C15.2222 13.8472 15.2083 13.7361 15.125 13.625L12.75 10.4583C12.6806 10.375 12.5972 10.3333 12.5 10.3333C12.4028 10.3333 12.3194 10.375 12.25 10.4583L9.85417 13.6042L8.14583 11.3542C8.07639 11.2708 7.99305 11.2292 7.89583 11.2292C7.79861 11.2292 7.71528 11.2708 7.64583 11.3542L5.89583 13.625C5.82639 13.7361 5.82292 13.8472 5.88542 13.9583C5.94792 14.0694 6.03472 14.125 6.14583 14.125ZM4.25 8.375V16.25V3.75V6.60417C4.25 6.78472 4.25 6.93403 4.25 7.05208C4.25 7.17014 4.25 7.22917 4.25 7.22917V7.75C4.25 7.93056 4.25 8.07986 4.25 8.19792C4.25 8.31597 4.25 8.375 4.25 8.375Z"
fill="currentColor"></path>
</svg>
<p class="mb-0 text-xs">
<span>Drop files here</span>
<span class="mx-1 text-subtle">or</span>
<span class="text-primary">browse from device</span>
</p>
</div>
</div>
</form>
<div data-dz-preview="dz-list-preview" class="dz-list-preview">
<div class="dz-preview-template hidden">
<div class="dz-preview dz-file-preview">
<div class="dz-image">
<img src="/images/file-icon.svg" data-dz-thumbnail />
</div>
<div class="dz-file-info">
<span class="dz-filename" data-dz-name></span>
<span class="dz-size text-xs" data-dz-size></span>
</div>
<button data-dz-remove type="button" class='btn btn-icon btn-sm'>
<svg width="10" height="10" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.04423 11.131L2.55172 17.623C2.26206 17.913 1.91089 18.0547 1.49822 18.048C1.08522 18.0417 0.733892 17.8937 0.444225 17.604C0.154558 17.3143 0.00972484 16.9598 0.00972484 16.5405C0.00972484 16.1212 0.154558 15.7667 0.444225 15.477L6.91722 9.004L0.425225 2.5615C0.135225 2.27184 -0.00644195 1.91733 0.000224719 1.498C0.00655805 1.079 0.154558 0.724667 0.444225 0.435001C0.733892 0.145001 1.08839 0 1.50772 0C1.92706 0 2.28156 0.145001 2.57123 0.435001L9.04423 6.927L15.4867 0.435001C15.7764 0.145001 16.1276 0 16.5402 0C16.9532 0 17.3046 0.145001 17.5942 0.435001C17.9046 0.745001 18.0597 1.1045 18.0597 1.5135C18.0597 1.9225 17.9046 2.27184 17.5942 2.5615L11.1212 9.004L17.6132 15.4965C17.9032 15.7862 18.0482 16.1373 18.0482 16.55C18.0482 16.963 17.9032 17.3143 17.6132 17.604C17.3032 17.9143 16.9437 18.0695 16.5347 18.0695C16.1257 18.0695 15.7764 17.9143 15.4867 17.604L9.04423 11.131Z" fill="currentColor"/>
</svg>
</button>
</div>
</div>
</div>const previewsContainer = document.querySelector('[data-dz-preview="dz-list-preview"]');
const previewTemplate = previewsContainer.querySelector('.dz-preview-template');
new Dropzone('[data-dropzone="dropzone-list-preview"]', {
previewsContainer,
previewTemplate: previewTemplate.innerHTML,
});Thumbnail preview
Use dz-thumbnail-preview to display files as thumbnails, dz-preview-template to define each preview.
HTML
<form action="/api/upload" class="dropzone" data-dropzone="dropzone-thumbnail-preview">
<div class="dz-message">
<div class="flex items-center justify-center gap-2">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.25 17.5C3.91667 17.5 3.625 17.375 3.375 17.125C3.125 16.875 3 16.5833 3 16.25V3.75C3 3.41667 3.125 3.125 3.375 2.875C3.625 2.625 3.91667 2.5 4.25 2.5H12.1458C12.3264 2.5 12.4757 2.55903 12.5937 2.67708C12.7118 2.79514 12.7708 2.94444 12.7708 3.125C12.7708 3.30556 12.7118 3.45486 12.5937 3.57292C12.4757 3.69097 12.3264 3.75 12.1458 3.75H4.25V16.25H16.75V8.375C16.75 8.19444 16.809 8.04514 16.9271 7.92708C17.0451 7.80903 17.1944 7.75 17.375 7.75C17.5556 7.75 17.7049 7.80903 17.8229 7.92708C17.941 8.04514 18 8.19444 18 8.375V16.25C18 16.5833 17.875 16.875 17.625 17.125C17.375 17.375 17.0833 17.5 16.75 17.5H4.25ZM15.7083 7.125C15.5278 7.125 15.3785 7.06597 15.2604 6.94792C15.1424 6.82986 15.0833 6.68056 15.0833 6.5V5.4375H14.0208C13.8403 5.4375 13.691 5.37847 13.5729 5.26042C13.4549 5.14236 13.3958 4.99306 13.3958 4.8125C13.3958 4.63194 13.4549 4.48264 13.5729 4.36458C13.691 4.24653 13.8403 4.1875 14.0208 4.1875H15.0833V3.125C15.0833 2.94444 15.1424 2.79514 15.2604 2.67708C15.3785 2.55903 15.5278 2.5 15.7083 2.5C15.8889 2.5 16.0382 2.55903 16.1562 2.67708C16.2743 2.79514 16.3333 2.94444 16.3333 3.125V4.1875H17.3958C17.5764 4.1875 17.7257 4.24653 17.8437 4.36458C17.9618 4.48264 18.0208 4.63194 18.0208 4.8125C18.0208 4.99306 17.9618 5.14236 17.8437 5.26042C17.7257 5.37847 17.5764 5.4375 17.3958 5.4375H16.3333V6.5C16.3333 6.68056 16.2743 6.82986 16.1562 6.94792C16.0382 7.06597 15.8889 7.125 15.7083 7.125ZM6.14583 14.125H14.875C15.0139 14.125 15.1111 14.0694 15.1667 13.9583C15.2222 13.8472 15.2083 13.7361 15.125 13.625L12.75 10.4583C12.6806 10.375 12.5972 10.3333 12.5 10.3333C12.4028 10.3333 12.3194 10.375 12.25 10.4583L9.85417 13.6042L8.14583 11.3542C8.07639 11.2708 7.99305 11.2292 7.89583 11.2292C7.79861 11.2292 7.71528 11.2708 7.64583 11.3542L5.89583 13.625C5.82639 13.7361 5.82292 13.8472 5.88542 13.9583C5.94792 14.0694 6.03472 14.125 6.14583 14.125ZM4.25 8.375V16.25V3.75V6.60417C4.25 6.78472 4.25 6.93403 4.25 7.05208C4.25 7.17014 4.25 7.22917 4.25 7.22917V7.75C4.25 7.93056 4.25 8.07986 4.25 8.19792C4.25 8.31597 4.25 8.375 4.25 8.375Z"
fill="currentColor"></path>
</svg>
<p class="mb-0 text-xs">
<span>Drop files here</span>
<span class="mx-1 text-subtle">or</span>
<span class="text-primary">browse from device</span>
</p>
</div>
</div>
</form>
<div data-dz-preview="dz-thumbnail-preview" class="dz-thumbnail-preview">
<div class="dz-preview-template hidden">
<div class="dz-preview dz-file-preview">
<div class="dz-image">
<img src="/images/file-icon.svg" data-dz-thumbnail />
</div>
<button data-dz-remove class="dz-file-remove">
<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.39766 4.34995L2.64766 6.09995C2.59766 6.14995 2.53932 6.17495 2.47266 6.17495C2.40599 6.17495 2.34766 6.14995 2.29766 6.09995C2.24766 6.04995 2.22266 5.99162 2.22266 5.92495C2.22266 5.85828 2.24766 5.79995 2.29766 5.74995L4.04766 3.99995L2.29766 2.24995C2.24766 2.19995 2.22266 2.14162 2.22266 2.07495C2.22266 2.00828 2.24766 1.94995 2.29766 1.89995C2.34766 1.84995 2.40599 1.82495 2.47266 1.82495C2.53932 1.82495 2.59766 1.84995 2.64766 1.89995L4.39766 3.64995L6.14766 1.89995C6.19766 1.84995 6.25599 1.82495 6.32266 1.82495C6.38932 1.82495 6.44766 1.84995 6.49766 1.89995C6.54766 1.94995 6.57266 2.00828 6.57266 2.07495C6.57266 2.14162 6.54766 2.19995 6.49766 2.24995L4.74766 3.99995L6.49766 5.74995C6.54766 5.79995 6.57266 5.85828 6.57266 5.92495C6.57266 5.99162 6.54766 6.04995 6.49766 6.09995C6.44766 6.14995 6.38932 6.17495 6.32266 6.17495C6.25599 6.17495 6.19766 6.14995 6.14766 6.09995L4.39766 4.34995Z" fill="currentColor"/>
</svg>
</button>
</div>
</div>
</div>const previewsContainer = document.querySelector('[data-dz-preview="dz-thumbnail-preview"]');
const previewTemplate = previewsContainer.querySelector('.dz-preview-template');
new Dropzone('[data-dropzone="dropzone-thumbnail-preview"]', {
previewsContainer,
previewTemplate: previewTemplate.innerHTML,
});Avatar dropzone
Add the dropzone-avatar modifier class with dropzone to create a circular avatar uploader.
HTML
<form action="/api/upload" class="dropzone dropzone-avatar" data-dropzone="dropzone-avatar">
<div class="dz-message">
<div class="flex flex-col items-center justify-center gap-2">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.04165 15.4166C10.0416 15.4166 10.8819 15.0764 11.5625 14.3958C12.243 13.7153 12.5833 12.868 12.5833 11.8541C12.5833 10.8541 12.243 10.0173 11.5625 9.34373C10.8819 8.67012 10.0416 8.33331 9.04165 8.33331C8.02776 8.33331 7.18401 8.67012 6.5104 9.34373C5.83679 10.0173 5.49998 10.8541 5.49998 11.8541C5.49998 12.868 5.83679 13.7153 6.5104 14.3958C7.18401 15.0764 8.02776 15.4166 9.04165 15.4166ZM1.95831 18.4583C1.62498 18.4583 1.33331 18.3333 1.08331 18.0833C0.833313 17.8333 0.708313 17.5416 0.708313 17.2083V6.52081C0.708313 6.20137 0.833313 5.91317 1.08331 5.65623C1.33331 5.39929 1.62498 5.27081 1.95831 5.27081H5.02081L6.16665 3.89581C6.27776 3.74304 6.41665 3.63192 6.58331 3.56248C6.74998 3.49304 6.93054 3.45831 7.12498 3.45831H11.75C11.9305 3.45831 12.0798 3.51734 12.1979 3.6354C12.316 3.75345 12.375 3.90276 12.375 4.08331V6.52081H1.95831V17.2083H16.125V9.02081H16.75C16.8333 9.02081 16.9132 9.03817 16.9896 9.0729C17.066 9.10762 17.1319 9.15276 17.1875 9.20831C17.243 9.26387 17.2882 9.32984 17.3229 9.40623C17.3576 9.48262 17.375 9.56248 17.375 9.64581V17.2083C17.375 17.5416 17.2465 17.8333 16.9896 18.0833C16.7326 18.3333 16.4444 18.4583 16.125 18.4583H1.95831ZM16.125 5.27081H14.9583C14.7778 5.27081 14.6285 5.21179 14.5104 5.09373C14.3923 4.97567 14.3333 4.82637 14.3333 4.64581C14.3333 4.46526 14.3923 4.31595 14.5104 4.1979C14.6285 4.07984 14.7778 4.02081 14.9583 4.02081H16.125V2.83331C16.125 2.65276 16.184 2.50345 16.3021 2.3854C16.4201 2.26734 16.5694 2.20831 16.75 2.20831C16.9305 2.20831 17.0798 2.26734 17.1979 2.3854C17.316 2.50345 17.375 2.65276 17.375 2.83331V4.02081H18.5625C18.743 4.02081 18.8923 4.07984 19.0104 4.1979C19.1285 4.31595 19.1875 4.46526 19.1875 4.64581C19.1875 4.82637 19.1285 4.97567 19.0104 5.09373C18.8923 5.21179 18.743 5.27081 18.5625 5.27081H17.375V6.43748C17.375 6.61803 17.316 6.76734 17.1979 6.8854C17.0798 7.00345 16.9305 7.06248 16.75 7.06248C16.5694 7.06248 16.4201 7.00345 16.3021 6.8854C16.184 6.76734 16.125 6.61803 16.125 6.43748V5.27081ZM1.95831 6.52081V8.39581C1.95831 8.57637 1.95831 8.72567 1.95831 8.84373C1.95831 8.96179 1.95831 9.02081 1.95831 9.02081V17.2083V6.52081Z" fill="currentColor"/>
</svg>
<p class="mb-0 text-xs">Upload Avatar</p>
</div>
</div>
</form>new Dropzone('[data-dropzone="dropzone-avatar"]', {
maxFiles: 1,
acceptedFiles: 'image/*',
init: function (this: Dropzone) {
this.on('maxfilesexceeded', function (this: Dropzone, file) {
this.removeAllFiles();
this.addFile(file);
});
},
});FileDropBox
Use the dz-dropbox-preview modifier with dz-thumbnail-preview to create a box-style file uploader with thumbnails preview.
HTML
<div data-dz-preview="dz-dropbox-preview" class="dz-thumbnail-preview dz-dropbox-preview">
<div class="dz-preview-template hidden">
<div class="dz-preview dz-file-preview">
<div class="dz-image">
<img src="/images/file-icon.svg" data-dz-thumbnail />
</div>
<button data-dz-remove class="dz-file-remove">
<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.39766 4.34995L2.64766 6.09995C2.59766 6.14995 2.53932 6.17495 2.47266 6.17495C2.40599 6.17495 2.34766 6.14995 2.29766 6.09995C2.24766 6.04995 2.22266 5.99162 2.22266 5.92495C2.22266 5.85828 2.24766 5.79995 2.29766 5.74995L4.04766 3.99995L2.29766 2.24995C2.24766 2.19995 2.22266 2.14162 2.22266 2.07495C2.22266 2.00828 2.24766 1.94995 2.29766 1.89995C2.34766 1.84995 2.40599 1.82495 2.47266 1.82495C2.53932 1.82495 2.59766 1.84995 2.64766 1.89995L4.39766 3.64995L6.14766 1.89995C6.19766 1.84995 6.25599 1.82495 6.32266 1.82495C6.38932 1.82495 6.44766 1.84995 6.49766 1.89995C6.54766 1.94995 6.57266 2.00828 6.57266 2.07495C6.57266 2.14162 6.54766 2.19995 6.49766 2.24995L4.74766 3.99995L6.49766 5.74995C6.54766 5.79995 6.57266 5.85828 6.57266 5.92495C6.57266 5.99162 6.54766 6.04995 6.49766 6.09995C6.44766 6.14995 6.38932 6.17495 6.32266 6.17495C6.25599 6.17495 6.19766 6.14995 6.14766 6.09995L4.39766 4.34995Z" fill="currentColor"/>
</svg>
</button>
</div>
</div>
<form action="/api/upload" class="dropzone" data-dropzone="file-dropbox">
<div class="dz-message">
<div class="flex items-center justify-center gap-2">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.25 17.5C3.91667 17.5 3.625 17.375 3.375 17.125C3.125 16.875 3 16.5833 3 16.25V3.75C3 3.41667 3.125 3.125 3.375 2.875C3.625 2.625 3.91667 2.5 4.25 2.5H12.1458C12.3264 2.5 12.4757 2.55903 12.5937 2.67708C12.7118 2.79514 12.7708 2.94444 12.7708 3.125C12.7708 3.30556 12.7118 3.45486 12.5937 3.57292C12.4757 3.69097 12.3264 3.75 12.1458 3.75H4.25V16.25H16.75V8.375C16.75 8.19444 16.809 8.04514 16.9271 7.92708C17.0451 7.80903 17.1944 7.75 17.375 7.75C17.5556 7.75 17.7049 7.80903 17.8229 7.92708C17.941 8.04514 18 8.19444 18 8.375V16.25C18 16.5833 17.875 16.875 17.625 17.125C17.375 17.375 17.0833 17.5 16.75 17.5H4.25ZM15.7083 7.125C15.5278 7.125 15.3785 7.06597 15.2604 6.94792C15.1424 6.82986 15.0833 6.68056 15.0833 6.5V5.4375H14.0208C13.8403 5.4375 13.691 5.37847 13.5729 5.26042C13.4549 5.14236 13.3958 4.99306 13.3958 4.8125C13.3958 4.63194 13.4549 4.48264 13.5729 4.36458C13.691 4.24653 13.8403 4.1875 14.0208 4.1875H15.0833V3.125C15.0833 2.94444 15.1424 2.79514 15.2604 2.67708C15.3785 2.55903 15.5278 2.5 15.7083 2.5C15.8889 2.5 16.0382 2.55903 16.1562 2.67708C16.2743 2.79514 16.3333 2.94444 16.3333 3.125V4.1875H17.3958C17.5764 4.1875 17.7257 4.24653 17.8437 4.36458C17.9618 4.48264 18.0208 4.63194 18.0208 4.8125C18.0208 4.99306 17.9618 5.14236 17.8437 5.26042C17.7257 5.37847 17.5764 5.4375 17.3958 5.4375H16.3333V6.5C16.3333 6.68056 16.2743 6.82986 16.1562 6.94792C16.0382 7.06597 15.8889 7.125 15.7083 7.125ZM6.14583 14.125H14.875C15.0139 14.125 15.1111 14.0694 15.1667 13.9583C15.2222 13.8472 15.2083 13.7361 15.125 13.625L12.75 10.4583C12.6806 10.375 12.5972 10.3333 12.5 10.3333C12.4028 10.3333 12.3194 10.375 12.25 10.4583L9.85417 13.6042L8.14583 11.3542C8.07639 11.2708 7.99305 11.2292 7.89583 11.2292C7.79861 11.2292 7.71528 11.2708 7.64583 11.3542L5.89583 13.625C5.82639 13.7361 5.82292 13.8472 5.88542 13.9583C5.94792 14.0694 6.03472 14.125 6.14583 14.125ZM4.25 8.375V16.25V3.75V6.60417C4.25 6.78472 4.25 6.93403 4.25 7.05208C4.25 7.17014 4.25 7.22917 4.25 7.22917V7.75C4.25 7.93056 4.25 8.07986 4.25 8.19792C4.25 8.31597 4.25 8.375 4.25 8.375Z"
fill="currentColor"></path>
</svg>
</div>
</div>
</form>
</div>const previewsContainer = document.querySelector('[data-dz-preview="dz-dropbox-preview"]');
const previewTemplate = previewsContainer.querySelector('.dz-preview-template');
new Dropzone('[data-dropzone="file-dropbox"]', {
previewsContainer,
previewTemplate: previewTemplate.innerHTML,
});Single file
HTML
<form action="/api/upload" class="dropzone" data-dropzone="dropzone-single">
<div class="dz-message">
<div class="flex items-center justify-center gap-2">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.25 17.5C3.91667 17.5 3.625 17.375 3.375 17.125C3.125 16.875 3 16.5833 3 16.25V3.75C3 3.41667 3.125 3.125 3.375 2.875C3.625 2.625 3.91667 2.5 4.25 2.5H12.1458C12.3264 2.5 12.4757 2.55903 12.5937 2.67708C12.7118 2.79514 12.7708 2.94444 12.7708 3.125C12.7708 3.30556 12.7118 3.45486 12.5937 3.57292C12.4757 3.69097 12.3264 3.75 12.1458 3.75H4.25V16.25H16.75V8.375C16.75 8.19444 16.809 8.04514 16.9271 7.92708C17.0451 7.80903 17.1944 7.75 17.375 7.75C17.5556 7.75 17.7049 7.80903 17.8229 7.92708C17.941 8.04514 18 8.19444 18 8.375V16.25C18 16.5833 17.875 16.875 17.625 17.125C17.375 17.375 17.0833 17.5 16.75 17.5H4.25ZM15.7083 7.125C15.5278 7.125 15.3785 7.06597 15.2604 6.94792C15.1424 6.82986 15.0833 6.68056 15.0833 6.5V5.4375H14.0208C13.8403 5.4375 13.691 5.37847 13.5729 5.26042C13.4549 5.14236 13.3958 4.99306 13.3958 4.8125C13.3958 4.63194 13.4549 4.48264 13.5729 4.36458C13.691 4.24653 13.8403 4.1875 14.0208 4.1875H15.0833V3.125C15.0833 2.94444 15.1424 2.79514 15.2604 2.67708C15.3785 2.55903 15.5278 2.5 15.7083 2.5C15.8889 2.5 16.0382 2.55903 16.1562 2.67708C16.2743 2.79514 16.3333 2.94444 16.3333 3.125V4.1875H17.3958C17.5764 4.1875 17.7257 4.24653 17.8437 4.36458C17.9618 4.48264 18.0208 4.63194 18.0208 4.8125C18.0208 4.99306 17.9618 5.14236 17.8437 5.26042C17.7257 5.37847 17.5764 5.4375 17.3958 5.4375H16.3333V6.5C16.3333 6.68056 16.2743 6.82986 16.1562 6.94792C16.0382 7.06597 15.8889 7.125 15.7083 7.125ZM6.14583 14.125H14.875C15.0139 14.125 15.1111 14.0694 15.1667 13.9583C15.2222 13.8472 15.2083 13.7361 15.125 13.625L12.75 10.4583C12.6806 10.375 12.5972 10.3333 12.5 10.3333C12.4028 10.3333 12.3194 10.375 12.25 10.4583L9.85417 13.6042L8.14583 11.3542C8.07639 11.2708 7.99305 11.2292 7.89583 11.2292C7.79861 11.2292 7.71528 11.2708 7.64583 11.3542L5.89583 13.625C5.82639 13.7361 5.82292 13.8472 5.88542 13.9583C5.94792 14.0694 6.03472 14.125 6.14583 14.125ZM4.25 8.375V16.25V3.75V6.60417C4.25 6.78472 4.25 6.93403 4.25 7.05208C4.25 7.17014 4.25 7.22917 4.25 7.22917V7.75C4.25 7.93056 4.25 8.07986 4.25 8.19792C4.25 8.31597 4.25 8.375 4.25 8.375Z"
fill="currentColor"></path>
</svg>
<p class="mb-0 text-xs">
<span>Drop files here</span>
<span class="mx-1 text-subtle">or</span>
<span class="text-primary">browse from device</span>
</p>
</div>
</div>
</form>
<div data-dz-preview="dz-single-preview" class="dz-list-preview">
<div class="dz-preview-template hidden">
<div class="dz-preview dz-file-preview">
<div class="dz-image">
<img src="/images/file-icon.svg" data-dz-thumbnail />
</div>
<div class="dz-file-info">
<span class="dz-filename" data-dz-name></span>
<span class="dz-size text-xs" data-dz-size></span>
</div>
<button data-dz-remove type="button" class='btn btn-icon btn-sm'>
<svg width="10" height="10" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.04423 11.131L2.55172 17.623C2.26206 17.913 1.91089 18.0547 1.49822 18.048C1.08522 18.0417 0.733892 17.8937 0.444225 17.604C0.154558 17.3143 0.00972484 16.9598 0.00972484 16.5405C0.00972484 16.1212 0.154558 15.7667 0.444225 15.477L6.91722 9.004L0.425225 2.5615C0.135225 2.27184 -0.00644195 1.91733 0.000224719 1.498C0.00655805 1.079 0.154558 0.724667 0.444225 0.435001C0.733892 0.145001 1.08839 0 1.50772 0C1.92706 0 2.28156 0.145001 2.57123 0.435001L9.04423 6.927L15.4867 0.435001C15.7764 0.145001 16.1276 0 16.5402 0C16.9532 0 17.3046 0.145001 17.5942 0.435001C17.9046 0.745001 18.0597 1.1045 18.0597 1.5135C18.0597 1.9225 17.9046 2.27184 17.5942 2.5615L11.1212 9.004L17.6132 15.4965C17.9032 15.7862 18.0482 16.1373 18.0482 16.55C18.0482 16.963 17.9032 17.3143 17.6132 17.604C17.3032 17.9143 16.9437 18.0695 16.5347 18.0695C16.1257 18.0695 15.7764 17.9143 15.4867 17.604L9.04423 11.131Z" fill="currentColor"/>
</svg>
</button>
</div>
</div>
</div>const previewsContainer = document.querySelector('[data-dz-preview="dz-single-preview"]');
const previewTemplate = previewsContainer.querySelector('.dz-preview-template');
new Dropzone('[data-dropzone="dropzone-single"]', {
previewsContainer,
previewTemplate: previewTemplate.innerHTML,
maxFiles: 1,
init: function (this: Dropzone) {
this.on('maxfilesexceeded', function (this: Dropzone, file) {
this.removeAllFiles();
this.addFile(file);
});
},
});CSS variables
File uploader styles can be customized using the following CSS variables:
.dropzone {
--uploader-padding: --spacing(6);
--uploader-bg: var(--background-color-subtle);
--uploader-border-color: var(--border-color-base);
--uploader-border-radius: var(--radius-xl);
--uploader-hover-border-color: var(--color-primary);
--uploader-hover-bg: --alpha(var(--color-primary) / 5%);
--uploader-avatar-overlay: --alpha(var(--color-contrast) / 70%);
--uploader-avatar-size: --spacing(40);
--uploader-preview-margin: --spacing(4);
--uploader-preview-size: --spacing(30);
--uploader-preview-border-radius: var(--radius-xl);
--uploader-details-padding: --spacing(8);
--uploader-details-font-size: var(--text-xs);
--uploader-details-color: var(--text-color-default);
--uploader-details-bg: var(--background-color-muted);
--uploader-details-border-radius: var(--radius-sm);
--uploader-mark-size: --spacing(12);
--uploader-mark-bg: --alpha(var(--color-dark) / 80%);
--uploader-error-mark-bg: --alpha(var(--color-danger) / 80%);
--uploader-success-mark-bg: --alpha(var(--color-success) / 80%);
--uploader-mark-border-radius: calc(infinity * 1px);
--uploader-progress-mark-height: --spacing(5);
--uploader-progress-mark-border-width: 3px;
--uploader-progress-mark-border-color: --alpha(var(--color-dark) / 80%);
--uploader-progress-mark-border-radius: var(--radius-xl);
--uploader-progress-mark-bg: --alpha(var(--color-dark) / 80%);
--uploader-progress-mark-upload-bg: var(--color-white);
--uploader-progress-mark-upload-radius: var(--radius-2xl);
--uploader-error-message-padding: --spacing(2);
--uploader-error-message-color: var(--color-white);
--uploader-error-message-font-size: var(--text-xs);
--uploader-error-message-width: --spacing(35);
--uploader-error-message-bg: var(--color-danger-dark);
--uploader-error-message-border-radius: var(--radius-lg);
}
.dz-list-preview {
--uploader-list-padding: --spacing(2);
--uploader-list-font-size: var(--text-sm);
--uploader-list-bg: var(--background-color-subtle);
--uploader-list-border-radius: var(--radius-lg);
--uploader-list-image-size: --spacing(13);
--uploader-list-image-border-width: 1px;
--uploader-list-image-border-color: var(--border-color-light);
--uploader-list-image-border-radius: var(--radius-lg);
}
.dz-thumbnail-preview {
--uploader-dropbox-size: --spacing(15);
--uploader-thumbnail-size: --spacing(14);
--uploader-thumbnail-border-width: 1px;
--uploader-thumbnail-border-color: var(--border-color-light);
--uploader-thumbnail-border-radius: var(--radius-lg);
--uploader-thumbnail-remove-btn-size: --spacing(3);
--uploader-thumbnail-remove-btn-bg: var(--color-dark);
--uploader-thumbnail-remove-btn-color: var(--color-white);
--uploader-thumbnail-remove-btn-radius: calc(infinity * 1px);
}