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

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で画像・ファイルのアップロード処理を自作・解説付き・その２
　
ファイルアップロード処理の理解のために読んでみるのもいいかもしれません。
　
　

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

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

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

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

if($topic->image1_path){
    echo $this->Html->image('/'.str_replace('\\','/',$topic->image1_path).$topic->image1);
    echo $this->Form->control('image1_before',['type'=>'hidden',
                                               'value'=>$topic->image1]);
    echo $this->Form->control('image1_path_before',['type'=>'hidden',
                                                    'value'=>$topic->image1_path]);
    echo $this->Form->control('delete',['type'=>'submit',
                                        'name'=>'image1_delete',
                                        'value'=>'delete']);
}
//  ↓このファイル登録の前に↑これを追加
echo $this->Form->control('image1',["type"=>"file","label"=>"画像1"]);

　
元々ある「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句で設定をします。
　

use Cake\Filesystem\Folder;
use Cake\Filesystem\File;
use RuntimeException;

　
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行目の処理を追記します。
　

    public function edit($id = null)
    {
        $topic = $this->Topics->get($id, [
            'contain' => []
        ]);
        if ($this->request->is(['patch', 'post', 'put'])) {
            $topic = $this->Topics->patchEntity($topic, $this->request->getData());

            // deleteボタンがクリックされたとき
            if(isset($this->request->data['image1_delete'])){
                try {
                    $dir = realpath(ROOT ."/". $this->request->data['image1_path_before']);
                    $del_file = new File($dir ."/". $this->request->data['image1_before']);
                    // ファイル削除処理実行
                    if($del_file->delete()) {
                        $topic['image1'] = '';
                        $topic['image1_path'] = '';
                        $topic['image1_type'] = '';
                        $topic['image1_size'] = 0;
                    } else {
                        $topic['image1'] = $this->request->data['image1_before'];
                        throw new RuntimeException('ファイルの削除ができませんでした.');
                    }
                } catch (RuntimeException $e){
                    $this->Flash->error(__($e->getMessage()));
                }

            } elseif(isset($this->request->data['image2_delete'])){
                try {
                    $dir = realpath(ROOT ."/". $this->request->data['image2_path_before']);
                    $del_file = new File($dir ."/". $this->request->data['image2_before']);
                    // ファイル削除処理実行
                    if($del_file->delete()) {
                        $topic['image2'] = '';
                        $topic['image2_path'] = '';
                        $topic['image2_type'] = '';
                        $topic['image2_size'] = 0;
                    } else {
                        $topic['image2'] = $this->request->data['image2_before'];
                        throw new RuntimeException('ファイルの削除ができませんでした.');
                    }
                } catch (RuntimeException $e){
                    $this->Flash->error(__($e->getMessage()));
                }

            } else {
                    // 更新処理が実行されたとき
                    // 新しいファイルが入力されたとき
                    if (isset($this->request->data['image1']['name']) && $this->request->data['image1']['name']){
                        // 古いファイルがあるとき
                        if (isset($this->request->data['image1_path_before'])){
                            $dir = realpath(ROOT ."/". $this->request->data['image1_path_before']);
                            $del_file = new File($dir ."/". $this->request->data['image1_before']);
                            // ファイル削除処理実行
                            $del_file->delete();
                        }
                    }
                    if (isset($this->request->data['image2']['name']) && $this->request->data['image2']['name']){
                        // 古いファイルがあるとき
                        if (isset($this->request->data['image2_path_before'])){
                            $dir = realpath(ROOT ."/". $this->request->data['image2_path_before']);
                            $del_file = new File($dir ."/". $this->request->data['image2_before']);
                            // ファイル削除処理実行
                            $del_file->delete();
                        }
                    }
            }

            if ($this->Topics->save($topic)) {
                $this->Flash->success(__('The topic has been saved.'));

                // deleteボタンがクリックされたとき
                if(isset($this->request->data['image1_delete']) || isset($this->request->data['image2_delete'])){
                    $this->set(compact('topic'));
                    return $this->redirect(['action' => 'edit', $id]);
                } else {
                    return $this->redirect(['action' => 'index']);
                }
//              return $this->redirect(['action' => 'index']);
            }
            $this->Flash->error(__('The topic could not be saved. Please, try again.'));
        }
        $this->set(compact('topic'));
        $this->set('_serialize', ['topic']);
    }

　
　
処理は、画像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でも対応できるソースを下記の通り作成しました。
　

    public function edit($id = null)
    {
        $topic = $this->Topics->get($id, [
            'contain' => []
        ]);
        if ($this->request->is(['patch', 'post', 'put'])) {
            $topic = $this->Topics->patchEntity($topic, $this->request->getData());

            // deleteボタンがクリックされたとき
            if($this->request->getData('image1_delete')){
                try {
                    $dir = realpath(ROOT ."/". $this->request->getData('image1_path_before'));
                    $del_file = new File($dir ."/". $this->request->getData('image1_before'));
                    // ファイル削除処理実行
                    if($del_file->delete()) {
                        $topic['image1'] = '';
                        $topic['image1_path'] = '';
                        $topic['image1_type'] = '';
                        $topic['image1_size'] = 0;
                    } else {
                        $topic['image1'] = $this->request->getData('image1_before');
                        throw new RuntimeException('ファイルの削除ができませんでした.');
                    }
                } catch (RuntimeException $e){
                    $this->Flash->error(__($e->getMessage()));
                }

            } elseif($this->request->getData('image2_delete')){
                try {
                    $dir = realpath(ROOT ."/". $this->request->getData('image2_path_before'));
                    $del_file = new File($dir ."/". $this->request->getData('image2_before'));
                    // ファイル削除処理実行
                    if($del_file->delete()) {
                        $topic['image2'] = '';
                        $topic['image2_path'] = '';
                        $topic['image2_type'] = '';
                        $topic['image2_size'] = 0;
                    } else {
                        $topic['image2'] = $this->request->getData('image2_before');
                        throw new RuntimeException('ファイルの削除ができませんでした.');
                    }
                } catch (RuntimeException $e){
                    $this->Flash->error(__($e->getMessage()));
                }

            } else {
                    // 更新処理が実行されたとき
                    // 新しいファイルが入力されたとき
                    if ($this->request->getData('image1.name')){
                        // 古いファイルがあるとき
                        if ($this->request->getData('image1_path_before')){
                            $dir = realpath(ROOT ."/". $this->request->getData('image1_path_before'));
                            $del_file = new File($dir ."/". $this->request->getData('image1_before'));
                            // ファイル削除処理実行
                            $del_file->delete();
                        }
                    }
                    if ($this->request->getData('image2.name')){
                        // 古いファイルがあるとき
                        if ($this->request->getData('image2_path_before')){
                            $dir = realpath(ROOT ."/". $this->request->getData('image2_path_before'));
                            $del_file = new File($dir ."/". $this->request->getData('image2_before'));
                            // ファイル削除処理実行
                            $del_file->delete();
                        }
                    }
            }

            if ($this->Topics->save($topic)) {
                $this->Flash->success(__('The topic has been saved.'));

                // deleteボタンがクリックされたとき
                if($this->request->getData('image1_delete') || $this->request->getData('image2_delete')){
                    $this->set(compact('topic'));
                    return $this->redirect(['action' => 'edit', $id]);
                } else {
                    return $this->redirect(['action' => 'index']);
                }
//              return $this->redirect(['action' => 'index']);
            }
            $this->Flash->error(__('The topic could not be saved. Please, try again.'));
        }
        $this->set(compact('topic'));
    }

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

// CakePHP 3.4より前
$this->request->data()

// CakePHP 3.4以降
$this->request->getData()

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

// $this->request->data[] を使う場合
if(isset($this->request->data['image1_delete'])){

// $this->request->data() を使う場合
if($this->request->data('image1_delete')){

// $this->request->getData() を使う場合
if($this->request->getData('image1_delete')){

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

// $this->request->data[] を使う場合
$this->request->data['image1']['name']

// $this->request->getData() を使う場合
$this->request->getData('image1.name')

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

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

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

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

<?= $this->Html->link($this->Html->image("/".str_replace("\\","/",$topic->image1_path).$topic->image1),"/".str_replace("\\","/",$topic->image1_path).$topic->image1,['escape'=>false,'target'=>'_blank']) ?>

<?= $this->Html->image("/".str_replace("\\","/",$topic->image2_path).$topic->image2) ?>

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

CakePHP3の関連記事