Wątek przeniesiony 2018-10-07 18:56 z Newbie przez furious programming.

Jak wyczyścić listę miniaturek w dropzonejs?

0

Witam.
Mam taki kod:




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);
        });
    }
};

Pliki wgrywają się poprawnie.
Mam problem z wyczyszczeniem wszystkich elementów w dropzone. Chciałbym żeby przed każdym wyświetleniem aktualnych plików najpierw wyczyścił stare.

W tej chwili po dodaniu obrazka - obrazek wysyła się na serwer, ale na liście widzę stare pliki. Muszę przeładować przeglądarkę żeby zobaczyć nowe.

Wie ktoś może jak to naprawić?

0
Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);

Pisane w oparciu o https://stackoverflow.com/questions/18460695/how-to-call-the-removeallfiles-function-in-dropzone-js-after-a-click-on-a-but

0

Myślisz o czymś takim:


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

                        $('.dz-preview').remove();
                        this.removeAllFiles;
						**Dropzone.forElement("#dpz-multiple-files").removeAllFiles(true);**
                        $.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)
                                });

                            }
                        });
                    }

?
Jeśli tak, to niestety nie działa :(

0

Dasz radę to wrzucić na http://jsfiddle.net?

0
cerrato napisał(a):

Dasz radę to wrzucić na http://jsfiddle.net?

tak, już wrzucam. Momencik

https://jsfiddle.net/bhjs5vrL/ - wstawiłem. Jeśli coś źle - to z góry przepraszam. Nigdy jeszcze tam nic nie dodawałem :(

Dodałem pełen przykładowy kod: https://bitbucket.org/trifek/dropzone/src/master/

0

Sprawdź proszę, czy u Ciebie działa upuszczanie plików, bo u mnie zamiast się dodać do galerii, to plik otwiera się w przeglądarce. I nie wiem, czy to jest coś po mojej stronie.

EDIT: nie działa drag&drop. ale po kliknięciu "Drop files here to upload" pojawia się okienko wyboru plików, a dodatkowo po wybraniu obrazków są one poprawnie dodawane do galerii.

1 użytkowników online, w tym zalogowanych: 0, gości: 1