CollectionFS

カテゴリー：Meteor 作成日:2015年2月3日21:57

CollectionFSの使い方

最初にお断り、自分は英語わかりません。

説明を機械翻訳してよんだので、間違っているかも知れません。

 

プロジェクトの作成
meteor create testCollectionFS
cd testCollectionFS

いつものようにパッケージを読み込みます。 
meteor add cfs:standard-packages
meteor add cfs:filesystem

画像を縮小する場合は
meteor add cfs:graphicsmagick

testCoolectionFS.html

<head>
    <title>testCollectionFS</title>
<head>
<body>
　　<h1>testCollectionFS Test</h1>
　　　{{> myForm}}
</body>
<template name="myForm">
    <input type="file" class="myFileInput" name="files[]" multiple />
<template>

 testCollection.js　画像関係の場合。

1  var Images = new FS.Collection("images", 
2    stores: [
3    new FS.Store.FileSystem("images"),{path: "~/upload"}, {
　　　// 3の {path: "~/upload"} と書くことによって~/uploadフォルダーに読み込んだ画像が格納されます。
　　　// {path: "~/upload"} を書かないと testCollectionFS/.meteor/local/cfs/files/imagesに保存される。リサイズされた画像は testColletionFS/.meteor/local/cfs/files/thumbsに。
4    new FS.Store.FileSystem("thumbs",{ 
　　　//4の"thumbs"の後に "thumbs",{path:"~/upload/thumbs"}と書くと
　　　//13 gm(readStream).resize(180).stream('PNG').pipe(writeStream);でリサイズされるはずの画像はリサイズされない（ばぐ？）　
5       beforeWrite: function(fileObj) {
6         return {
7           extension: 'png',
8           type: 'image/png'
9         };
10       },
　　　// 5～10はリサイズすると同時に png画像へ変換する。この時 要13のstream('PNG')とする事。 stream()とすると壊れたpng画像が格納された。
11      transformWrite: function(fileObj, readStream, writeStream) {
12        // Transform the image into a 10x10px thumbnail
13        gm(readStream).resize(180).stream('PNG').pipe(writeStream);
14     }
　　　// gm を使うため GraphicsMagick をインストールしろとあったので　ubuntuserver 14.04 LTSでは、sudo apt-get install graphicsmagick をした。
15    })
16  ],　　
17  filter: {
18    allow: {
19      contentTypes: ['image/*'] //allow only images in this FS.Collection
20    }
21  }
22});

23if (Meteor.isClient) {
24  // counter starts at 0

25  Template.myForm.events({
26    'change .myFileInput': function(event, template) {
27      FS.Utility.eachFile(event, function(file) {
28        Images.insert(file, function (err, fileObj) {
29          //Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
30        });
31      });
32    }
33  });
34}

35if (Meteor.isServer) {
36  Meteor.startup(function () {
37    // code to run on server at startup
38  });
39}

テキストファイル関係では

testCollectionFS.html

<input type="file" class="myFileInput" name="files[]" multiple />
を
<input type="file" class="myFileInput" name="files[]" />
と multipleをはずした。



testCollectionFS.js

var eventPhotosStore = new FS.Store.FileSystem('eventPhotos', {
  path: '~/uploads/full'
});

eventPhotos = new FS.Collection('eventPhotos', {
  stores: [eventPhotosStore]
});

events = new Meteor.Collection('events');

if (Meteor.isClient) {
  Template.myForm.events({
    'change .myFileInput': function(evt) {
      var file = evt.target.files[0];

      var fileObj = eventPhotos.insert(file);

      console.log('Upload result: ', fileObj);
      events.insert({
          name: file.name,
          file: fileObj
       });

    }
}

のように使うようだ、

簡単にファイル操作ができるようだが、自分のほしかった機能( ローカルのファイルを読み込んで moongodb へ格納する )ではないようだ。

<input type="file" class="myFileInput" name="files[]" multiple />

で multiple は複数同時にファイルを読み込んでくれるので便利ではあるが、メモリーの関係かハングしたようになる場合があるようだ。