CODEWITHSUNDEEP
javascriptdropzone.js
Tim
Tim

Reputation: 3131

Files loaded from server in Dropzone are shown in the queue

I've followed this FAQ and various other SO questions regarding showing files in dropzone that are already on the server.

I'm having trouble showing the files in their "completed" state, ie hide start/cancel upload buttons, show delete button.

According to the FAQ, this line should take care of it:

// Make sure that there is no progress bar, etc...
myDropzone.emit("complete", mockFile);

Unfortunately, the files are still showing as if they have just been added to the upload queue.

Files from server shown in upload queue

Can anyone point me in the right direction?

    var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/upload/", // Set the url
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
    init: function () {
        var myDropzone = this;

        var thumbnailUrls = [
            {name: 'myimage1.jpg', size: 312, type: 'image/jpeg', url: 'skdfjlk'},
            {name: 'another2.png', size: 0928, type: 'image/png', url: 'aeserre'}
        ];

        //Populate any existing thumbnails
        if (thumbnailUrls) {
            for (var i = 0; i < thumbnailUrls.length; i++) {
                var mockFile = {
                    name: thumbnailUrls[i].name,
                    size: thumbnailUrls[i].size,
                    type: thumbnailUrls[i].type,
                    status: Dropzone.ADDED,
                    url: thumbnailUrls[i].url
                };

                // Call the default addedfile event handler
                myDropzone.emit("addedfile", mockFile);

                // And optionally show the thumbnail of the file:
                myDropzone.emit("thumbnail", mockFile, thumbnailUrls[i]);

                myDropzone.emit("complete", mockFile);

                myDropzone.files.push(mockFile);
            }
        }
    }
});

Upvotes: 1

Views: 2012

Answers (1)

enyo
enyo

Reputation: 16706

The problem is, that the bootstrap configuration that you are using, only hides the Start and Cancel button on success. You have to ways to approach this:

  1. Change the CSS to hide/show the appropriate buttons depending on the .dz-complete instead of the .dz-success class (Code below)
  2. Emit a success event in addition to the complete event (you can try this, by simply executing this in your browser: myDropzone.emit('success', myDropzone.files[0]);

This would be the updated CSS:

/* Hide the start and cancel buttons and show the delete button */
#previews .file-row.dz-complete .start,
#previews .file-row.dz-complete .cancel {
  display: none;
}
#previews .file-row.dz-complete .delete {
  display: block;
}

Upvotes: 2

Related Questions