今日のYWT

やったこと

Travelog

編集時のエラーの原因を探る

やりたいこと

画像と紐付いた記事を編集時、画像が保持されるようにする

編集ページで送信が押されupdateアクションが発火した時
- 新しい画像が追加されていれば、その画像のみ新たに登録しArticleと紐付ける
- 新しい画像が追加されているかどうかの判定が必要
- 既存の画像が削除されていれば、その画像をphotoテーブルから削除する
- 画像に変更がなければ、画像テーブルには変更を加えない

現状

editページに紐付いた画像情報を持ってこれていない
また、updateアクションで画像を保存する処理がない

困っていること

updateアクション時の画像の処理
- 新しい画像が追加されている時には、画像の登録処理が走ってほしい
- そのためには上で書いた通り、新しい画像が追加されているかどうかの判定が必要だがその方法が分からない
- 画像に変更がなければ、画像テーブルには変更を加えないでほしい
- 画像テーブルに変更は加えないが、Articleの$fillableを通過するためには？
  - hidden_fieldで渡す？

わかったこと

ArticleControllerのEditアクションに articlePhotosという変数を作ってviewに渡し、それを使えば既存の画像情報は持ってこれそう？

ArticleController.php

    public function edit(Article $article)
    {
        $tagNames = $article->tags->map(function ($tag) {
            return ['text' => $tag->name];
        });
        $allTagNames = Tag::all()->map(function ($tag) {
            return ['text' => $tag->name];
        });
        $articlePhotos = $article->photos;
        return view('articles.edit', [
            'article' => $article,
            'tagNames' => $tagNames,
            'allTagNames' => $allTagNames,
            'photos' => $articlePhotos
        ]);
    }

edit.blade.php

@csrf
<div class="md-form">
  <label>タイトル</label>
  <input type="text" name="title" class="form-control" required value="{{ $article->title ?? old('title') }}">
</div>
<div class="form-group">
  <article-tags-input
    :initial-tags='@json($tagNames ?? [])'
    :autocomplete-items='@json($allTagNames ?? [])'
  >
  </article-tags-input>
</div>
<div class="form-label">
開始日
</div>
<div class="md-form">
  <input type="date" name="start_date" class="form-control" required value="{{ $article->start_date ?? old('start_date') }}">
</div>
<div class="form-label">
終了日
</div>
<div class="md-form">
  <input type="date" name="end_date" class="form-control" required value="{{ $article->end_date ?? old('end_date') }}">
</div>
<div class="form-file">
    <label for="photo">画像ファイル（複数可）:</label>
      @if ($article)
        <?php dd($photos) ?>
        <input type="hidden" name="files[][photo]" value="$photos">
      @endif
    <input type="file" class="form-control" name="files[][photo]" multiple>
</div>
<div class="form-group">
  <label></label>
  <textarea name="content" required class="form-control" rows="16" placeholder="本文">{{ $article->content ?? old('content') }}</textarea>
</div>

edit.blade.phpに、画像情報をこのように渡してみたが、以下のバリデーションエラーで弾かれた。

files.0.photoには画像ファイルを指定してください。
files.0.photoにはjpeg, bmp, pngタイプのファイルを指定してください。
files.1.photoには画像ファイルを指定してください。
files.1.photoにはjpeg, bmp, pngタイプのファイルを指定してください。

また、ddの結果は以下の通り。

次やること

この不具合を解決する
- ための材料を集める
また、ここを解決する前にドラッグ＆ドロップでの画像アップロード実装をしたほうが良いかも？

じろう

学習履歴詳細

[Laravel]記事に紐付いた画像の編集・更新で詰まる。原因を探る、やれることを探る