Webブラウザでファイルストアにアップロードする

WebブラウザとNode.jsのAPIは多少異なります。JavaScript SDKを使えばほぼどちらも相違なく使えるのですが、ファイルストアへのアップロードは異なりますので注意してください。

今回はテキストデータのアップロード方法について紹介します。

Node.jsの場合

Node.jsではFile Systemが使えますので下記のようにファイルをアップロードできます。

var ncmb = new NCMB(apikey, clientkey);

var fs = require('fs');
fs.readFile('FILE_PATH', function (err, data) {
  if (err) throw err;
  var name = "abc.txt";
  ncmb.File.upload(name, data)
      .then(function(data){
        // アップロード後処理
       })
      .catch(function(err){
        // エラー処理
       });
});

Node.js（テキストデータの場合）

Node.jsではBufferオブジェクトを使ってアップロードします。なお、このBufferオブジェクトはWebブラウザでは提供されていません。

buf = new Buffer(csv.join("\r\n"), 'UTF-8');
ncmb.File.upload(filename, buf)
  .then(function() {
    res.status(200).json("アップロードされました。" + filename);
  })

Webブラウザ（ファイルの場合）

Webブラウザでも input=file を使う場合はさほど難しくありません。

var onFormSend = function(){
  var fileName = document.getElementById("file-name").value;
  var fileData = document.getElementById("file-data").files[0];

  ncmb.File.upload(fileName, fileData)
    .then(function(res){
      // アップロード後処理
    })
    .catch(function(err){
      // エラー処理
    });
}

Webブラウザ（テキストデータの場合）

そして単純なテキストデータをWebブラウザでアップロードする場合が問題です。答えはBlobを使います。

let blob = new Blob(['Hello NCMB!'], {type: 'text/plain'});
ncmb.File
  .upload(fileName, blob, acl)
  .then(function() {
    
  })

Blobでは最初の引数を配列にするのも重要です。また、二つ目の引数でmimeTypeを指定できます。このように処理することでテキストエリアに入力したデータであったり、配列を使ったCSVデータなどをアップロードできるようになります。

---

WebブラウザとCUIで共通のように使えるJavaScript SDKですが、実行環境が違うとAPIにも多少の差異が出てきます。実装時にはご注意ください。