Dropzone.js - Display existing files on server

ajax, dropzone.js, image, php

Solution

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);

Problem

I'm currently using dropzone.js v3.10.2 I am having issues displaying my existing files I have already uploaded. I am more than competent with php however I have limited knowledge when it comes to ajax and js If you could help that would be awesome Thanks in advance index.php ``` <html> <head> <link href="css/dropzone.css" type="text/css" rel="stylesheet" /> <script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="dropzone.min.js"></script> <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.options.addedfile.call(thisDropzone, mockFile); thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/"+value.name); }); }); } }; </script> </head> <body> <form action="upload.php" class="dropzone" id="my-dropzone"></form> </body> ``` 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); //1 if ( false!==$files ) { foreach ( $files as $file ) { if ( '.'!=$file && '..'!=$file) { //2 $obj['name'] = $file; $obj['size'] = filesize($storeFolder.$ds.$file); $result[] = $obj; } } } header('Content-type: text/json'); //3 header('Content-type: application/json'); echo json_encode($result); } ?> ``` PS. I know the php is retrieving the data Thanks in advance Damian

Original source

Related problems