サーバー構築不要!スマートフォンアプリ向けの新クラウド

トップ >ドキュメント >ファイルストア(JavaScript & Monaca):基本的な使い方

ファイルストア(JavaScript & Monaca)

基本的な使い方

概要

このページでは、ファイルストアの基本的な使い方について説明します。

ファイルストアでファイルをアップロード・ダウンロードするには、Fileクラスを利用します。
このクラスのメソッドは全てクラスメソッドとなっており、インスタンスを生成せずに利用します。

ファイルアップロード

uploadメソッドを用いてファイルをアップロードします。

Node.jsでファイルアップロードを行う場合

Node.jsでファイルをアップロードする場合には、
fsモジュールを利用する必要があるため、requireを使ってモジュールを読み込んでいます。
FILE_PATHの部分にはアップロードするファイルへのパスを指定してください。

※注意

アップロードするファイルの名前にはルールがありますので、ご注意ください。
詳細は、開発ガイドライン:ファイルストアについてをご参照ください。

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){
        // エラー処理
       });
});

ブラウザでファイルアップロードを行う場合

ブラウザからファイルをアップロードする場合には、
DOMからファイルオブジェクトを取得する必要があります。
以下の例ではinput欄に指定されたファイルを取得し、ファイル名を指定してアップロードしています。

<html>
<head>
  <script src="ncmb.min.js"></script>
  <script>
    var ncmb = new NCMB("YOUR_APPLICATION_KEY", "YOUR_CLIENT_KEY");
    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){
          // エラー処理
        });
    }
  </script>
</head>
<body>
    <p>
      name <input type="text" id="file-name"/>
    </p>
    <p>
      file <input type="file" id="file-data"/>
    </p>
    <button onClick="onFormSend()">send</button>
</body>
</html>

ファイルの検索

検索条件を指定してfetchAllメソッドを実行することで、条件に合致するファイルのファイル名やサイズ、作成日時などを取得することができます。
※ファイルデータそのものを取得するにはdownloadメソッドを用います(後述)。

ncmb.File.equalTo("mimeType", "text/plain")
    .order("createDate", true)
    .fetchAll()
    .then(function(files){
      // 検索後処理
     })
    .catch(function(err){
      // エラー処理
     });

ファイルのACLを更新

updateACLメソッドによって、ファイルへのアクセス権限を更新することができます。
ファイルそのものを更新したい場合は、同名のファイルをuploadすることで上書きします。

var acl = new ncmb.Acl();
acl.setPublicReadAccess(true);
ncmb.File.updateACL("abc.txt", acl)
    .then(function(data){
      // 更新後処理
     })
    .catch(function(err){
      // エラー処理
     });

ファイルの削除

deleteメソッドを利用して、ファイルを削除することができます。

ncmb.File.delete("abc.txt")
    .then(function(){
      // 削除後処理
     })
    .catch(function(err){
      // エラー処理
     });

ファイルの中身を取得

downloadメソッドを用いて、ファイルのバイナリデータを取得します。

ncmb.File.download("abc.txt")
    .then(function(fileData){
      // ファイル取得後処理
     })
    .catch(function(err){
      // エラー処理
     });

バイナリデータを取得し画像を表示する

バイナリデータを取得し画像を表示するにはdownloadメソッドの引数にレスポンスバイナリのデータ形式を指定します。
以下は、レスポンスバイナリのデータ形式をblobに指定した場合のサンプルです。

<html>
<head>
  <script src="ncmb.min.js"></script>
  <script>
    var ncmb = new NCMB("YOUR_APPLICATION_KEY", "YOUR_CLIENT_KEY");
    var reader = new FileReader();
    reader.onload = function(e) {
      var dataUrl = reader.result;
      document.getElementById("image").src = dataUrl;
    }

    function downloadImage(){
      // ファイル名からファイルを取得
      var fileName = "test.png";

      // ダウンロード(データ形式をblobを指定)
      ncmb.File.download(fileName, "blob")
           .then(function(blob) {
           // ファイルリーダーにデータを渡す
           reader.readAsDataURL(blob);
           })
           .catch(function(err) {
              console.error(err);
           })
    }
  </script>
</head>
<body>
  <img src="" id="image" width="200" height="200"/>
  <input type="submit" value="画像表示" id="view" onclick="downloadImage();" />
</body>
</html>

管理画面での操作

ファイルをアップロードする

管理画面の左側メニューから、ファイルをクリックしてください。
ファイル管理ページを開く

アップロードボタンをクリックすると、ファイルアップロード画面が開きます。
ファイルアップロード画面を開く

デフォルトで選択したファイルの名前とMIMEタイプが表示されますが、変更することができます。
※MIMEタイプ:システムがファイルの種別を判断するためのもの
デフォルトでは全会員がファイルにアクセス可能となっていますが、パーミッションを設定して権限を変更できます。

※注意

アップロードするファイルの名前にはルールがありますので、ご注意ください。
詳細は、開発ガイドライン:ファイルストアについてをご参照ください。

「アップロードする」をクリックすると、ファイルがアップロードされます。
アップロード完了

ファイルを削除する

削除するファイルをチェックして、削除ボタンをクリックします。

ファイルクラスのパーミッションを設定する

ファイルストアを選択すると、ファイルの一覧画面が開くので、「クラスの編集」ボタンをクリックしてください。
ファイルクラスパーミッション設定
クラスの編集画面が開くので、「パーミッションの設定」ボタンをクリックし、パーミッションを設定してください。
ファイルクラスパーミッション設定2
パーミッションを削除する場合は、各行の左側にあるチェックボックスをクリックしたあと、削除ボタンをクリックしてください。

ファイル情報の暗号化設定

ファイルストアの「クラスの編集」から、ファイル名とMIMEタイプを暗号化した状態で保存するための設定ができます。

ファイル情報の暗号化設定

お探しの内容が見つからなかった場合はユーザーコミュニティ もご活用ください。(回答保証はいたしかねます)
なお、 Expertプラン以上のお客様はテクニカルサポートにてご質問を承らせて頂きます。

推奨画面サイズ1024×768px以上

ページの先頭へ