Streaming live at 10am (PST)

Сlear dropzone thumbnail list image after uploading an image


#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: