dropzone.js Suppress progress bar when retrieving from server

Question

Using dropzone.js, I've had no issues getting it to work, including retrieving images already previously uploaded to the server.

The only problem I have is when I retrieve those files from the server on a page refresh (meaning they weren't uploaded during this page's current usage), the upload progress bar is permanently displayed. Is there any way to suppress the progress bar for images previously uploaded? I would like to continue to use the progress bars when uploading and don't want to remove the css from the template.

Not that it's helpful in this case, but here is the code I'm using to retrieve the files and display them in a remote previews div.

Dropzone.options.myDropzone = {
    previewsContainer: document.getElementById("previews"),
    init: function() 
    {
    thisDropzone = this;

    $.get('../cgi/fileUpload.php', function(data) 
    {
        $.each(data, function(key,value)
        {
            var mockFile = { name: value.name, size: value.size};
            thisDropzone.options.addedfile.call(thisDropzone, mockFile);
            thisDropzone.options.thumbnail.call(thisDropzone, mockFile, value.uploaddir+value.name);

            var strippedName = (value.name).slice(11);
            fileList[i] = {"serverFileName" : value.name, "fileName" : value.name, "fileSize" : value.size, "fileId" : i };
            i++;


            var removeButton = Dropzone.createElement("<button class=\"btn btnremove\" style=\"width: 100%;\">Remove file</button>");

            var _this = this;

            removeButton.addEventListener("click", function(e) 
            {

                e.preventDefault();
                e.stopPropagation();

                thisDropzone.removeFile(mockFile);

            });

            mockFile.previewElement.appendChild(removeButton);

        });
    });
},
url: "../cgi/fileUpload.php"
};

if they are already uploaded shouldn't the refresh retrieve them from the server? — Miro, Mar 08 '15 at 15:30
Yes, I would like them to be retrieved without the progress bar though. — tllewellyn, Mar 08 '15 at 15:37

score 19 · Answer 1 · answered Sep 03 '15 at 12:45

19

Make sure that there is no progress bar, etc...

thisDropzone.emit("complete", mockFile);

FAQ Dropzone.JS

answered Sep 03 '15 at 12:45

eclaude

846
14
30

score 11 · Answer 2 · edited Mar 30 '17 at 10:13

11

This is an old question but I had the same issue. My solution was to edit my .css file:

.dz-progress {
  /* progress bar covers file name */
  display: none !important;
}

edited Mar 30 '17 at 10:13

Valery Viktorovsky

6,487
3
39
47

answered Sep 15 '16 at 21:52

Stephen Bade

111
1
2

score 9 · Answer 3 · edited Dec 24 '16 at 12:44

9

I had same problem.

$('.dz-progress').hide();

It would be great if you use .hide() instead of .remove() method. Because .remove() remove that div permanent.

edited Dec 24 '16 at 12:44

Panther

3,312
9
27
50

answered Dec 15 '16 at 09:26

Girish Rathod

571
4
14

1

Yes. It is resolved using $('.dz-progress').hide(); @Panther – Girish Rathod Dec 24 '16 at 05:57

score 6 · Accepted Answer · answered Mar 08 '15 at 16:34

6

Answered! Chose to just remove the divs using jquery after they were delivered:

$(".dz-progress").remove();

Not overly elegant, but it works.

answered Mar 08 '15 at 16:34

tllewellyn

903
2
7
28

4

yes, or you could use `$('.dz-preview').addClass('dz-complete');` – Miro Mar 08 '15 at 16:43

score 0 · Answer 5 · answered May 15 '17 at 10:21

0

Try this worked for me $(".spinner").hide();

answered May 15 '17 at 10:21

Suneth Senanayake

190
1
11

score 0 · Answer 6 · answered Apr 09 '19 at 15:54

you can try this and work

init: function() {
            this.on("maxfilesexceeded", function(file) {
                this.removeAllFiles();
                this.addFile(file);
            });
            this.on("addedfile", function(file) {
                console.log("Added file.");
                $(this.previewsContainer).closest('.crm-upload-wrap').find('.badge').html(this.files.length);
                console.log(this);
                console.log(file);
            });
            var mockFile = { name: "myimage.jpg", size: 1235, type: "image/jpeg", serverId: 151987, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier)
            this.emit("addedfile", mockFile);
            this.options.thumbnail.call(this, mockFile, 'https://lh3.googleusercontent.com/40gtienq1vthvuWpzCErQJqucB6oxANPHawkEiF6BEJH0Q7mJwHuOyUeRwMBIGb8vO8=s128');
            this.emit("success", mockFile);
            this.emit("complete", mockFile);
            this.files.push(mockFile);
            $(this.previewsContainer).closest('.crm-upload-wrap').find('.badge').html(this.files.length);
            
            
            $(this.previewsContainer).find('.dz-progress').hide(); //<-- okkk
},

score 0 · Answer 7 · answered May 15 '20 at 07:16

If you have any class with "spinner", this will hide all of those elements. There is a "dz-preview" class for the div element that displays the progress. As mentioned in other responses, you can either augment the existing class to trick Dropzone into thinking the upload completed or you can purge the element with class "dz-preview".

dropzone.js Suppress progress bar when retrieving from server

7 Answers7