Dropzonejs - View files - How to do?

Question

How do I make dropzoneJS display files that have already been uploaded ? I followed the documentation steps and is uploading normally, but not displaying files already uploaded.

My HTML form code:

<form action="upload.php" class="dropzone" id="my-dropzone"></form>

Script:

<script type="text/javascript"> 
        $(document).ready(function() {          
            Dropzone.autoDiscover = false;
            $("#my-dropzone").dropzone({
                //url: "/file/post",
                addRemoveLinks : true,
                maxFilesize: 0.5,
                dictResponseError: 'Erro ao fazer o upload !'
            });
        })
</script>

<script type="text/javascript">     
        Dropzone.options.myDropzone = {
            init: function() {
                thisDropzone = 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);                          
                    });                      
                });
            }
        };
</script> 

Code in upload.php:

<?php

$ds = DIRECTORY_SEPARATOR;
$storeFolder = 'uploads';  

if (!empty($_FILES)) {

   $tempFile = $_FILES['file']['tmp_name'];
   $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; 
   $targetFile =  $targetPath. $_FILES['file']['name']; 
   move_uploaded_file($tempFile,$targetFile);

} else { 

  $result  = array(); 
  $files = scandir($storeFolder);                  
  if ( false!==$files ) {
    foreach ( $files as $file ) {
        if ( '.'!=$file && '..'!=$file) {       
            $obj['name'] = $file;
            $obj['size'] = filesize($storeFolder.$ds.$file);
            $result[] = $obj;
        }
    }
}
    header('Content-type: text/json');              
    header('Content-type: application/json');
    echo json_encode($result);
}
?>

Answer 1

I managed to fix and created a button that opens the files already sent too, I made some changes to the script, below:

<script>
    Dropzone.options.myDropzone = {
        init: function() {
            thisDropzone = this;
            $.get('upload.php', function(data) {
                $.each(data, function(key,value){
                    var mockFile = { name: value.name, size: value.size };
                    thisDropzone.emit("addedfile", mockFile);
                    thisDropzone.emit("thumbnail", mockFile, "uploads/"+value.name);
                });
            });

            thisDropzone.on("addedfile", function(file) {

            var openButton = Dropzone.createElement("<button class='btn btn-sm btn-success'>Abrir</button>"); 
            var _this = this;

            openButton.addEventListener("click", function(e) {
              e.preventDefault();
              e.stopPropagation();
              window.open("/uploads/"+file.name);
            }); 
            file.previewElement.appendChild(openButton);
          }); 
        }
    };
</script>