0

私は現在、Meteor、CollectionFS、および GridFS StorageAdapter を使用して、画像共有プラットフォームを開発しています。

私は優れたパッケージdbarrett:dropzonejsも使用していますが、特に XHR とアップロードの進行状況に関して、CollectionFS の実装に問題があります。

今のところ、このコードを使用します。

問題: ファイルをアップロードするときに、CollectionFS からの PUT 要求と一緒に、コンソールに不要な POST 要求があることに気付きました。dbarrett_dropzone.js ファイルの xhr.send() に絞り込みました。それらを止めようとして、私は template.rendered > dropzone options で試しました:

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 の挿入に必要な Queue 配列の設定が妨げられます...

質問: すべての xhr が書き込まれている dropzone.uploadFiles(files) 関数を上書きする必要があると思います...しかし、私の試みはすべて失敗しました。誰か実装を提案してもらえますか?

理想的には、そのような実装は次のようになると考えています:

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

2 に答える 2

0

次のコードを使用して、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();
        }

    });
}
于 2016-01-07T12:08:10.313 に答える