CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その２

2017/11/25 2017/11/26

CakePHP3にファイルアップロードプラグイン Upload Plugin 3.0をカスタマイズする方法

　
この記事は、CakePHP3でファイルや画像をアップロードするプラグイン「Upload Plugin 3.0」の解説記事の 3本立てのうちの「その２」です。
　
Upload Plugin 3.0の基本的な設置方法を解説した記事は下記にありますので、基本的な設置方法から理解したい場合は、下記の記事から読んでください。
CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その１
　
この記事では、基本的な設置方法を踏まえたうえで、アップロードする画像、ファイルのバリデーションや、アップロードするファイルを複数にする場合や、記事を削除したときに画像も一緒に削除する処理など、実用的な利用を想定したカスタマイズ方法を解説していきます。
CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その２
　
最後の記事では、2記事までで解説した画像を新規登録でアップロードする処理に続く処理として、記事を更新する際の処理、および、登録した画像を表示する処理について解説します。
CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その３
　
　
というわけで、ここから先は実用に即した形でカスタマイズする方法を紹介します。
　
また、サンプルのソースコードは、「CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その１」で紹介したソースコードの一部をカスタマイズする前提で書いていますので、全体のソースコードは「CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その１」を参照してください。
　
　
ちなみに、ファイルのアップロード処理は、PHP自体がサポートしていますので、プラグインを使わなくても比較的簡単に実装することができます。
　
その CakePHP3でファイルのアップロード処理を自作した際の、ソースコード付きの解説記事を下記で書いていますので合わせて参考にしてみてください。
CakePHP3でファイルのアップロード処理を自作・解説付き・その１
 CakePHP3で画像・ファイルのアップロード処理を自作・解説付き・その２
　
ファイルアップロード処理の理解のために読んでみるのもいいかもしれません。
　
　

複数のファイルをアップロードしたい！

　
先に説明した内容は、アップロードするファイルが 1つだけでしたが、複数のファイルをアップロードする処理も構築が可能です。
　
　

３．画像データを保存するカラムをテーブルに追加

　
アップロードする画像を保存するカラムを設定します。
　

mysql> show columns from topics;
+--------------------+------------+------+-----+---------+----------------+
| Field              | Type       | Null | Key | Default | Extra          |
+--------------------+------------+------+-----+---------+----------------+
    :
    :
| image1             | text       | YES  |     | NULL    |                |
| image1_path        | text       | YES  |     | NULL    |                |
| image1_type        | text       | YES  |     | NULL    |                |
| image1_size        | int(11)    | YES  |     | NULL    |                |
| image2             | text       | YES  |     | NULL    |                |
| image2_path        | text       | YES  |     | NULL    |                |
| image2_type        | text       | YES  |     | NULL    |                |
| image2_size        | int(11)    | YES  |     | NULL    |                |

mysql> show columns from topics;

+--------------------+------------+------+-----+---------+----------------+

+--------------------+------------+------+-----+---------+----------------+

| image1_size | int(11) | YES | | NULL | |

| image2_size | int(11) | YES | | NULL | |

　
「image1」「image2」のファイルに対して、それぞれ「保存フォルダのパス」「ファイルのタイプ」「ファイルのサイズ」を設定しています。
　
　
　

５．モデルクラスにプラグインを利用する処理を追記

　
モデルのクラスにファイルをアップロードする情報を追記します。
（「$this->addBehavior()」の部分のみ記載しています。）
　

        // Upload Plugin
        $this->addBehavior('Josegonzalez/Upload.Upload', [
            'image1' => [
                'fields' => [
                    'dir'  => 'image1_path',
                    'type' => 'image1_type',
                    'size' => 'image1_size',
                ]
            ],
            'image2' => [
                'fields' => [
                    'dir'  => 'image2_path',
                    'type' => 'image2_type',
                    'size' => 'image2_size',
                ]
            ],
        ]);

// Upload Plugin

$this->addBehavior('Josegonzalez/Upload.Upload', [

'image1' => [

'fields' => [

'dir' => 'image1_path',

'type' => 'image1_type',

'size' => 'image1_size',

]

'image2' => [

'fields' => [

'dir' => 'image2_path',

'type' => 'image2_type',

'size' => 'image2_size',

]

]);

　
デフォルト設定では以下の設定になっています。
　

        // Upload Plugin
        $this->addBehavior('Josegonzalez/Upload.Upload', [
            'image' => [
                'fields' => [
                    'dir'  => 'dir',
                    'type' => 'type',
                    'size' => 'size',
                ]
            ],
        ]);

// Upload Plugin

$this->addBehavior('Josegonzalez/Upload.Upload', [

'image' => [

'fields' => [

'dir' => 'dir',

'type' => 'type',

'size' => 'size',

]

]);

　
　
また、「保存フォルダのパス」「ファイルのタイプ」「ファイルのサイズ」は取得しなくていい、ということであれば、下記の様に簡潔に記述することも可能です。
　

        // Upload Plugin
        $this->addBehavior('Josegonzalez/Upload.Upload', [
            'image1' => [],
            'image2' => [],
        ]);

// Upload Plugin

$this->addBehavior('Josegonzalez/Upload.Upload', [

'image1' => [],

'image2' => [],

]);

６．フォームテンプレートにファイルアップロード処理を追記

フォームタグの inputに「type」を追記

　
わざわざ書く必要もないかとも思いますが、フォームタグの inputも「image1」「image2」とそれぞれ typeを追加します。
　

echo $this->Form->control('image1',["type"=>"file"]);
echo $this->Form->control('image2',["type"=>"file"]);

1 2	echo $this->Form->control('image1',["type"=>"file"]); echo $this->Form->control('image2',["type"=>"file"]);

　
　
これで、複数のファイルもアップロードできるようになります。
　
　

ファイルを保存する場所を指定したい！

　
アップロードしたファイルが保存される場所は、デフォルトの設定では、下記の場所になっています。
　/ webroot / files / { テーブル名 } / { フィールド名 }
　
これを変更する方法は、以下の通りです。
　
　

５．モデルクラスにプラグインを利用する処理を追記

　
モデルのクラスに「path」を追記します。
（「$this->addBehavior()」の部分のみ記載しています。）
　

        // Upload Plugin
        $this->addBehavior('Josegonzalez/Upload.Upload', [
            'image1' => [
                'path' => 'webroot{DS}upload_img{DS}{model}{DS}{field}{DS}',
            ],
            'image2' => [
                'path' => 'webroot{DS}upload_img{DS}{model}{DS}{field}{DS}',
            ],
        ]);

// Upload Plugin

$this->addBehavior('Josegonzalez/Upload.Upload', [

'image1' => [

'path' => 'webroot{DS}upload_img{DS}{model}{DS}{field}{DS}',

'image2' => [

'path' => 'webroot{DS}upload_img{DS}{model}{DS}{field}{DS}',

]);

　
　
「{DS}」は、「DIRECTORY SEPARATOR（ディレクトリーセパレーター）」のことです。
Linuxでは「/」、Windowsでは「\」のように差異があるため、OSが変わっても動作するように「{DS}」と記述します。
　
　
ちなみに、パスの指定について、CakePHP3では、ドキュメントルートなら「WWW_ROOT」というように、あらかじめパスを定数で定めているものがいくつかあります。
　
ですが、ここでパスを指定する場合、下記の様に書いてしまうと、エラーになります。
ここで指定するパスは、アプリのルートからのパスを指定する箇所であるためです。
　

                'path' => WWW_ROOT . 'upload_img{DS}{model}{DS}{field}{DS}',

1	'path' => WWW_ROOT . 'upload_img{DS}{model}{DS}{field}{DS}',

　
　
「WWW_ROOT」以外に CakePHP3で定数として設定されているファイルのパス、フォルダのパスについては下記の記事を参考にしてください。
CakePHP3でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数
 CakePHP3でDocumentRootやwebroot、imgフォルダのURLやドメイン、パスを取得
　
　

保存するファイル名を変更したい！

　
「保存するファイル名を変更したい」では、分かりにくいですが、アップロードしたファイルは、ローカルに保存されていたファイル名のまま保存されます。
　
具体的には、ローカルにある「aaa.jpg」というファイルをアップロードすると、「aaa.jpg」として保存されます。
　
このままでは、同じファイル名で、違う画像をアップロードすると、すでにアップされていたファイルが上書きされてしまう問題が発生します。
　
　
そのため、ファイル名が被らないように適切に処理をする必要があります。
　
なので、この処理は必ず設定した方がいいカスタマイズということになりますので、説明の順番としては、もっと前の方で説明するべきものかもしれません。
　
　

５．モデルクラスにプラグインを利用する処理を追記

　
モデルのクラスに「nameCallback」を追記します。
（「$this->addBehavior()」の部分のみ記載しています。）
　

        // Upload Plugin
        $this->addBehavior('Josegonzalez/Upload.Upload', [
            'image1' => [
                'nameCallback' => function ($data, $settings) {
                    return uniqid().'-'.strtolower($data['name']);
                }
            ],
            'image2' => [
                'nameCallback' => function ($data, $settings) {
                    return uniqid().'-'.strtolower($data['name']);
                }
            ],
        ]);

// Upload Plugin

$this->addBehavior('Josegonzalez/Upload.Upload', [

'image1' => [

'nameCallback' => function ($data, $settings) {

return uniqid().'-'.strtolower($data['name']);

}

'image2' => [

'nameCallback' => function ($data, $settings) {

return uniqid().'-'.strtolower($data['name']);

}

]);

記事を削除したとき、画像ファイルも一緒に削除したい！

　
デフォルトの設定では、画像を登録した記事を削除しても、自動的に画像は削除されません。
そのため、画像フォルダの中には削除された記事の画像が残り続ける、という結果になります。
　
この状況を解消するため、記事を削除した際に、関連する画像も一緒に削除するというオプションが用意されています。
このオプションを有効にする方法を解説します。
　
　

５．モデルクラスにプラグインを利用する処理を追記

　
モデルのクラスに「keepFilesOnDelete」を追記します。
（「$this->addBehavior()」の部分のみ記載しています。）
　

        // Upload Plugin
        $this->addBehavior('Josegonzalez/Upload.Upload', [
            'image1' => [
                'keepFilesOnDelete' => false
            ],
            'image2' => [
                'keepFilesOnDelete' => false
            ],
        ]);

// Upload Plugin

$this->addBehavior('Josegonzalez/Upload.Upload', [

'image1' => [

'keepFilesOnDelete' => false

'image2' => [

'keepFilesOnDelete' => false

]);

　
「keepFilesOnDelete」を追記することで、記事を削除するとファイルも一緒に削除されます。
　
　

アップロードするファイルをバリデーションをしたい！

　
アップロードするファイルは、バリデーション（入力チェック）しないとどんなファイルでもアップロードできてしまいますので、アップロードするファイルをバリデーションする機能を追加する方法を解説します。
　
　

５．モデルクラスにバリデーションの処理を追記

　
編集するファイルは「/src/Model/Table/TopicsTable.php」です。
　
　
まず、useで「Cake\Validation\Validator」を使えるように設定します。
Bakeで自動生成している場合はすでに追加されている場合もあるでしょう。
　

use Cake\Validation\Validator;

1	use Cake\Validation\Validator;

　
　
また、Bakeで自動生成している場合は、「image1」の入力に対するバリデーションの設定は以下のようになっているでしょう。
　

        $validator
            ->allowEmpty('image1');

1 2	$validator ->allowEmpty('image1');

　
　
これを下記の様に変更を行います。
　

        $validator->provider('upload', \Josegonzalez\Upload\Validation\DefaultValidation::class);

        $validator
            ->allowEmpty('image1')
            ->add('image1', 'fileBelowMaxSize', [
                'rule'     => ['isBelowMaxSize', 4000],
                'message'  => 'ファイルサイズは最大 4000byteまでです。',
                'provider' => 'upload'
            ])
            ->add('image1', 'fileAboveMinWidth', [
                'rule'     => ['isAboveMinWidth', 100],
                'message'  => '画像の横幅は 100px以上必要です。',
                'provider' => 'upload'
            ])
            ->add('image1', 'fileExtension', [
                'rule'     => ['extension', ['gif', 'jpeg', 'png', 'jpg']],
                'message'  => 'ファイル形式は、gif、jpeg、png、jpgのいずれかです。'
            ])
            ;

$validator->provider('upload', \Josegonzalez\Upload\Validation\DefaultValidation::class);

$validator

->allowEmpty('image1')

->add('image1', 'fileBelowMaxSize', [

'rule' => ['isBelowMaxSize', 4000],

'message' => 'ファイルサイズは最大 4000byteまでです。',

'provider' => 'upload'

])

->add('image1', 'fileAboveMinWidth', [

'rule' => ['isAboveMinWidth', 100],

'message' => '画像の横幅は 100px以上必要です。',

'provider' => 'upload'

])

->add('image1', 'fileExtension', [

'rule' => ['extension', ['gif', 'jpeg', 'png', 'jpg']],

'message' => 'ファイル形式は、gif、jpeg、png、jpgのいずれかです。'

])

;

　
1行目は、デフォルトでは設定されていないオプションのバリデーションルールを読み込む記述です。
　
バリデーションルールを読み込むことで、ファイルサイズや、画像の高さ、幅などのチェックを行うことができるようになります。
上記では、5行目から「isBelowMaxSize：ファイルの最大サイズ」、10行目から「isAboveMinWidth：画像ファイルの最小の横幅」を設定したサンプルです。
　
それ以外のバリデーションの詳細な解説は、公式サイトも参照してください。
http://cakephp-upload.readthedocs.io/en/latest/validation.html
　
ちなみに、5行目の「fileBelowMaxSize」、10行目の「fileAboveMinWidth」、15行目の「fileExtension」は、バリデーションの名前として設定しているものですので、自由な名称を付けてください。
　
また、15行目からはファイルの拡張子をチェックする処理の設定を記述しています。
　
拡張子のバリデーションの詳細については、下記を参照してください。
https://api.cakephp.org/3.2/class-Cake.Validation.Validation.html#_extension
　
　
また、サンプルには記述していませんが、下記を参考にすることで、「mimeType」でバリデーションを行うことも可能になります。
　
CakePHP3 Book　条件付バリデーション
https://book.cakephp.org/3.0/ja/core-libraries/validation.html#id9
　
　

画像をアップロードしたときにサムネイルも作りたい！

　
アップロードした画像のサムネイルを作成する方法は、下記の記事の「Advanced example」にサンプルソースがありますので、これを参考にすることで、画像をアップロードしつつサムネイルの画像も生成することが可能になります。
　
http://cakephp-upload.readthedocs.io/en/latest/examples.html#advanced-example
　
　
ちなみに、CakePHP2の頃は、下記のような形で記述方法でサムネイルの設定を行うことができたようです。
ですが、CakePHP3では動作しませんでした。
（現在調査中ですが、分かり次第情報を更新します。）
　
　

５．モデルクラスにプラグインを利用する処理を追記

　
モデルのクラスに「keepFilesOnDelete」を追記します。
（「$this->addBehavior()」の部分のみ記載しています。）
　

        // Upload Plugin
        $this->addBehavior('Josegonzalez/Upload.Upload', [
            'image1' => [
                'thumbnails' => true,
                'thumbnailMethod' => 'imagick',
                'thumbnailPath' => 'webroot{DS}upload_img_thumbnail{DS}{model}{DS}{field}{DS}',
                'thumbnailSizes' => [
                    'thumb150' => '150x150',
                    'normal' => '200x200',
                    'big' => '300x300'
                ],
                'thumbnailName' => '{size}_{filename}',

            ],
        ]);

// Upload Plugin

$this->addBehavior('Josegonzalez/Upload.Upload', [

'image1' => [

'thumbnails' => true,

'thumbnailMethod' => 'imagick',

'thumbnailPath' => 'webroot{DS}upload_img_thumbnail{DS}{model}{DS}{field}{DS}',

'thumbnailSizes' => [

'thumb150' => '150x150',

'normal' => '200x200',

'big' => '300x300'

'thumbnailName' => '{size}_{filename}',

]);

　
　
「thumbnails」は、サムネイルを生成するか、否かを指定するものです。
設定値は、「true」「false」で、デフォルト値は「false」です。
「true」を指定すると、サムネイルを生成します。
　
「thumbnailMethod」は、サムネイルを生成するメソッドを指定します。
設定値は、「imagick」「php」で、デフォルト値は「imagick」です。
「imagick」を指定すると「Imagine」を使用し、「php」を指定すると「PHP GD」を使用します。
　
「Imagine」がインストールされていない環境の場合は、まず先にインストールしてください。
https://github.com/burzum/cakephp-imagine-plugin
　
「thumbnailPath」は、サムネイルを保存するフォルダを指定します。
設定値は、「null」、もしくは、具体的なパスの指定です。デフォルト値は「null」です。
「null」を指定した場合は、オリジナルのファイルが保存される場所と同じフォルダに保存されます。
　
「thumbnailSizes」は、生成するサムネイルのサイズを指定します。
配列で指定することで、複数のサイズのサムネイルを生成することができます。
　
「thumbnailName」は、生成するサムネイルのファイル名称を指定します。
　
　

- CakePHP 3.x 4.x CakePHP3

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。

CakePHP3でajaxを利用する処理の実装方法を解説。プルダウンを変更するとデータベースの値を取得し検索結果の内容を変更するというような処理を想定。CakePHP3.6以降の CSRF対策対応済。

: CakePHP4のCSS、JavaScript、画像のブラウザへのキャッシュをコントロールする

CakePHP4、CakePHP3でブラウザにキャッシュさせる設定の解説。CSS、JavaScript、画像をブラウザにキャッシュさせるのか、定期的にリロードする設定にするのかの設定が可能。

: CakePHP3で他のテーブルのマスタテーブルからセレクトボックス（プルダウンリスト）を作る

他のテーブルのマスタのレコードからプルダウンリストを作成し、選択できるようにするサンプルプログラムと解説。ORMの設定によりデータベースの値を取得し、配列を作成し optionsに与える。

: CakePHP4の数値項目は「like %10%」の部分一致検索（find select）はできない

CakePHP4でテーブルの数値項目に対してlike句を使用した部分一致検索を実行するとエラーが発生する。クリエービルダーの不具合だと思われ対処方法が分からない。

: CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その３

CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその3で記事を更新する際のファイルの取り回しなどについてを解説。