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 コメントをキャンセル

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

: CakePHP 2.3　bakeの超初心者向けフォロー講座

CakePHP 2.3　bakeの超初心者向けフォロー講座

: 国際化と地域化の翻訳機能「__()」を使って定数に変数を埋め込む方法

CakePHP4で定数に変数を埋め込み、翻訳機能「__()」で変数に値を入れる方法を紹介。定型の文章の一部だけを置換したい場合に利用すると便利。

: CakePHP3でQRコードを作成、表示するライブラリ「cakePHP-QR-Code-Helper」

CakePHPでQRコードを生成するライブラリ「cakePHP-QR-Code-Helper」の紹介。GDライブラリのインストールも必要ないHelperとして提供されているため、ファイルを設置すればすぐに使用可能。

: CakePHP3で画像・ファイルのアップロード処理を自作・解説付き・その２

ファイルのアップロード機能の自作サンプルコードとその解説のその２。アップロード機能に関連するファイルの更新や削除の処理や画像、フォルダのパスの指定方法などを含めて解説。

: CakePHP3のインストールでURL rewriting……のエラーが！その解決方法解説

CakePHP3をインストールしたら URL rewriting is not properly configured.のエラーが。原因は.htaccessが有効になっていないこと。httpd.confに設定を追加すればOK。

: CakePHP3のCakeDC/UsersのUserHelperでログアウトやreCAPTCHAをカスタマイズ

CakeDC謹製Usersプラグインの紹介。UserHelperを利用し、ログアウトのリンクや権限があるときのみ表示されるリンク、プロフィールページへのリンク、reCAPTCHAの設置方法などを解説。

: CakePHP3のfriendsofcake/searchでブックマークチュートリアルのタグ検索を実装

CakePHP3のCookbookにあるブックマークチュートリアル。ここで紹介されているタグで検索する処理を検索プラグイン「friendsofcake/search」で実現する方法を解説しました。

: CakePHP3のルーティング（routes.php）の変更が反映されない時はキャッシュのクリアを

CakePHP3でルーティングの設定変更をしたけど反映されない！そんなときは慌てず騒がずキャッシュをクリアしよう！ルーティングの設定もキャッシュされることがあるらしい。

: CakePHP 2.3　デバッグキット（DebugKit）超初心者向けフォロー講座

CakePHP初心者に向けてデバッグキット（DebugKit）のインストール方法、はまりポイントを解説。

: CakePHP3のユーザ管理・ログイン認証プラグインCakeDC/Usersのインストール解説・3.6以降対応

CakePHP3のユーザ管理プラグイン Usersは、ユーザ登録、メール認証、ログイン認証、ユーザ管理、権限管理、reCAPTCHAなど会員制のサイトを簡単に実現可能。その導入方法、カスタマイズ方法を解説。