express.jsでファイルをGoogle Cloud Storageにアップロードする（1）

express.jsとgoogle cloud storage

express.js

node.jsプラットホームで定番のweb framework。高い柔軟性と可用性を持ち、便利なmoduleも充実している。

Google Cloud Storage

Googleが提供した静的ファイルストーレージサービス。AWSのS3と似ている。Google APIやブラウザを通してファイル管理することができる。

サンプルアプリを作る

express.jsで複数のファイルがアップロードできるアプリを作ってみる。

必要なmodule

multer（簡単にファイルアップロードを実装できるexpress.jsのmodule）
googleapis（google api module）

npmでmoduleをインストールする

npm install multer --save
npm install googleapi --save

multerを導入する

app.jsを開いて、まずmulterモジュールをrequireする：

var multer = require('multer');

次に、app.use('/', routes); の直前に下記のコードを加える：

app.use(multer({}));

これで、アップロード機能の実装は完了。びっくりするぐらい簡単だが、プロダクションにはまだ細かい設定が必要。この記事では詳しく説明しないが、興味ある方はmulterの公式ドキュメントを参考してください：https://github.com/expressjs/multer。

実際ファイルアップされたかどうかを確認したいので、multerにonFileUploadCompleteコールバックを設定して、アップされたファイルのパスをプリントする。

// ./app.js
 
app.use(multer({
  onFileUploadComplete: function(file, req, res) {
    console.log('UP完了：' + file.path);
  },
 
  // putSingleFilesInArrayをtureにすると、ファイル一個しか選択されても配列として扱う
  putSingleFilesInArray: true
}));

適当にrouteとテンプレートを作ってテストする：

route

// ./app.js
 
// アップロードフォームを表示する
app.get('/upload', function(req, res) {
  res.render('upload');
});
 
// アップロード処理
app.post('/upload', function(req, res) {
  // multerはreqにfilesという変数を作成し、その中に格納されたのはフィールドネームをキーにしたオブジェクト
  // テンプレートにinputのnameが「files」になってるので、req.files.filesでファイルを取得する
  var files = req.files.files;
  res.render('uploaded', {files : files} );
});

テンプレート

// ./view/upload.jade
 
extends ./layout
 
block content
  form(action='/upload', method='POST',  enctype='multipart/form-data')
    input(type='file', name='files', multiple='')
    input(type='submit', value='あっぷ!')

// ./views/uploaded.jade
 
extends ./layout
 
block content
  for file in files
    p=file.path

npm install && npm startでプレビューしてみる：

うまくアップロードされたようで、もうちょっと完成度あげってみよう：アップした画像を表示させてみる。multerのchangeDestというオプションでファイルのアップロード先を変えることができる：

// ./app.js
 
app.use(multer({
  // アップロード先を./public/imagesにする
  changeDest: function(dest, req, res) {
    return __dirname + '/public/images';
  },
  onFileUploadComplete: function(file, req, res) {
    console.log('UP完了：' + file.path);
  },
 
  // putSingleFilesInArrayをtureにすると、ファイル一個しか選択されても配列として扱う
  putSingleFilesInArray: true
}));

テンプレートの方もちょっと調整する：

// ./views/uploaded.jade
 
extends ./layout
 
block content
  for file in files
    img(src='/images/' + file.name, style="width:200px;height:auto;margin-right:2px;float:left;border:1px solid #DFDFDF;")

もう一回プレビューしてみよう：

できた！これで、簡単なファイルアップロード機能が実装完了！

この記事では最低限のファイルアップロード機能を実装したが、実際にプロダクションに移行する時に、セキュリティ面を考慮しなければならない。

次はこのアプリでアップロードしたファイルをGoogle Cloud Storageに保存するという仕組みを作ってみる：http://befool.co.jp/blog/chainzhang/expressjs-file-upload-to-google-cloud-storage-2/