Сlear dropzone thumbnail list image after uploading an image

Сlear dropzone thumbnail list image after uploading an image
0

#1

I have code:


Dropzone.options.dpzMultipleFiles = {
    uploadMultiple: true,
    paramName: "file",
    maxFilesize: 100,
    maxFiles: 2,
    createImageThumbnails: true,
    acceptedFiles: ".png,.jpg,.jpeg",
    clickable: true,
    thumbnailWidth: 200,
    thumbnailHeight: 200,
    autoProcessQueue: false,
    init: function () {
        var submitButton = document.querySelector("#submit-all")
        dpzMultipleFiles = this;
        submitButton.addEventListener("click", function () {
            dpzMultipleFiles.processQueue();
        });



        $.ajax({
            url: 'http://localhost/admin/dropZoneUpload.php?parm=1',
            type: 'get',
            dataType: 'json',
            cache: false,
            success: function (response) {
                $.each(response, function (key, value) {
                    var mockFile = {name: value.name, size: value.size}

                    dpzMultipleFiles.emit('addedfile', mockFile)
                    dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
                    dpzMultipleFiles.emit('complete', mockFile)
                })
            }
        });




        this.on('completemultiple', function (file, json) {
            //$('.sortable').sortable('enable');
        });
        // this.on("thumbnail", function(file, dataUrl) {
        //     $('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
        // }),
        this.on('success', function (file, json) {
            if (file.accepted == true) {

                $('.dz-preview').remove();

                $.ajax({
                    url: 'http://localhost/psCMS2/admin/dropZoneUpload.php?parm=1',
                    type: 'get',
                    dataType: 'json',
                    cache: false,
                    success: function (response) {
                        console.log(response);
                        $.each(response, function (key, value) {
                            var mockFile = {name: value.name, size: value.size}
                            dpzMultipleFiles.emit('addedfile', mockFile)
                            dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
                            dpzMultipleFiles.emit('complete', mockFile)
                        });
                    }
                });



            }
            /////////
        });

        this.on("addedfile", function (file) {
            var removeButton = Dropzone.createElement("<button> Remove file </button>");
            var _this = this;

            removeButton.addEventListener("click", function (e) {
                // Make sure the button click doesn't submit the form:
                e.preventDefault();
                e.stopPropagation();

                $.ajax({
                    url: 'http://localhost/psCMS2/admin/dropZoneUpload.php?removeFile=' + file.name,
                    dataType: 'text',
                    type: 'post',
                    cache: false,
                    data: $(this).serialize(),
                    success: function (data, textStatus, jQxhr) {
                        x = confirm('Do you want to delete this logo?');
                        if(!x)  return false;
                        //_this.removeFile();
                        dpzMultipleFiles.options.maxFiles = dpzMultipleFiles.options.maxFiles + 1;
                        console.log("kasuje " + file.name);
                        alert('http://localhost/psCMS2/admin/dropZoneUpload.php?removeFile=' + file.name);
                    }, error: function (jqXhr, textStatus, errorThrown) {
                        console.log(errorThrown);
                    }
                });
            });
            file.previewElement.appendChild(removeButton);
        });
        this.on("maxfilesexceeded", function (file) {
            this.removeFile(file);
        });
        this.on('resetFiles', function() {
            dpzMultipleFiles.removeAllFiles();
        });
        this.on('queuecomplete', function(){
            //$('.dz-preview').remove();
        });
        this.on('drop', function(){

        });
        this.on('complete', function(){
            this.removeFile(file);
        });
    }
};

I do not know why, but the above code does not clean my dropzone list before it loads new files.

I would like the code to work as follows: 1. loads files available on the server with php - works correctly 2. displays these files in the dropzone - works correctly 3. I add another file (success section) - the script uploads the file to the server - works correctly 4. The list of files should be cleared and files from the server should be loaded again - it does not work correctly.

The php script gives the correct list of files. How can I clear this list?

At the moment after uploading the photo I see the old list :frowning:


#2

Which part of your code do you believe should make the new list of files display?


#3

There:


this.on('success', function (file, json) {
            if (file.accepted == true) {

                $('.dz-preview').remove();

                $.ajax({
                    url: 'http://localhost/psCMS2/admin/dropZoneUpload.php?parm=1',
                    type: 'get',
                    dataType: 'json',
                    cache: false,
                    success: function (response) {
                        console.log(response);
                        $.each(response, function (key, value) {
                            var mockFile = {name: value.name, size: value.size}
                            dpzMultipleFiles.emit('addedfile', mockFile)
                            dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
                            dpzMultipleFiles.emit('complete', mockFile)
                        });
                    }
                });



            }
            /////////
        });

#4

Thank you for pointing out the section. To make it easier for me to test your code, would you mind providing the code for dropZoneUpload.php?


#5

result from php:

[{“name”:“index.html”,“size”:0,“path”:“http://localhost/dic/assets/uploads/index.html"},{“name”:".DS_Store",“size”:8196,“path”:“http://localhost/dic/assets/uploads/.DS_Store”},{“name”:“bla.jpg”,“size”:751,“path”:“http://localhost/dic/assets/uploads/bla.jpg”},{“name”:".htaccess",“size”:106,“path”:"http://localhost/dic/assets/uploads/.htaccess”}]


#6

I meant the actual php code in the dropZoneUpload.php file. I want to run your php file on my system to test out changes I make to the dropzone code.


#7
$file_list = array();

    $target_dir = "../" . $config->upload_catalog_name;
    $dir = "../" . $config->upload_catalog_name;
    if (is_dir($dir)) {

        if ($dh = opendir($dir)) {

            while (($file = readdir($dh)) !== false) {

                if ($file != '' && $file != '.' && $file != '..') {

                    $file_path = $target_dir . $file;

                    if (!is_dir($file_path)) {

                        $size = filesize($file_path);

                        $file_list[] = array('name' => $file, 'size' => $size, 'path' => 'http://localhost/psCMS2/assets/uploads/' . $file);

                    }
                }

            }
            closedir($dh);
        }
    }

    echo json_encode($file_list);
    exit;

#8

I don’t know what $config looks like.


#9

Sorry.
$config[‘upload_catalog_name’] = “assets/uploads/” - this is path


#10

In the future when you want help with anything involving php, make sure you provide all relevant php files, so we can test the code.


#11

What is the purpose of the parm querystring variable I see in JavaScript code in the url?

http://localhost/admin/dropZoneUpload.php?parm=1

I see no reference to this querystring variable in the php code you provided.

Honestly, you need to post the entire project which will include the html files and all relevant php files used, because I am trying to piece this together without understanding how you have it all organized. When you can provide a link to github or somewhere else showing all the code you are currently using to at least be able to accomplish 3 out of the 4 requirements you first posted, then I will take another look.

There are a lot of moving parts here and I do not think I have all the parts.


#12

Here is full code: https://bitbucket.org/trifek/dropzone/src/master/
I’m trying to add one file and many at the same time.