Dropzone.js - only show progress of complete upload

Question

I'm using dropzone.js to upload files to my server. That's how the file looks like:

<div id="full_site">
    <form id="uploadFile" method="post" name="uploadFile" action="upload.php"
          class="dropzone needsclick dz-clickable full-height">
        <span id="tmp-path"></span>
        <div class="dz-message"><b></b></div>
    </form>
</body>


<script>
    $(document).ready(function () {
        Dropzone.autoDiscover = false;

        Dropzone.options.uploadFile = {
            init: function () {
                this.on("success", function (file, responseText) {
                    file.previewTemplate.appendChild(document.createTextNode(responseText));
                });

                this.on("sending", function (file) {
                    $("#tmp-path").html('<input type="hidden" name="path" value="' + file.fullPath + '" />')
                });
            }
        };

        var myDropzone = new Dropzone("#uploadFile", {
            url: "upload.php"
        });
    });
</script>

What I try to achieve is, that there are no upload previews shown any more, so they are no previews for each file any more, but a progress bar, that show's the overall process of the complete upload (maybe only show an error if there is one, but otherwise do not show every single item). Is there any way I can achieve this?

Edit: an optional point would be to show this progress bar in a bootstrap modal, so it doesn't change anything on the site when you upload something.

Adam Adam · Accepted Answer · 2016-04-12T15:48:28

There are a couple parts to this. First, you want to avoid having any preview template for items that have been queued or are uploading. I think dropzone needs some kind of object, so you can basically do this by setting the previewTemplate option in the dropzone initialization to a div with nothing inside of it:

var myDropzone = new Dropzone("#uploadFile", {
    url: "upload.php",
    previewTemplate: "<div></div>"
});

The other part is the progress bar. To accomplish this, you could add an event listener for addedfile to create your progress bar

myDropzone.on("addedfile", function (file) {
     // Build progress bar here
});

Then, use the totaluploadprogress event from dropzone to update the progress on your progress bar:

myDropzone.on("totaluploadprogress", function(progress) {
    // Update progress bar with the value in the variable "progress", which 
    // is the % total upload progress from 0 to 100
});

Hopefully this points you in the right direction. There will of course be other cleanup needed, like when to hide the total progress bar, etc.

Dropzone.js - only show progress of complete upload

1 Answers