CODEWITHSUNDEEP
javascriptcssdropzone.js
Gari
Gari

Reputation: 54

Dropzone.js CSS

I have a upload by dropzone.js. I added the next code to my JS:

 thumbnail: function(file, dataUrl) {
    var thumbnail = $('.dropzone .dz-preview.dz-file-preview .dz-image:last');
    thumbnail.css('background', 'url('+dataUrl+')');
    var $fotoramaDiv = $('.fotorama').fotorama();
    var fotorama = $fotoramaDiv.data('fotorama');
    fotorama.push({img: dataUrl, thumb:dataUrl});   
 }

I have only one problem - when I upload more than one picture at the same time I get only the last picture.

image

This is the situation if I remove :last image2

How can I solve this?

SOLVED!

Upvotes: 0

Views: 3082

Answers (3)

Gari
Gari

Reputation: 54

I did the next:

thumbnail: function(file, dataUrl) {
        var i=sessionStorage.getItem('uploaded_pic');
        if(typeof(dataUrl) != "undefined" && dataUrl !== null) {
            i++;
            sessionStorage.setItem('uploaded_pic', i);
            var selector='.dropzone .dz-preview.dz-file-preview:nth-child('+i+') .dz-image';
            alert(selector);
            var thumbnail = $(selector);
            thumbnail.css('background', 'url('+dataUrl+')');
            var $fotoramaDiv = $('.fotorama').fotorama();
            var fotorama = $fotoramaDiv.data('fotorama');
            fotorama.push({img: dataUrl, thumb:dataUrl});
        }

And when the page is loaded I going to always reset the session storage:

sessionStorage.setItem('uploaded_pic', 1);

Upvotes: 0

Dan Vinnicombe
Dan Vinnicombe

Reputation: 46

form 

<form action="/file-upload"
  class="dropzone"
  id="my-awesome-dropzone"></form>

JS

 thumbnail: function("#my-awesome-dropzone") {
var thumbnail = $('.dropzone .dz-preview.dz-file-preview');
thumbnail.css('background', 'url('+dataUrl+')');
var $fotoramaDiv = $('.fotorama').fotorama();
var fotorama = $fotoramaDiv.data('fotorama');
fotorama.push({img: dataUrl, thumb:dataUrl});

}

JSFIDDLE - https://jsfiddle.net/gqbkhkxp/

Upvotes: 0

Bellu
Bellu

Reputation: 2573

Your thumbnail selector $('.dropzone .dz-preview.dz-file-preview .dz-image:last'); is reffered to only the :last element. You should remove the :last pseudoclass.

Upvotes: 1

Related Questions