Menu
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
953
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
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
