Dropzone.js - Display existing files on server

StackOverflow https://stackoverflow.com//questions/24009298

  •  21-12-2019
  •  | 
  •  

Question

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

Was it helpful?

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

OTHER TIPS

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

This is the way which I implemented it. I have used createThumbnailFromUrl rather using emitting a thumbnail event.

HTML element;

<form id="sample-img" action="/upload" class="dropzone">
    <div class="dz-default dz-message"></div>
</form>

JS code;

previewThumbailFromUrl({
    selector: 'sample-img',
    fileName: 'sampleImg',
    imageURL: '/images/sample.png'
});

function previewThumbailFromUrl(opts) {
    var imgDropzone = Dropzone.forElement("#" + opts.selector);
    var mockFile = {
        name: opts.fileName,
        size: 12345,
        accepted: true,
        kind: 'image'
    };
    imgDropzone.emit("addedfile", mockFile);
    imgDropzone.files.push(mockFile);
    imgDropzone.createThumbnailFromUrl(mockFile, opts.imageURL, function() {
        imgDropzone.emit("complete", mockFile);
    });
}

I was having trouble with maxFiles/maxfilesexceeded and take some while looking for a anwser and then I found this links below:

https://www.bountysource.com/issues/1444854-use-files-already-stored-on-server-wiki-example-incomplete?utm_campaign=plugin&utm_content=tracker%2F283989&utm_medium=issues&utm_source=github

$.each(obj, function(i, item) {

  ///faking the BytesSent its not essanail to me.. if you need it just pass the correct one
  var upload = {bytesSent: 12345};

  /// again fake the size..
  var mockFile = {name: item.name, size: 12345, accepted: true};

  mockFile.upload = upload;
  mockFile.kind = "file";
  Dropzone.forElement("#editfileuploader").emit("addedfile", mockFile);

  //push the file to files array because getAcceptedFiles using this array length to get the currct files count..
  Dropzone.forElement("#editfileuploader").files.push(mockFile);

  //this for lettig dropzone to creat the thumbnail(item.ts has the file location)
  Dropzone.forElement("#editfileuploader").emit("thumbnail", mockFile, item.ts);

  //to show the success mark and to return image id response
  Dropzone.forElement("#editfileuploader").emit("success", mockFile, item.id);
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top