将 dropzone.js 与 meteor.js 一起使用答案

【问题标题】：Using dropzone.js with meteor.js将 dropzone.js 与 meteor.js 一起使用
【发布时间】：2014-08-26 14:31:38
【问题描述】：

我对某事感到困惑。我正在尝试将 dropzone.js 流星包 (http://atmospherejs.com/dbarrett/dropzonejs) 与我的流星应用程序一起使用，但我找不到任何关于它的示例。在文档中它说：像这样使用模板

{{> dropzone url='http://somewebsite.com/upload' id='dropzoneDiv'}}

和

它会将所有上传的文件发布到您选择的网址。

所以如果我写，

{{> dropzone url='http://localhost:3000/home' id='dropzoneDiv'}}

一旦我放下图像，它会上传到 /public/home 文件夹吗？我的意思是处理服务器端保存图像的包也是吗？如果没有，您能否给我一些关于如何处理服务器端保存的提示？

谢谢

【问题讨论】：

您是否使用了用于 dropzone.js 的流星包？模板来自哪里？如果你正在使用一个包，那么如果你能指出它会有所帮助，所以我们可以尝试理解它。在meteor中，一个包可以选择是否实现服务器端部分。 dropzone.js 本身（非流星包）只是做客户端，但有很多例子说明如何在必要时实现服务器端代码。
atmospherejs.com/dbarrett/dropzonejs 这是包裹
该软件包没有说明服务器端的任何内容。请阅读 dropzone.js 的文档以了解如何实现服务器端。

标签： meteor dropzone.js

【解决方案1】：

Dropzone 可能有点混乱：

首先，您应该获得 Meteor 的文件管理系统。现在的标准是 CollectionFS：

https://github.com/CollectionFS/Meteor-CollectionFS

然后你需要添加一个文件系统。我使用 GridFS，它将大文件分成块并将它们存储到 Mongo 中：

https://github.com/CollectionFS/Meteor-cfs-gridfs/

按照说明创建、发布和订阅您的新的特殊 FS 集合：

example for creating the collection: 

MyImages = new FS.Collection('myImages', {
    stores: [new FS.Store.GridFS("myImages")]
});

安装这两个之后，创建你的 dropzone：

<template name="imageUpload">
  <form action="/file-upload" class="dropzone" id="dropzone"></form>
</template>

然后在你的javascript中：

Template.imageUpload.rendered = function(){

  if (Meteor.isClient){

    var arrayOfImageIds = [];

    Dropzone.autoDiscover = false;

    // Adds file uploading and adds the imageID of the file uploaded
    // to the arrayOfImageIds object.

    var dropzone = new Dropzone("form#dropzone", {
        accept: function(file, done){
            MyImages.insert(file, function(err, fileObj){
                if(err){
                  alert("Error");
                } else {
                  // gets the ID of the image that was uploaded
                  var imageId = fileObj._id;
                  // do something with this image ID, like save it somewhere
                  arrayOfImageIds.push(imageId);
                };
            });
        }
    });
  };

};

【讨论】：

非常好。但是，有什么方法可以让 dropzone 的进度条正常运行吗？到目前为止，它没有显示任何进度条......或者获得成功和错误事件？

【解决方案2】：

我假设，它不显示上传进度，因为它与流星瞬间。

您正在更新浏览器中的 mini-mongo 位置，因此更改是即时的。

Meteor DDP 然后处理粘合以将其发送到服务器，然后将这些更改推送到可能订阅的其他客户端。那个“即时”更新就是流星魔法。提醒自己，或成功登录控制台。您还可以通过 MyImages.find().fetch() 检查数据库。

如果他们在那里，一切都完成了。

【讨论】：

【解决方案3】：

Please find below link(example of dropzonejs):

https://github.com/devonbarrett/meteor-dropzone/tree/master/example-app

Put  {{>dropzone url="/upload" id="template-helper"}} In your template

<template name="test">
   {{>dropzone url="/upload" id="template-helper"}}
</template>

Then at server side:
if (Meteor.isServer) {
  Meteor.startup(function () {
    UploadServer.init({
      tmpDir: process.env.PWD + '/public/uploads',
      uploadDir: process.env.PWD + '/public/uploads',
      checkCreateDirectories: true,
      uploadUrl: '/upload'
    });
  });
}

【讨论】：