Geek Answers Handbook

Dropzone.js - display existing files on the server

I am currently using dropzone.js v3.10.2 I am having problems displaying my existing files that I have already downloaded. I am more than competent in php, but 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 php is retrieving data

Thanks in advance

Damian

+7
ajax php image
source share
4 answers

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 for this answer: stack overflow

EDIT: In version 4.0, thumbnails of existing files will be shown with a cue. To solve this problem, add:

 thisDropzone.emit("complete", mockFile);
+12
source share

For Dropzone 5.x

The solutions given so far have not worked with dropzone version 5.x. What worked for me was to change the Dropzone configuration 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 layout file and call the addedfile and thumbnail event handlers for preview. And then finally, call the complete event to make sure that progress indicators are not showing, etc.

Link

+2
source share

This is how I implemented it. I used createThumbnailFromUrl 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); }); }
+1
source share

I had problems with maxFiles / maxfilesexceeded and reached for anwser a bit, and then I found the following links:

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); });
0
source share

More articles:


All Articles