マルチフィールドのアセット系のフィールドごとにアップロードディレクトリを指定する

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何？という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

今週リリースした MTAppjQuery v3.0.4 から、マルチフィールドのアセット系フィールドごとにアップロードディレクトリを指定できるようになりました。地味ながら便利な機能だと思いますので、ここで改めてご紹介します。

アップロード先ディレクトリを一つ指定

例えば、マルチフィールドの中に image というフィールドハンドルの画像フィールドと、file というフィルドハンドルのアセットフィールドがあるとします。fieldBlocks オプションには下記のように設定されています。

mtapp.multiField({
    debug: true,
    version: 3,
    id: mtapp.getContentFieldIdByLabel('マルチフィールド'),
    label: 'マルチフィールド',
    showViewRawDataButton: true,
    fieldBlocks: {
        image: {
            type: 'image',
            label: '画像',
            hasTextField: true,
            textFieldLabel: 'altテキスト',
            data: { id: '', url: '', thumbnail: '', alt: '' }
        },
        asset: {
            type: 'asset',
            label: 'ファイル',
            data: { id: '', url: '' }
        },
    },
    fieldGroups: [
        ['image', 'asset'],
    ]
});

これらのフィールドで以下のように画像をアップロードしたいとします。

「画像」フィールドでアップロードするファイル → サイトパス/upload/images
「ファイル」フィールドでアップデートするファイル → サイトパス/upload/files

これを実現するために下記のように uploadDirectory を追加します。

mtapp.multiField({
    debug: true,
    version: 3,
    id: mtapp.getContentFieldIdByLabel('マルチフィールド'),
    label: 'マルチフィールド',
    showViewRawDataButton: true,
    fieldBlocks: {
        image: {
            type: 'image',
            label: '画像',
            hasTextField: true,
            textFieldLabel: 'altテキスト',
            uploadDirectory: 'upload/images', // この設定を追加
            data: { id: '', url: '', thumbnail: '', alt: '' }
        },
        asset: {
            type: 'asset',
            label: 'ファイル',
            uploadDirectory: 'upload/files', // この設定を追加
            data: { id: '', url: '' }
        },
    },
    fieldGroups: [
        ['image', 'asset'],
    ]
});

すると下図のようにダイアログのパスのフィールドに設定した値がセットされます。

アップロード先ディレクトリを複数指定

下記のように uploadDirectory オプションに配列をセットするとパスを入力するフィールドがドロップダウンリストになります。

mtapp.multiField({
    debug: true,
    version: 3,
    id: mtapp.getContentFieldIdByLabel('マルチフィールド'),
    label: 'マルチフィールド',
    showViewRawDataButton: true,
    fieldBlocks: {
        image: {
            type: 'image',
            label: '画像',
            hasTextField: true,
            textFieldLabel: 'altテキスト',
            uploadDirectory: 'upload/images',
            data: { id: '', url: '', thumbnail: '', alt: '' }
        },
        asset: {
            type: 'asset',
            label: 'ファイル',
            uploadDirectory: ['upload/financial', 'upload/report', 'upload/news'], // 配列で指定
            data: { id: '', url: '' }
        },
    },
    fieldGroups: [
        ['image', 'asset'],
    ]
});

アップロード先ディレクトリを一つ指定

アップロード先ディレクトリを複数指定

「MTAppjQuery」カテゴリの記事一覧