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 5.x CakePHP3

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

Message コメントをキャンセル

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

: CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その１

CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその1で基本的な導入方法の解説で読みながら簡単に導入が可能。

: CakePHP 2.3　Search Pluginで検索処理　その６ORDER、sortソートの機能

CakePHPの検索プラグイン Search Pluginの検索処理の中で order、ソートについての解説です。

: CakePHP5系で認証機能のAuthenticationプラグインをインストール・エラー発生注意

CakePHPのユーザ認証に使用するオフィシャルなプラグインAuthenticationだが、CakePHP5系では Authentication Ver.3系を使う必要があるが、公式ChiffonBookが間違えている。

: CakePHP3のアソシエーションでJOINのタイプのLEFT、INNERを切り替えながら使う方法

CakePHP3でテーブルのアソシエーションしたデータの取得をコントローラー側でINNERかLEFTを指定する方法を解説。TableファイルにINNERで指定していてもController側で変更ができる。

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

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

: CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法

CakePHP3でデフォルトのソート条件を設定しつつ画面上でユーザがソート条件を選択したときもソート処理を実行させる方法を解説。ソート条件はページネーションの処理として実装。

: CakePHP3で保存前にバリデーション結果を取得する2つの方法

CakePHP3でデータベースに値を保存する前にバリデーションを行い、その結果によって処理を振り分ける方法について解説。「$topic->errors()」と「$topic->hasErrors()」の2つの方法がある。

: CakePHP 2.x系　Viewでのコメントの記述方法など

CakePHPにおいて View、ctpファイルでコメントを記述する方法を解説。

: CakePHP4のCakeDC/Usersの Usersへの接続、バリデーションのカスタマイズ方法解説

CakeDC謹製Usersプラグインの紹介。CakePHP4で使う場合のUsersのカスタマイズとして入力項目のバリデーションの変更を、プラグインのファイルは触らずオーバーライドにより実装する方法を解説する。

: CakePHP2の検索Plugin CakeDC/Searchで重複を省くgroup by（distinct）の実装方法

CakePHP2の検索プラグイン「CakeDC/Search」で、重複レコードを省くgroup by、distinctを使う方法についての解説。設定する場所はpaginatorの条件とするので、find()関数と同じ。

PREV: CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その１
NEXT: CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その３

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CakePHP3の関連記事

GoogleAdwords

GoogleAdwords

Message コメントをキャンセル

関連記事

CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その１

CakePHP 2.3　Search Pluginで検索処理　その６ORDER、sortソートの機能

CakePHP5系で認証機能のAuthenticationプラグインをインストール・エラー発生注意

CakePHP3のアソシエーションでJOINのタイプのLEFT、INNERを切り替えながら使う方法

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

CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法

CakePHP3で保存前にバリデーション結果を取得する2つの方法

CakePHP 2.x系　Viewでのコメントの記述方法など

CakePHP4のCakeDC/Usersの Usersへの接続、バリデーションのカスタマイズ方法解説

CakePHP2の検索Plugin CakeDC/Searchで重複を省くgroup by（distinct）の実装方法

WordPress投稿にPHPを記述するショートコードの使い方add_shortcode

コピーコンテンツ対策.htaccessで直リンク禁止しリダイレクトで対応

評価点投票プラグイン10個を比較！WordPressで口コミサイトを構築

BackWPupでバックアップ・リストア（復元）の具体的手順

コンパクトキーボード・KEK-EA9AU・FKB1420の魅力