CODEWITHSUNDEEP
dropzone.js
seekay
seekay

Reputation: 2513

Dropzone - Replace filename with link after upload is complete?

I've integrated dropzone and it's working fine with the files getting uploaded etc. What I'd like to do is hide the progress bar once the upload is successful and replace the filename with a link to the actual upload file automatically. This would happen automatically as each file finished uploading...

Looking at the documentation, I know I should use

            this.on("success", function(file, response) {
                if (response.success == 'true') {
                  // hide progress bar '.dz-progress'
                  // replace .data-dz-name with url from response
                }
            });

However, I haven't been able to figure out how to get access to that specific html element to replace/hide etc.

Edit: I was able to use css classes from the original dropzone.css to hide/transition the progress bar. Now just need to find a way to replace the filename with an 'a' tag.

Upvotes: 0

Views: 2080

Answers (2)

Niket Pathak
Niket Pathak

Reputation: 6800

For Dropzone 5.x and above

The correct way to update the thumbnail is by modifying the Preview Template in the success callback as follows:

this.on("success", function(file, response) {
    // modify the preview template
    file.previewTemplate.appendChild(document.createTextNode(response.filePath));
});

Reference tutorial for Dropzone along with server side handling

Upvotes: 1

user3795616
user3795616

Reputation: 

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

or

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

and to replace .data-dz-name

$('.data-dz-name').html(url from response);

Upvotes: 0

Related Questions