小粋空間  -  a cheap joke and a play on words site

Movable Type Data APIの使い方：uploadAsset()

Movable Type 6から提供されるData APIの使い方を紹介します。

本エントリーではJavaScript SDK APIのuploadAsset()を使ったアイテムのアップロードについて解説します。

１．基本

uploadAsset()は、アイテムのアップロードを行うためのAPIです。

uploadAsset()を使ったアイテムのアップロードを行うための簡単なサンプルを紹介します。

<script>
// API生成コード等は省略
 
$('#upload').click(function(){
    var data = {
      file: document.getElementById("file").files[0], // File object
      path: "images",
      autoRenameIfExists: true,
      normalizeOrientation: true
    };
    api.uploadAsset(2, data, function(response) {
        if (response.error) {
            $('#result').html('エラー' );
            return;
        }
        $('#result').html('アップロード完了' );
    });
});
</script>
 
<input type="file" id="file" />
<input type="button" id="upload" value="アップロード" />
<div id="result"></div>

JavaScriptライブラリのインクルードやapiの生成については「Movable Type Data APIの使い方（JavaScript SDKを使ったオブジェクトの生成）」を参照してください。

また、エラーのハンドリングについては「Movable Type Data APIの使い方（エラーのハンドリング）」を参照してください。

なお、上記のサンプルでは結果表示処理でjQueryを利用しているので、jQueryのインクルードも行ってください。

２．パラメータ

uploadAsset()に設定するパラメータは次のとおりです。第2パラメータのdataはハッシュで設定します。

• siteId：ブログID（必須）
• data：アップロードするアイテムのデータ（必須）
• callback：コールバック処理（オプション）

公式リファレンスでは第3パラメータのcallbackはオプションのようですが、エラーの判定を行うには必要な処理だと思います。

第2パラメータのdataの詳細は次のとおりです。

• file：フォームのファイルオブジェクト
• path：アップロード先のパス
• autoRenameIfExists：同一ファイルが存在する場合、古いファイルをリネーム
• normalizeOrientation：Exif情報を使って画像の向きを修正する

その他にもoverwrite、fileName、tempが使えるみたいです。

３．レスポンス

レスポンスとして次のようなJSONデータが非同期で返却されます（MT6 rc2版時点でのサンプル）。

{"filename":"hoge.png","url":"http://user-domain/images/hoge.png","mimeType":"image/png","label":"image","id":"2","description":null,"tags":[]}

データの意味は次のとおりです。

filename
アイテムのファイル名

url
アップロード先のURL

mimeType
MIMEタイプ

label
アイテムの名前

id
アイテムのID

description
アイテムの説明

tags
アイテムのタグ

autoRenameIfExistsにfalseを設定して、同一ファイルが存在する場合、次のようなエラーレスポンスが返却されます。

{"error":{"data":{"temp":"hgrz_vahWc","fileName":"hoge.png","path":"images"},"message":"A file named 'hoge.png' already exists.","code":409}}

４．注意事項

uploadAsset()を実行するには、authenticate()を使って認証しておく必要があります。

認証されていない状態でこのAPIを実行すると、次のレスポンスが返却されます。

{"error":{"message":"Unauthorized","code":401}}

また、アップロード権限がない場合は403エラーとなります。