Dropzone проверяет, существуют ли имена файлов перед обработкой очереди - PullRequest
Новая
       65

Dropzone проверяет, существуют ли имена файлов перед обработкой очереди

0 голосов
/ 06 апреля 2020

Я использую Dropzone для загрузки файлов, которые я сохраняю с некоторыми метаданными в базе данных в серверной части. Когда пользователь пытается загрузить большую часть файлов, я хочу проверить, загрузил ли он уже файл с этим именем, и предупредить его с предупреждением о возможности продолжить до остановки.

Поэтому я отключил autoProcessQueue. Я также слушаю событие addedfile, получаю имя, выполняю ajax, чтобы проверить, существует ли оно в базе данных, и возвращает true или false, хорошо.

Допустим, пользователь пытается загрузить 40 файлов, которые все уже существуют, я не хочу 40 предупреждений о том, что этот файл уже существует, я хочу одно уведомление, печатающее все 40 имен файлов. Я искал addedfile, но для нескольких файлов я не нашел решения.

Вот мой код на данный момент Вот где я застрял Как я могу знать, когда я проверял каждый файл ? 

$(document).ready(function() {
        @if(isset($checkRoute))
            function filenameExists(name) {
                $.ajax({
                    type: 'GET',
                    url: '{{ $checkRoute }}',
                    data: {
                        name: name
                    }
                })
                .done(function(res) {
                    // returns true or false
                    return res
                })
                .fail(function(err) {
                    console.log(err)
                })
            }
        @endif

        let existingFilenames = []

        let fileCount = 0

        $('#{{ $element_id }}').dropzone({
            url: "{{ $upload }}", // Set the url for your upload script location
            paramName: "documents", // The name that will be used to transfer the file
            maxFiles: 100,
            maxFilesize: 100, // MB
            parallelUploads: 100,
            timeout: 240000,
            addRemoveLinks: true,
            acceptedFiles: "application/msword, application/vnd.ms-excel, application/pdf, image/*, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/*",
            uploadMultiple: true,
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            init: function() {
                @if(isset($checkRoute))
                    this.on('addedfile', function(file) {
                        console.log(this.getAcceptedFiles())
                        fileCount++
                        if (filenameExists(file.name)) {
                            console.log(file.name)
                            existingFilenames.push(file.name)
                        }
                    })
                @endif
            },
            autoProcessQueue: false,
            sendingmultiple: function (files) {
                // Begin loading
                KTApp.blockPage({
                    overlayColor: '#000000',
                    type: 'v2',
                    state: 'success',
                    message: '{{ __('documents_uploading') }}'
                });
            },
            queuecomplete: function () {
                // End loading
                KTApp.unblockPage();

                $.notify({
                    // options
                    message: '{{ __('documents_upload_success') }}'
                }, {
                    // settings
                    type: 'success',
                    placement: {
                        from: "top",
                        align: "center"
                    },
                    animate: {
                        enter: 'animated fadeInDown',
                        exit: 'animated fadeOutUp'
                    },
                });

                window.location.replace("{{ $redirect }}");
            }
        });
    });

Еще одна вещь, которая меня беспокоит, - как я буду обрабатывать очередь при нажатии кнопки в уведомлении.

1 Ответ

0 голосов
/ 09 апреля 2020

У меня была похожая проблема, так как я хотел предоставить пользователю выпадающий список различных каталогов загрузки на сервер.

Поскольку каждый каталог имеет свой набор правил acceptedFiles, опция stati c acceptedFiles не может быть и речи.

Вместо этого я использовал комбинацию прослушивания события drop в dropzone init и «расширения» функции accept:

Событие drop возвращает общее количество удаленных файлов и сохраняет его в droppedFilesCounter. Он также инициализирует / сбрасывает глобальный Объект dzCustomFeedback и очищает область «обратной связи» от предыдущей обратной связи.

Расширенная функция accept, которая вызывается каждым удаленным файлом, проверяет, какой каталог для загрузки выбран в данный момент. и сравнивает текущее расширение файла с настроенными принятыми.

Если есть совпадение, функция done() «раздувает» и «все очищает».

В противном случае файл удаляется из список предварительного просмотра (или фактически никогда не попадающий в него), и глобальный dzCustomFeedback Объект накапливает сообщения об ошибках типа invalidFileTypes для всех файлов соответственно.

После того, как все файлы пройдены через accept Функция (droppedFilesCounter == 0) и некоторые сообщения обратной связи были подготовлены, вызывается функция prepareFeedback, которая в основном заполняет контейнер jQuery <div> накопленным содержимым dzCustomFeedback. 

init: function() {
  var myDropzone = this;

  myDropzone.on("drop", function(event) {

    if(typeof event.dataTransfer.files == 'object')
    {
      droppedFilesCounter = event.dataTransfer.files.length;
    }

    dzCustomFeedback = {};
    jQuery('#dz-feedback').empty();
  });
},
accept: function(file, done) {
    / * Erweiterung der vordefinierten accept Function * /
    customTypeSelector = document.getElementById("selectUploadFolder");
    var currentAcceptedFiles = customTypeAcceptedFiles[customTypeSelector.options[customTypeSelector.selectedIndex].value]
    var currentFileExtension = file.name.split(".").pop()

    droppedFilesCounter--;

    if (typeof customTypeAcceptedFiles[customTypeSelector.options[customTypeSelector.selectedIndex].value] == "object"
        &&
        jQuery.inArray(currentFileExtension, currentAcceptedFiles["extensions"] ) >= 0) {
        //accepted file
        done();
    }
    else {
        //Unaccepted file revert
        this.removeFile(file);
        if(typeof dzCustomFeedback["invalidFileTypes"] == "undefined")
        {
          dzCustomFeedback["invalidFileTypes"] = {
                                      "msg": [
                                                uploadDndConf["textElements"]["invalidFileTypesUploadFolder"].replace("{{uploadFolder}}", currentAcceptedFiles["label"])
                                              , currentAcceptedFiles["extensions"].join()
                                             ]
                                    , "type": "error"
                                    , "filesIgnored": {} };
        }
        dzCustomFeedback["invalidFileTypes"]["filesIgnored"][file.name] = file;
        done(this.options.dictInvalidFileType);
    }
    if(droppedFilesCounter == 0 && !jQuery.isEmptyObject(dzCustomFeedback))
    {
      prepareFeedback(dzCustomFeedback);
    }
},
...