How refresh Dropzonejs after upload files?

[trifek]

Hi,
i have this code:

<div class="row">
    <div class="col-12 sortableContainer">
        <form class="dropzone" id="dpz-multiple-files" action="http://localhost/admin/dropZoneUpload.php"
              method="post" enctype="multipart/form-data" style="border:1px solid #000;">

        </form>
        <br>
        <center>
            <button id="submit-all" style="height: 40px;"> Upload All the files</button>
        </center>
    </div>
</div>

<script type="text/javascript">
    Dropzone.options.dpzMultipleFiles = {
        // Prevents Dropzone from uploading dropped files immediately
        uploadMultiple: true,
        paramName: "file",
        maxFilesize: 100,
        maxFiles: 2,
        createImageThumbnails: true,
        acceptedFiles: ".png,.jpg,.jpeg",
        clickable: true,
        thumbnailWidth: 150,
        thumbnailHeight: 150,
        autoProcessQueue: false,
        init: function () {
            $.ajax({
                url: 'http://localhost/psCMS2/admin/dropZoneUpload.php?parm=1',
                type: 'get',
                dataType: 'json',
                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)
                    })
                }
            });



            var submitButton = document.querySelector("#submit-all")
            dpzMultipleFiles = this;
            submitButton.addEventListener("click", function () {
                dpzMultipleFiles.processQueue();
            });
            // to handle the added file event
            this.on('completemultiple', function (file, json) {
                $('.sortable').sortable('enable');
            });
            this.on('success', function (file, json) {
                let val = file.accepted;
                if (file.accepted == true) {
                    alert ('JSON - wgrałem!');
                    console.log(json);
                    $('.main_form').append("<input type='text' name='imgFiles[]' value='" + file.name + "'/>");
                }
                let val1 = file.name;
                //alert(val1);
                /////////

                $.ajax({
                    url: 'http://localhost/admin/dropZoneUpload.php?parm=1',
                    type: 'get',
                    dataType: 'json',
                    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)
                        })
                    }
                });
                dpzMultipleFiles.emit("resetFiles");
                /////////
            });
            this.on('resetFiles', function() {
                this.removeAllFiles();
            });
            this.on('queuecomplete', function(){
                dpzMultipleFiles.emit("resetFiles");
            })
            this.on("addedfile", function (file) {
                var removeButton = Dropzone.createElement("<button> Remove file </button>");
                // Capture the Dropzone instance as closure.
                var _this = this;

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

                    // Remove the file preview.
                    _this.removeFile(file);
                    // If you want to the delete the file on the server as well,
                    // you can do the AJAX request here.
                    console.log("kasuje" + file.name);
                    console.log(file);
                });
                file.previewElement.appendChild(removeButton);
            });
            this.on('drop', function (file) {
                console.log('File', file);
                alert('bb');
                this.removeFile();
            });
            this.on("maxfilesexceeded", function (file) {
                this.removeFile(file);
            });
        }
    };
    $(function () {
        $(".dropzone").sortable({
            items: '.dz-preview',
            cursor: 'move',
            opacity: 0.5,
            containment: '.dropzone',
            distance: 20,
            tolerance: 'pointer',
            update: function(event, ui){
                console.log(ui);
                var itemOrder = $('.dropzone').sortable("toArray");
                for (var i = 0; i < itemOrder.length; i++) {

                    //alert("Position: " + i + " ID: " + itemOrder[i]);
                }
            }
        });
    });
</script>

The script works as follows:

1. reads the list of files on the server
2. allows you to upload new files to the server

After uploading a new file to the server, the above code adds all files to the visible list of files (I have duplicates in the list).

How to remove old files from the dropzone list (refresh this list) and show all current files again?

[trifek]

Ok, I’m found solution:

$(‘.dz-preview’).remove();