Dropzone only builds thumbnail for last file

Question

i need to preload existing files into an instance of a Dropzone-Div. I looked up some similar issues on the net, but couldn't find something. I want to create Thumbnails on the go and it works great as Long as there is only one file. If there is more then 1 file it only generates the thumbnail for the last one.

This is the init-function from my .dropzone:

init: function() {      
                // Create the mock files:
                var dropZoneInstance = this;

                // Load Files
                $.ajax({
                   url: 'ajaxcall.php',
                    data: {id: profil,zuordnung: zuordnung, ajaxcall: 'readAnhänge'},
                   success: function (response) {

                    var files = JSON.parse(response);

                    for (i = 0; i < files.length; i++)
                    {
                        var obj = files[i];
                        console.log(obj);

                        dropZoneInstance.files.push(obj);
                        dropZoneInstance.emit("addedfile", obj);

                        dropZoneInstance.createThumbnailFromUrl(obj, 
                            dropZoneInstance.options.thumbnailWidth, 
                            dropZoneInstance.options.thumbnailHeight,
                            dropZoneInstance.options.thumbnailMethod, true, function (thumbnail) 
                            {
                                dropZoneInstance.emit('thumbnail', obj, thumbnail);
                            }
                        );

                        dropZoneInstance.emit("complete", obj);
                    }
                   }
                });
            }

This is the PHP-Code for the JSON:

        function ReadFromZuordnung($zuordnung = 0)
        {
            $var = Array();

            global $dbh;
            global $user;

            $query = $dbh->prepare("
                SELECT
                    anhang_id AS id
                FROM
                    tbl_anhang
                WHERE
                    anhang_profil = :profil
                AND
                    anhang_zuordnung = :zuordnung
                ");
            $query->bindValue(':profil', $this->getId(), PDO::PARAM_INT);
            $query->bindValue(':zuordnung', $zuordnung, PDO::PARAM_INT);
            $query->setFetchMode(PDO::FETCH_CLASS, 'Test');
            $query->execute();
            while($row = $query->fetch())
            {
                $var[] = Array("id"=>$row->getId(),"name"=>$row->getName(),"size"=>0,"dataURL"=>$this->getUploadPfad().$row->getName());
            }

            echo json_encode($var);
        }

And thats my test.php:

    <div id="dropzone" class="dropzone" profil="1">
          <div class="dz-default dz-message"></div>
    </div>

That's the result: https://i.sstatic.net/hBevI.jpg

I want to have thumbnails for every file, not just the last one.

Any Suggestions?

Answer 1

Ok, i got it myself after two more days of searching for answerts:

Just changing

var obj = files[i];

to

let obj = files[i];

solved the Problem.

Maybe someone else will save some time when he is having the same Problem.