CollectionFS
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
-
Install packages
-
Setup
-
Access permissions
-
Upload with file dialog
-
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);
});
});
}
});