Dropzone.js - Display existing files on server

I checked the code (from starTutorial) and it didn't work for me either(?)

I managed to get it working by replacing this:

$.get('upload.php', function(data) {
  $.each(data, function(key,value) {
    var mockFile = { name: value.name, size: value.size };
    thisDropzone.options.addedfile.call(thisDropzone, mockFile);
    thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/"+value.name);
  });
});

with this:

$.getJSON('files/list-all', function(data) {
  $.each(data, function(index, val) {
    var mockFile = { name: val.name, size: val.size };
    thisDropzone.options.addedfile.call(thisDropzone, mockFile);
    thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/" + val.name);
  });
});

Credit to this answer: https://stackoverflow.com/a/5531883/984975

EDIT: In version 4.0 the thumbnails of the existing files will be showed with the cue bar in it. To solve this add:

thisDropzone.emit("complete", mockFile);

I'm leaving here the solution that worked for me. (Dropzone v5.7.0 and Codeigniter v3.1.11)

1. Use Dropzone option init
2. Make AJAX call to back-end script which returns json encoded array of objects containing images' info (PHP way above in the question, Codeigniter way here)
3. Use jQuery each function to iterate on every object containing image info
4. Use the snippet here: https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server to display each image

in my App controller:

public function ilan_fotolari($ilan_id = 0)
{
    $this->load->helper('ilan');
    $dirPath = './assets/uploads/'.ilan_dir($ilan_id);
    $this->load->helper('file');
    $file_names = get_filenames($dirPath);
    $mocks = [];
    foreach ($file_names as $file_name) {
        $mock['name'] = $file_name;
        $dirUrl = base_url('assets/uploads/'.ilan_dir($ilan_id));
        $mock['url'] = $dirUrl.$file_name;
        $mocks[] = $mock;
    }
    $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode($mocks));
}

in my script.js:

Dropzone.options.ilanFotoAlani = {
    paramName: "foto", // The name that will be used to transfer the file
    maxFilesize: 5, // MB
    maxFiles: 9,
    resizeWidth: 1000,
    resizeHeight: 644,
    resizeMimeType: 'image/jpeg',
    addRemoveLinks: true,
    dictDefaultMessage: 'Fotoğraf sürükle veya seç',
    dictFileTooBig: 'Fotoğraf boyutu en fazla 5MB olmalı',
    dictRemoveFile: 'Fotoğrafı sil',
    dictCancelUpload: 'İptal et',
    dictMaxFilesExceeded: 'En fazla 9 fotoğraf yükleyebilirsin',
    init: function () {
        let myDropzone = this;
        $.ajax({
            type: 'get',
            url: '/ilan-fotolari',
            success: function(mocks){
                $.each(mocks, function(key,value) {
                    let mockFile = { name: value.name, size: 1024 };
                    myDropzone.displayExistingFile(mockFile, value.url);
                });
            },
            error: function(xhr, durum, hata) {
                alert("Hata: " + hata);
            }
        });
    }
};

I have mixed up solutions from different solutions into this.

For Dropzone 5.x

The solutions given so far did not work with dropzone version 5.x. What worked for me was to modify dropzone's config options as follows:

init: function () {
                var mockFile = {
                    name: 'FileName',
                    size: '1000', 
                    type: 'image/jpeg',
                    accepted: true            // required if using 'MaxFiles' option
                };
                this.files.push(mockFile);    // add to files array
                this.emit("addedfile", mockFile);
                this.emit("thumbnail", mockFile, 'http://url/to/file');
                this.emit("complete", mockFile); 
            }

The concept is, to create a mock file, and call the event handlers addedfile and thumbnail to draw the preview. And then finally call on complete event to ensure that there are no progress bars, etc. being displayed.

Reference