Dropzone.js - Afficher les fichiers existants sur le serveur
-
21-12-2019 - |
Question
Je suis actuellement à l'aide dropzone.js v3.10.2 je vais avoir des problèmes d'affichage de mes fichiers que j'ai déjà téléchargé.Je suis plus que compétent en php mais j'ai peu de connaissances quand il s'agit de l'ajax et js
Si vous pouviez m'aider ce serait génial
Merci d'avance
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.Je sais que le php est en train de récupérer les données
Merci d'avance
Damian
La solution
J'ai vérifié le code (du startoral) et cela n'a pas fonctionné pour moi non plus (?)
J'ai réussi à le faire fonctionner en remplaçant cela:
$.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);
});
});
avec ceci:
$.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);
});
});
Crédit à cette réponse: https://stackoverflow.com/a/5531883/984975
EDIT: Dans la version 4.0, les vignettes des fichiers existants seront montrées avec la barre de repère.Pour résoudre cet ajout:
thisDropzone.emit("complete", mockFile);
Autres conseils
Pour Dropzone 5.x
Les solutions apportées jusqu'à présent n'a pas de travail avec dropzone la version 5.x.Ce qui a fonctionné pour moi a été de modifier dropzone est les options de configuration comme suit:
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);
}
Le concept est, pour créer une maquette de fichier, et d'appeler les gestionnaires d'événements addedfile
et thumbnail
pour attirer l'aperçu.Et puis, finalement, sur appel complete
de l'événement pour s'assurer qu'il n'existe pas de barres de progression, etc.en cours d'affichage.
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:
$.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);
});