How to change thumbnail src value in Dropzone.js?
Asked Answered
C

3

5

I'm using Dropzone.js with jQuery to upload files to the server. Afer file uploaded I'm generating a "server-side" filename with the current url.

$('.dropzone').dropzone({
    init: function() {
        this.on('success', function(file) {
            var newname = generateServersideFilename(file.name); // this is my function
            // here I need a help to find the thumbnail <img> to set the 'src' attribute
        }
    }
});

How can I find the current thumbnail img to set the src attribute?

Cabstand answered 23/5, 2014 at 20:28 Comment(1)
Not the best way, but working: $('span:contains("'+file.name+'")').closest('.dz-preview').find('img').attr('src', newname); - If you know a better way, please share.Cabstand
S
11

This worked for me:

$('.dropzone').dropzone({
    init: function() {
        this.on('success', function(file) {
            var newname = generateServersideFilename(file.name); // this is my function
            // changing src of preview element
            file.previewElement.querySelector("img").src = newname;
        }
    }
});

dropzonejs have few examples of using file.previewElement

Suellen answered 3/8, 2014 at 10:48 Comment(0)
S
4

This can be simply be

this.on("success", function(file) {
var mydropzone = this;
mydropzone.emit("thumbnail", file, "images/x.jpg");
});

here is the link from dropzone

Slacken answered 10/9, 2014 at 10:2 Comment(1)
This should be the correct answer, we should not edit the attribute directly, instead, we should fire a 'thumbnail' event.Underfeed
H
2
this.on("addedfile", function (file) {

   file.previewElement.querySelector("img").src = "music-box-outline.svg";

});
Hugh answered 21/10, 2016 at 17:43 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.