MTAppMultiFileUpload

Data API を使って、選択したファイルをその場でアップロードし、結果（アセットの ID または URL）を対象フィールドに保存・表示する jQuery プラグインです。入力欄の近くに配置する「入力欄型」と、サイドバーのウィジェットとして配置する「ウィジェット型」があります。複数ファイルの同時アップロードに対応します。

構文

$(selector).MTAppMultiFileUpload(options);

$.fn プラグイン（$(selector).MTAppMultiFileUpload(...)）です。対象要素（this）を返すのでチェーンできます。

パラメータ

options {Object} — 以下のプロパティを持ちます（api は必須）。

戻り値

{jQuery} — 対象要素（チェーン可能）。

保存される値

saveData に応じて、アップロードしたアセットの情報がフィールドに保存されます。

• saveData: 'id'（既定）: アセットの ID。multiple: true のときはカンマ区切り（例: 12,13,14）。
• saveData: 'url': アセットの URL。同じくカンマ区切り。

削除リンクを押すと、その値がカンマ区切りから取り除かれます。

使用例

// 認証済みの Data API を使って複数ファイルをアップロードし、アセット ID を保存する
$('#customfield_files').MTAppMultiFileUpload({
    api: mtappVars.DataAPI, // 「DataAPI SDK を利用」有効時は現在ログインで認証済み
    siteId: 1,
    saveData: 'id',
    multiple: true
});

// URL を保存し、画像とファイルでアップロード先を分ける
$('#customfield_docs').MTAppMultiFileUpload({
    api: mtappVars.DataAPI,
    siteId: 1,
    saveData: 'url',
    uploadImagesPath: 'upload/images',
    uploadFilesPath: 'upload/files'
});

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#customfield_files').MTAppMultiFileUpload({
            api: mtappVars.DataAPI, // 「DataAPI SDK を利用」有効時は現在ログインで認証済み
            siteId: 1,
            saveData: 'id',
            multiple: true
        });
    }
})(jQuery);

生成される HTML

対象フィールドの直後（type: 'input'）に、ファイル選択欄とアップロード済みアイテムの表示欄が挿入されます。type: 'widget' のときはサイドバー（#related-content）の先頭にウィジェットとして挿入されます。

<input type="text" id="customfield_files">
<div class="mtapp-multifileupload-file">
    <input type="file" id="mtapp-multifileupload-file-…" multiple>
</div>
<div class="mtapp-multifileupload-items">
    <p class="mtapp-upload-item">
        <a class="mtapp-item-type-image" href="…" target="_blank" data-itemvalue="12"><img src="…"></a>
        <a class="mtapp-item-remove" href="#">削除</a>
    </p>
</div>

補足

• Data API の認証が必要です。「DataAPI SDK を利用」が有効な場合、本プラグインが現在ログイン中のユーザーで認証済みにする mtappVars.DataAPI をそのまま api に渡せます（再ログイン不要）。未認証で api.getToken() が 401 を返す場合は Data API の認証画面へリダイレクトします。
• ページ読み込み時、保存済みの値からアップロード済みアイテムを再表示します。saveData: 'id' のときは Data API（listAssets）でアセット情報を取得して一覧表示するため、MT ネイティブのアセット一覧（#asset-list）に載っていないフィールド単体でも表示できます。saveData: 'url' のときは保存値の URL から直接表示します（Data API 不要）。削除済みなどで取得できない ID はスキップします。
• 記事／ページ編集画面では、アップロードしたアセットを MT ネイティブのアセット一覧（#asset-list）にも追加し、記事へ関連付けます。
• アップロード結果のファイル名・URL は要素の属性／テキストとして安全に設定するため、値にタグ文字列が含まれても HTML として解釈されません（HTML インジェクションを起こしません）。
• dropArea: true にすると、ファイルをドラッグ&ドロップできる領域を表示します。外部ライブラリに依存せず、ブラウザ標準の HTML5 ドラッグ&ドロップ API で実装しています。領域をクリックするとファイル選択ダイアログも開きます（input:file は隠れます）。ドロップ時もファイル選択時と同じアップロード処理が動きます。
• uploadButton に渡す HTML は開発者が指定する意図的な HTML です（そのまま挿入されます）。
• 画像はサムネイル（img）、それ以外はファイル名／URL のリンクとして表示されます。

関連

• MTAppAssetFields — 既存アセットを選択ダイアログで選ぶ（アップロードではなく選択）。
• MTAppAssetsGallery — MTAppJSONTable と組み合わせ、アセットをテーブル形式で複数管理する。