Как переписать DropzoneJS XHR для GridFS?

Question

В настоящее время я разрабатываю форму обмена изображениями, используя Meteor, CollectionFS и GridFS StorageAdapter.

Я также использую отличный пакет dbarrett: dropzonejs, но проблема заключается в его реализации для CollectionFS, особенно в отношении XHR и uploadprogress.

Сейчас я использую этот код.

Проблема: при загрузке файлов я заметил в консоли нежелательные запросы POST вместе с запросами PUT из CollectionFS. Я сузил их до xhr.send() в файле dbarrett_dropzone.js. В попытке остановить их, я попытался в template.rendered > опции dropzone:

init: function() {
    this.on("sending", function(file,xhr) {
        xhr.abort(); //file.xhr.abort() does not work either...
    });
} // console shows "NS_ERROR_NOT_INITIALIZED"

или перезаписать dropzone.accept:

},
accept: function(file,done) {
    done("dummy message");
},

но затем он предотвращает заполнение массива очереди, что необходимо для вставки CollectionFS...

Вопрос: я думаю, что нужно перезаписать функцию dropzone.uploadFiles(files), где написаны все xhr-материалы,... но все мои попытки провалились, может кто-нибудь предложить реализацию, пожалуйста?

В идеале я думаю, что такая реализация будет такой:

Template.albumContent.rendered = function() {
    var dz = new Dropzone("form#dzId", {
        url: "#",
        autoProcessQueue: false,
        addRemoveLinks: true,
        acceptedFiles: "image/*",
        init: function() {
            this.on("success", function(file) {
                Meteor.setTimeout(function() {
                    dz.removeFile(file);
                },3000)
            });
        },
        uploadFiles: function(files) {
            var dzgqf = dz.getQueuedFiles();
            if (dzgqf.length) {
                dzgqf.forEach(function(file) {
                    var fsFile = new FS.File(file);
                    fsFile.owner = Meteor.userId();
                    Images.insert(fsFile, function(error, fileObj) {
                        if (error) throw new Meteor.Error("Error uploading this file : ", fsFile);
                        // how to pass properly fileObj.updateProgress() stuff to dz.uploadprogress event ???
                    });
                });
            }
        }
    });
}

Template.albumContent.events({
    "click .js-upload-all-images": function(event, template) {
        event.preventDefault(); event.stopPropagation();
        var dz = Dropzone.getElement("#dzId").dropzone;
        console.log("Queued files : ", dz.getQueuedFiles());
        dz.processQueue();
     }
});

Answer 1

ОБНОВИТЬ

После тестирования многих обходных путей, я закончил с рабочим решением ниже:

Template.albumContent.rendered = function() {
    var dz = new Dropzone("form#dzId", {
        url: "#",
        autoProcessQueue: false,
        addRemoveLinks: true,
        acceptedFiles: "image/*",
        maxFilesize: 10,
        init: function() {
            this.on("success", function(file) {
                dz.removeFile(file);
            });
            this.on("queuecomplete", function() {
                dz.removeAllFiles(); // removes remaining rejected files
            });
        }
    });
}

Template.albumContent.events({
    "click .js-upload-all-images": function(event, template) {
        event.preventDefault(); event.stopPropagation();
        var dz = Dropzone.getElement("#dzId").dropzone,
            dzgqf = dz.getQueuedFiles();
        console.log("Queued files : ", dzgqf);

        if (dzgqf.length) {
            dzgqf.forEach(function(file) {
                var fsFile = new FS.File(file);
                fsFile.owner = Meteor.userId();
                fsFile.metadata = {
                    name: file.name
                };
                Images.insert(fsFile, function(error, fileObj) {
                    if (error) throw new Meteor.Error("Error uploading this file : ", fsFile);
                    Tracker.autorun( function() {
                        var fO = Images.findOne(fileObj._id);
                        if (fO.uploadProgress() !== 100) {
                            console.log(f0.metadata.name + ": chunk " + f0.chunkCount+"/"+fO.chunkSum + " - Progress " + fO.uploadProgress()+"%");
                            dz.emit("uploadprogress", file, fO.uploadProgress());
                        }
                        else {// if (fileObj.hasStored("mediasStore") {
                            console.log("File " + f0.metadata.name + " were successfully stored in FScollection 'Images'");
                            dz.emit(complete, file) // removes file's progressbar
                              .emit("success" file); // shows the checkmark then auto slides it out
                        }
                    });
                });
            });
        }
     }
});

Не совсем соответствует ожидаемым событиям DropzoneJS, но, по крайней мере, индикаторы прогресса работают без запуска XHR POST.

ошибки: "_ref.parentNode" не найден, из события "removeFile"

Если у кого-то есть более чистая реализация, не стесняйтесь писать!

Если enyo прочитает это, было бы неплохо исправить мой пример, и почему бы не поделиться им на главной странице DropzoneJS. То же самое для dbarrett на странице пакета Атмосфера.

Answer 2

Я использую следующий код для отправки изображения с использованием DropzoneJs и GridFS. ProcessImage используется для изменения размера изображения на стороне клиента, прежде чем отправить его на сервер.

Template.imageUpload.rendered = function() {
    Dropzone.autoDiscover = false;
    var dropzone = new Dropzone("form#dropzone", {
        acceptedFiles: 'image/*',
        accept: function(file, done) {

            processImage(file, 1024, 1024, function(data) {
                var img = new FS.File(data);
                img.owner = Meteor.userId();
                img.metadata = {
                    sourceId: Session.get('conditionUniqueId'),
                    staged: true
                };

                Images.insert(img, function(err, fileObj) {
                    if (err) {
                        return console.log(err);
                    } else {
                        dropzone.emit("complete", file).emit("success", file);
                    }
                });
            })

            done();
        }

    });
}