Data API v1 を利用したファイルアップロード機能を提供します。

ブラウザが <input type="file" multiple> に対応していれば、複数ファイルをまとめてアップロードすることができます。

テキスト入力欄をファイルアップロードに変更する方法と、サイドバーウィジェットにファイルアップローダーを設置する方法があります。

さらに、記事編集画面でアップロードしたファイルは、その記事の記事アイテムに登録されます。

使い方

Data API proxy と組み合わせてる（2017-07-21 追記）

MTAppjQuery と Data API proxy を組み合わせると、MTAppMultiFileUpload も含めて、管理画面で Data API をより快適にお使いいただけます。その方法を下記の記事に掲載していますのでご参照ください。

MTAppjQuery と Data API proxy を組み合わせて管理画面で Data API を快適に使う | かたつむりくんのWWW

Data API SDK の読み込み

この MTAppMultiFileUpload は、Movable Type 6.0 より実装された Data API v1 を利用します。

そのため、 .MTAppMultiFileUpload() を実行するコードよりも手前で、Data API オブジェクトを作成する必要があります。

Data API オブジェクトを作成するには、mt-data-api.js を管理画面に読み込ませる必要がありますので、MTAppjQuery のプラグイン設定の「変数 js_include に追加（の直前）」欄に下記のコードを記述します。

<script type="text/javascript" src="<mt:StaticWebPath>data-api/v1/js/mt-data-api.min.js"></script>

これはウェブサイトやブログのプラグイン設定よりも、システムプラグイン設定の「システム設定」ブロックにある「変数 js_include に追加（の直前）」に書いておくと大変便利です。

Data API オブジェクトの作成

Data API オブジェクトは下記のコードで作成できます。この場合の Data API オブジェクトが格納された変数名は api となります。

var api = new MT.DataAPI({
    baseUrl:  '<mt:CGIPath><mt:Var name="config.DataAPIScript">',
    clientId: 'MTAppMultiFileUpload'
});

clientId は任意の英数文字に変更してください。

このコードは、mt-data-api.js を読み込んだ後で、かつ .MTAppMultiFileUpload() を実行するコードの手前の位置に置き、user.js に記述するか、MTAppjQuery プラグイン設定の「変数 js_include に追加（の直前）」などに記述します。

ただし、プラグイン設定に記述する場合は、全体を <script></script> で囲む必要があります。

Data API の認証処理

Data API を利用してファイルをアップロードするためには、Data API の認証を通す必要があります。

そのため、この MTAppMultiFileUpload を適用した管理画面にアクセスすると一度 Data API でのログイン画面にリダイレクトされます。

このように通常の Movable Type の認証の他に Data API の認証も出てしまうのを回避する方法として、ファイルアップロード権限のみを持たせたユーザーを作っておき、ファイルのアップロード時にバックグラウンドでそのユーザーとしてログインしてアップロードさせる方法があります。

ただし、この方法だと、ファイルをアップロードしたユーザーが投稿者とは別になってしまう可能性もありますのでご注意ください。

バックグラウンドでログインさせるには mtappVars オブジェクトに以下の2つのプロパティを追加します。これは、上記の Data API オブジェクトを作成した直後に記述すると良いでしょう。

mtappVars.DataAPIFileUploadUser = 'ファイルアップロード用ユーザーID';
mtappVars.DataAPIFileUploadUserPassword = 'ファイルアップロード用ユーザーパスワード';

これでバックグラウンドで認証を通ることができます。

ただし、このユーザー情報は user.js などスタティックに書き出すファイルには書かないことを推奨します。また、権限によって管理画面に表示されるなども必要かもしれません。

セキュリティとユーザビリティとを比較検討して、認証を通過する方法を検討してください。

MTAppMultiFileUpload の実行

上記の準備の後、下記のようにメソッドを実行します。

$(foo).MTAppMultiFileUpload(options);

foo には MTAppMultiFileUpload を適用させたい1行テキスト入力欄のセレクタを設定し、options には後述のオプションを設定します。

サンプル

例えば、キーワード欄にファイルアップロード機能を付け、キーワード欄自体にはアップロードしたアイテムの ID を保存する場合は、下記のコードを user.js に記述します。

$('#keywords').MTAppMultiFileUpload({
    api: api,
    type: 'input',
    multiple: true,
    uploadPath: 'upload',
    uploadImagesPath: 'upload/images',
    uploadFilesPath: 'upload/files',
    uploadButton: '<input type="button" value="select files" class="button">'
});

オプション

$(foo).MTAppMultiFileUpload({
    "api": null,
    "siteId": mtappVars.blog_id,
    "normalizeOrientation": true,
    "autoRenameIfExists": true,
    "type": "input",
    "targetInputStyle": {
        display: 'inline',
        marginRight: '1em',
        width: '20em'
    },
    "multiple": true,
    "saveData": "",
    "uploadPath": "upload",
    "uploadImagesPath": null,
    "uploadFilesPath": null,
    "uploadButton": null,
    "cbAfterUpload": null
});

cbAfterUpload: function(cb, $this, response){
    // do something
}