CollectionFS is a suite of packages providing file management functionality in meteor.

For information about CollectionFS, refer to CollectionFS.

The example in this post is available on github, run git clone https://github.com/RemyNoulin/cfs_example.git to download it.

This blog shows how to upload a file to the server with 2 interfaces:

  • file dialog
  • dropzone

In the blog, gridfs is used to store the files on the server and in the git, the filesystem on the server is used to store the files.

Contents

  1. Install packages

  2. Setup

  3. Access permissions

  4. Upload with file dialog

  5. Upload with dropzone

1. Install packages

On the command line in the project, run:

meteor add cfs:standard-packages
meteor add cfs:gridfs

2. Setup

Add this code in client code:

var imageStore = new FS.Store.GridFS("images");

Images = new FS.Collection("images", {
 stores: [imageStore]
 });

“images” is the name of the collection in mongodb storing files metadata. This code subcribes to the images collection.

3. Access permissions

Add this code in client code:

Images.deny({
 insert: function(){
 return false;
 },
 update: function(){
 return false;
 },
 remove: function(){
 return false;
 },
 download: function(){
 return false;
 }
 });

Images.allow({
 insert: function(){
 return true;
 },
 update: function(){
 return true;
 },
 remove: function(){
 return true;
 },
 download: function(){
 return true;
 }
});

4. Upload with file dialog

The file dialog is a file input field in a template, in cfsExample.html I added:

<template name="file">
<input type="file" name="file" class="myFileInput" />
</template>

Add this code in client code:

Template.file.events({
  'change .myFileInput': function(event, template) {
    FS.Utility.eachFile(event, function(file) {
      Images.insert(file, function (err, fileObj) {
        //Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
        console.log("uploaded")
        console.log("Image url: /cfs/files/images/" + fileObj._id);
      });
    });
  }
});

‘FS.Utility.eachFile’ loops on all selected files and Images.insert uploads the files one by one. In the Images.insert callback, fileObj._id is the id of the document representing the file in the images collection.

The file is reachable at http://localhost:3000/cfs/files/images/_id when meteor runs on localhost.

5. Upload with dropzone

First install the package to catch the dropped event:

meteor add raix:ui-dropped-event

In my html code, I added a template drop that uploads the files drop in the dropzone:

<template name="drop">
  <div id="dropzone" class="dropzone">
            <div style="text-align: center; color: gray;">Drop file to upload</div>
    </div>
</template>

Add this code in client code, it works in the same way as the file dialog method:

Template.drop.events({
  // Catch the dropped event
  'dropped #dropzone': function(event, temp) {
    FS.Utility.eachFile(event, function(file) {
      Images.insert(file, function (err, fileObj) {
        //If !err, we have inserted new doc with ID fileObj._id, and
        //kicked off the data upload using HTTP
        console.log("Image url: /cfs/files/images/" + fileObj._id);
      });
    });
  }
});