Get support Purchase Now Preview Demo

File upload (Dropzone)

File uploads made easy.

Dropzone documentation share-external-link-1

Basic usage

Use the data-dropzone on any tag and within an HTML structure with a .dz-message class. This will be the placeholder of the dropzone and will be replaced with the upload preview, which is defined within our javascript code.

Just drag & drop a file to the dropzone or click on it. You can upload multiple files. Be aware, that the files won't actually be uploaded, it's for demo purposes only.

...
Drag and drop your file here

or

Browse files 
<div class="dropzone text-center px-4 py-6" data-dropzone>
    <div class="dz-message">
        <img class="avatar avatar-xxl mb-3" src="../assets/images/illustrations/upload-illustration.svg" alt="...">

        <h5 class="mb-4">Drag and drop your file here</h5>
        <p class="mb-4">or</p>

        <span class="btn btn-sm btn-gray-300">Browse files</span>
    </div>
</div>

In modal

You can easily use within a modal.

<a href="javascript: void(0);" class="btn btn-primary" title="Add attachement" data-bs-toggle="modal" data-bs-target="#uploadFilesModal1">
    Upload file
</a>

<div class="modal fade" id="uploadFilesModal1" tabindex="-1" role="dialog" aria-labelledby="uploadFilesModalTitle1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header pb-0">
                <h3 id="uploadFilesModalTitle1" class="modal-title">Add files</h3>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="dropzone text-center px-4 py-6" data-dropzone>
                    <div class="dz-message">
                        <img class="avatar avatar-xxl mb-3" src="../assets/images/illustrations/upload-illustration.svg" alt="...">

                        <h5 class="mb-4">Drag and drop your file here</h5>
                        <p class="mb-4">or</p>

                        <span class="btn btn-sm btn-gray-300">Browse files</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

In modal (with upload button)

Use data-upload-files and data-cancel-files on additional buttons, and add data-dropzone='{"autoProcessQueue": false}' to your default attribute. You can add any other Dropzone-defined options here.

<a href="javascript: void(0);" class="btn btn-dark" title="Add attachement" data-bs-toggle="modal" data-bs-target="#uploadFilesModal2">
    Upload file
</a>
    
<div class="modal fade" id="uploadFilesModal2" tabindex="-1" role="dialog" aria-labelledby="uploadFilesModalTitle2" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header pb-0">
                <h3 id="uploadFilesModalTitle2" class="modal-title">Add files</h3>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="dropzone text-center px-4 py-6" data-dropzone='{"autoProcessQueue": false}'>
                    <div class="dz-message">
                        <img class="avatar avatar-xxl mb-3" src="../assets/images/illustrations/upload-illustration.svg" alt="...">

                        <h5 class="mb-4">Drag and drop your file here</h5>
                        <p class="mb-4">or</p>

                        <span class="btn btn-sm btn-gray-300">Browse files</span>
                    </div>
                </div>
            </div>

            <div class="modal-footer pt-0">
                <button type="button" class="btn btn-light" data-cancel-files data-bs-dismiss="modal" aria-label="Close">Cancel</button>

                <button type="button" class="btn btn-primary" data-upload-files>Upload</button>
            </div>
        </div>
    </div>
</div>