Django Dropzone

-
Pro Component

Dropzone JS is an open-source library that provides drag’n’ drop file uploads with image previews. It is lightweight, doesn’t depend on any other library (like jQuery) and is highly customisable. Dropzone JS supports image previews and shows nice progress bars.
Keep reading our Django Dropzone JS examples and learn how to use this plugin.

Usage

JS

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

<script src="assets/vendor/dropzone/dist/min/dropzone.min.js"></script>

Examples

Copy any of the code examples below and paste it in your project after you integrated the needed resources.

Dropzones will throw an error if you try to upload any file since it is not configured for server-side processing.

Single file

... 
<div class="dropzone dropzone-single" data-toggle="dropzone" data-dropzone-url="http://">
    <div class="fallback">
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="dropzoneBasicUpload">
            <label class="custom-file-label" for="dropzoneBasicUpload">Choose file</label>
        </div>
    </div>

    <div class="dz-preview dz-preview-single">
        <div class="dz-preview-cover">
            <img class="dz-preview-img" src="https://argon-dashboard-pro-svelte.creative-tim.com/img/theme/img-1-1000x600.jpg" alt="..." data-dz-thumbnail>
        </div>
    </div>
</div>

Multiple files

<div class="dropzone dropzone-multiple" data-toggle="dropzone" data-dropzone-multiple data-dropzone-url="http://">
    <div class="fallback">
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="dropzoneMultipleUpload" multiple>
            <label class="custom-file-label" for="dropzoneMultipleUpload">Choose file</label>
        </div>
    </div>
    <ul class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush">
        <li class="list-group-item px-0">
            <div class="row align-items-center">
                <div class="col-auto">
                    <div class="avatar">
                        <img class="avatar-img rounded" src="https://argon-dashboard-pro-svelte.creative-tim.com/img/theme/img-1-1000x600.jpg" alt="..." data-dz-thumbnail>
                    </div>
                </div>
                <div class="col ml--3">
                    <h4 class="mb-1" data-dz-name>...</h4>
                    <p class="small text-muted mb-0" data-dz-size>...</p>
                </div>
                <div class="col-auto">
                    <div class="dropdown">
                        <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a href="#" class="dropdown-item" data-dz-remove>
                                Remove
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>