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

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

ファイルストア(Monaca)

基本的な使い方

概要

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

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

ファイルアップロード

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

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

<html>
<head>
  <!-- 省略 -->
  <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>

カメラで撮った画像ファイルのアップロード

※Cordova用カメラプラグイン(Camera cordova-plugin-camera)を有効にする必要があります。

<html>
<head>
  <!-- 省略 -->
  <script>
    var ncmb = new NCMB("YOUR_APPLICATION_KEY", "YOUR_CLIENT_KEY");
    function snapPicture () {
        navigator.camera.getPicture (onSuccess, onFail,
            { quality: 50, destinationType: Camera.DestinationType.DATA_URL});

        //成功した際に呼ばれるコールバック関数
        function onSuccess (imageData) {
            // 画像を表示
            var image = document.getElementById ('showImage');
            image.src = "data:image/jpeg;base64," + imageData;

            var byteCharacters = toBlob(imageData);
            ncmb.File.upload("test.png", byteCharacters)
            .then(function() {
              alert("Successful");
            })
            .catch(function(error) {
              alert(JSON.stringify(error));
            });
        }

        //失敗した場合に呼ばれるコールバック関数
        function onFail (message) {
            alert ('カメラエラーです: ' + message);
        }
    }

    function toBlob(base64) {
        var bin = atob(base64.replace(/^.*,/, ''));
        var buffer = new Uint8Array(bin.length);
        for (var i = 0; i < bin.length; i++) {
            buffer[i] = bin.charCodeAt(i);
        }
        // Blobを作成
        try{
            var blob = new Blob([buffer.buffer], {
                type: 'image/png'
            });
        }catch (e){
            return false;
        }
        return blob;
    }
  </script>
</head>
<body>
    <a class="button--large" onclick="snapPicture()">Take picture and save</a>
    <img id="showImage" width="280" height="350"/>
</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>
    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以上

ページの先頭へ