エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

      2019/03/28

CakePHP3の更新画面でファイルアップロードプラグイン Upload Plugin 3.0を使う方法

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

ファイルアップロードプラグイン Upload Plugin 3.0の更新画面での処理

 
これまで、その1、その2では、ファイルアップロードプラグイン Upload Plugin 3.0の基本的な使い方、カスタマイズの方法について解説しました。
 
それらの記事は、あくまでも記事を追加する画面での処理でした。
ただファイルがアップロードします、という処理でした。
 
 
ですが、今回は、記事を更新する画面での処理です。
 
記事を更新する画面では、すでに登録されている画像を確認する処理や、画像だけ削除する処理や、記事と一緒に画像も更新する処理など、多様な処理が必要となります。
 
この記事では、それらの処理について解説をしていきます。
 
 
また、更新の処理は、下記のページの記事をベースに処理を Upload Plugin 3に対応する処理に変更をしています。
CakePHP3で画像・ファイルのアップロード処理を自作・解説付き・その2
 
 

テンプレートファイル edit.ctpの変更

 
更新の処理のテンプレート「edit.ctp」は下記の様に追記をします。
 

 
元々ある「echo $this->Form->control('image1');」の前に、1行目~10行目を追記します。
 
追記する内容は、画像がアップロードされている場合、その画像を表示する処理です。
アップロードするファイルが、PDFファイルなどの画像ではない場合は、ファイル名を表示し、とリンクの設定をする処理に変更するといいでしょう。
 
1行目で「image1_path」の有無をチェックすることで、ファイルがアップロードされているか否かをチェックします。
「image1」のファイル名が保存される項目は、一度ファイル名が保存されると、それを消すことができないため(私が消す方法を見つけることができなかったため)、「image1」の項目ではファイルの有無の正確なチェックができないと判断しました。
 
2行目の「str_replace('¥¥','/',$topic->image1_path)」は、Windows環境(XAMPP環境)の場合の処理で、ファイルのパスが「¥」が編集されるため、それを「/」に変換するための処理です。
Linux環境の場合は「$topic->image1_path」だけで問題ありません。
 
3行目、5行目の「image1_before」「image1_path_before」は、画面を表示する時点での画像のファイル名とパスを hiddenで編集します。
 
Formヘルパーについては「CakePHP3のForm Helperの使い方のまとめ」に記事を書いていますので、そちらも参考にしてください。
 
 
このテンプレートファイルを使って、トピックスを更新する画面を表示すると、画像がある場合は、下記の様に画像が編集され、「delete」のボタンが表示されます。

 
ファイルを削除する場合は、「delete」ボタンをクリックすると画像だけを削除する、という処理につなげます。
 
画像のサイズや、ボタンの並びなどは CSSなどで調整をしてください。
 
 

コントローラーファイル TopicsController.phpの変更

 
続いて、コントローラーファイルを更新します。
 
 

必要なクラスをロードする処理

 
まず最初に、ファイルを削除する処理と例外処理で必要となるクラスを use句で設定をします。
 

 
Folder、Fileクラスに関しては下記が参考になります。
 https://book.cakephp.org/3.0/ja/core-libraries/file-folder.html
 
「RuntimeException」クラスに関しては下記が参考になります。
 http://waterada.ldblog.jp/archives/20000008.html
 
 

ファイルアップロードの処理の追記

 
続いて、更新処理「edit」アクションの処理として下記の 9行目~67行目、72行目~78行目の処理を追記します。
 

 
 
処理は、画像1、画像2の 2つの画像をアップロードする処理を想定したコントローラーにしていますので、やや長いですが、画像1だけであればその分短くなります。
 
10行目が、画像1の「delete」ボタンがクリックされた場合の処理です。(28行目が、画像2の「delete」ボタンがクリックされた場合の処理です。)
 
12行目で画像のパス、13行目で画像のファイル名を取得し、15行目でファイルの削除処理を実行しています。
16行目~19行目は、削除処理を実行することに関連し、データベースの項目をクリアするために null、0を編集しています。
また、16行目で「$topic['image1'] = '';」として「image1」に nullを代入していますが、テーブルの値がクリアされることはありません。(なぜクリアされないかは調査中です。)
 
47行目からは、「delete」ボタンではなく、記事を更新する「submit」ボタンがクリックされた場合の処理です。
 
51行目は、新しいファイルが入力された場合、かつ、その前にファイルが登録されている状態であった場合は、古いファイルを削除する必要がありますので、その判定をしています。
ここでのファイルの削除処理は、処理エラーになってもエラーメッセージは出さない処理になっています。
理由は、古いファイルが消えなくても処理の流れには大きな影響がない、と判断しているためです。
 
最後が 73行目からの処理で、ここでは「delete」ボタンがクリックされた場合は、更新画面に戻る処理をしています。
 
 

ファイルアップロードの処理・CakePHP 3.4以降対応・2019.03.27追記

 
フォームなどから送信されてくる値(POSTや GETで送信される値)を取得方法が、CakePHP 3.4で新しい記述方法が追加されました。
それに伴い、CakePHP 3.4より前の記述方法は非推奨となり、CakePHP 3.7からは「Deprecated」のメッセージが表示されるようになりました。
 
Deprecated (16384): Accessing data as a property will be removed in 4.0.0. Use getData() instead. - /var/html/public_html/src/Controller/TestsController.php, line: 50
 
 
そのため、前項に記載していたサンプルプログラムを CakePHP 3.7で使用すると、大量の「Deprecated」が表示されるため、CakePHP 3.7でも対応できるソースを下記の通り作成しました。
 

 
 
基本的な処理内容に変更はありません。
 
変更した点は、「$this->request->data()」で取得していた箇所で、これを「$this->request->getData()」に置き換えています。

 
また、「$this->request->data['image1_delete']」の記述方法では、キーが存在しない場合にエラーが発生するため、「isset()」を用いて確認をする必要がありましたが、「$this->request->data()」「$this->request->getData()」では、キーがない場合でもエラーとならないため、「isset()」が必要なくなります。(逆に、「isset()」を使うとエラーとなります。)

 
さらに、「$this->request->data['image1']['name']」の表記は下記のように変更しています。

 
 

ファイルアップロードプラグイン Upload Plugin 3.0の表示側での処理

 
ファイルアップロードプラグイン Upload Plugin 3.0に関連する最後のコーナーですが、最後は、登録したファイルを表示する処理です。
 
すでに、更新画面で表示する処理を書いてしまっていますので、改めて説明する必要はないかもしれませんが、解説の項目としては必要であろう、ということで記載します。
 
 

アップロードしたファイルを表示する処理

 
アップロードしたファイルを表示する処理です。
templateファイルに記述するコードは以下の通りです。
 

 
「image1」は、画像を表示することに加え、画像へリンクを貼る処理が加えられています。
「image2」は、画像を表示するだけの処理です。
 
「image1」の方で大事なポイントは、「'escape'=>false」を指定しているところです。
この設定がないと画像が表示されず、imgタグのソースコードが表示されます。
 
また、先にも書きましたが、「str_replace("¥¥","/",$topic->image1_path)」は、Windows環境(XAMPP環境)の場合の処理で、ファイルのパスが「¥」が編集されるため、それを「/」に変換するための処理です。
Linux環境の場合は「$topic->image1_path」だけで問題ありません。
 
 

ファイルアップロードプラグイン Upload Plugin 3.0のまとめ

 
ファイルアップロードプラグインである Upload Plugin 3.0をインストールから、基本的な使い方、実用的なカスタマイズ方法、そして、この記事で更新する場合の処理について解説をしてきました。
CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その1
CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その2
CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その3
 
 
以前は、ファイルアップロード処理自体も自作をしたこともありまして、それについての記事は下記に書いています。
CakePHP3でファイルのアップロード処理を自作・解説付き・その1
CakePHP3で画像・ファイルのアップロード処理を自作・解説付き・その2
 
ファイルのアップロード処理に関して、自作した処理とプラグインを使う処理とで比較した場合、ファイルをアップロードする処理自体は、プラグインを利用すると簡単に処理を構築することができました。
ですが、更新画面の処理に関しては、特に処理が用意されていませんので、プラグインを利用するメリットがあまり感じられない状況でした。
この更新の際の処理こそがプラグインを使るメリットなんじゃないかとも思うくらいなので、そこは結局自分で考えないといけないところが残念でした。
 
逆に言うと、更新の処理は多様な考え方がありますので、そこはプラグインに頼らず、実装したい処理を自分で実装できるようになっている、ととらえるべきなのかもしれません。
 
 

CakePHP3の関連記事

CakePHP4のCSS、JavaScript、画像のブラウザへのキャッシュをコントロールする
CakePHP3でレコードを保存(追加、更新、Insert、Update)する複数の方法を紹介
CakePHP3でモデルなしフォームからCSVをアップロードしレコードを更新する方法解説
CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングする方法
CakePHP3のInsert On Duplicate Key Update(upsert)構文を解説・バルク処理も
CakePHP3の1対多での連携を中間テーブルを使った多対多の連携に変更するときの手順
CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法
CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。
CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説
CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 3.x 4.x

GoogleAdwords

GoogleAdwords

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

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

  関連記事

CakePHP 2.3 コマンドラインからPHPのシェル実行の方法解説

CakePHP 2.3でコマンドラインから CakePHPで記述した処理を実行する方法を解説します。

CakePHP 2.3でファイルのアップロード処理を作る

CakePHPでプラグインを使わないファイルアップロード処理を解説します。簡単です。DBにファイルを格納する方法も。

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

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

CakePHP3でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数
CakePHP3でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数

CakePHP3で特定フォルダのパスの定数を解説。root、DocumentRoot、app、config、webroot、tests、tmp、cache、vendor、コア、コアの srcが設定済み。realpath()関数を使うと柔軟なパス指定が可能。

CakePHP3のfriendsofcake/searchでツリーカテゴリーの子階層も含めて検索する方法
CakePHP3のfriendsofcake/searchでツリーカテゴリーの子階層も含めて検索する方法

CakePHP3のツリービヘイビアを使ったツリーカテゴリーの子階層も含めての検索を検索プラグイン「friendsofcake/search」を使って実現する方法を解説しました。

CakePHP3のデバッグキット(DebugKit)を強制的に有効、無効に変更する方法
CakePHP3のデバッグキット(DebugKit)を強制的に有効、無効に変更する方法

CakePHP3に付属しているデバッグのためのツール、デバッグキットを強制的に有効化、無効化する方法を解説。初期設定では開発環境としてありそうなドメインの場合のみ有効になるように設定されている。

CakePHP3でモデルなしフォームからCSVをアップロードしレコードを更新する方法解説
CakePHP3でモデルなしフォームからCSVをアップロードしレコードを更新する方法解説

CakePHP3でCSVファイルをアップロードしレコードを追加、更新する処理の作成方法の解説。モデルとは直接関連しないフォームからCSVファイルをアップロードするため汎用的に使用可能。

CakePHP3のメール送信の処理・テンプレート使用・添付ファイル送信も解説
CakePHP3のメール送信の処理・テンプレート使用・添付ファイル送信も解説

CakePHP3からメールを送信する方法解説。基本的な記述方法を基にして、テンプレートを使う方法、ファイルを添付する方法へと拡張しながら解説。

CakePHPのFlashエラーは出るが入力項目ごとのメッセージが出ないエラーの原因
CakePHPのFlashエラーは出るが入力項目ごとのメッセージが出ないエラーの原因

Bakeして自動生成した入力フォーム処理を元に少し処理を追加したら、入力エラーがあってもエラーメッセージが表示されなくなった。原因はリダイレクトの処理にあった。

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

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