UploadedFile、画像ファイルアップロードでnullが指定されてしまう

Question

画像ファイルをアップロードしたいです。

Laravel7にてフリマアプリ作成中です。
商品の画像をアップロードしたいのですが、以下のようなエラーが発生しました。
saveImage()メソッドでnullが指定されてコントローラーで呼び出されてしまっている(?)のかと思いますが、なぜnullになるのかわかりません。

発生している問題・エラーメッセージ

Argument 1 passed to App\Http\Controllers\SellController::saveImage() must be an instance of Illuminate\Http\UploadedFile, null given, called in /work/backend/app/Http/Controllers/SellController.php on line 40

該当のソースコード

public function store(SellRequest $request, Item $item)
{
    $user = Auth::user();
    $imageName = $this->saveImage($request->file('item-image'));
    $item->image_file_name = $imageName;
    ~略
    $item->save();
    
    return redirect()->back()
       ->with('status', '商品情報を変更しました。');
}

private function saveImage(UploadedFile $file): string
{
      $tempPath = $this->makeTempPath();
      Image::make($file)->fit(250, 150)->save($tempPath);

      $filePath = Storage::disk('public')
	->putFile('item-images', new File($tempPath));
      return basename($filePath);
}

<form method="POST" action="{{ route('sell') }}" class="p-2" enctype="multipart/form-data">
@csrf

   {{-- 商品画像 --}}
   <div>商品画像</div>
   <div class="d-none d-md-block">
       <span class="item-image-form image-picker">
           <input type="file" name="item-image" class="d-none" accept="image/png,image/jpeg,image/gif" id="item-image" />
           <label for="item-image" class="d-inline-block" role="button">
               <img src="/images/item-image-default.png" style="object-fit: cover; width: 300px; height: 300px;">
           </label>
       </span>
    </div>
    <div class="d-md-none">
        <span class="item-image-form image-picker">
           <input type="file" name="item-image" class="d-none" accept="image/png,image/jpeg,image/gif" id="item-image" />
           <label for="item-image" class="d-inline-block" role="button">
              <img src="/images/item-image-default.png" style="object-fit: cover; width: 100%; height: 20%;">
           </label>
         </span>
     </div>
    <div class="form-group mb-0 mt-3 w-50 offset-3">
        <button type="submit" class="btn btn-block btn-primary">
            出品する
        </button>
    </div>
</from>

Route::post('sell', 'SellController@store')->name('sell');

public function rules()
    {
        return [
            'item-image'  => ['file', 'image'],
            'name'        => ['required', 'string', 'max:255'],
            'description' => ['required', 'string', 'max:2000'],
            'category'    => ['required', 'integer'],
            'condition'   => ['required', 'integer'],
            'price'       => ['required', 'integer', 'min:100', 'max:9999999'],
        ];
    }

補足情報（FW/ツールのバージョンなど）

laravel7

ここにより詳細な情報を記載してください。

Comments

[Lulucom]

</form> が </from> になってしまっていますが、そこは関係無さそうですか？
あと、送信ボタンも無い気がするのですが・・・

[iwatadaigo]

それはこちらでの記述ミスですね、実際のコードでは間違ってないです。
送信ボタンも省略してます、必要でしょうか？

[Lulucom]

掲載するコードも違う気がします。
ルートのアクションが 'SellController@store' になっていますので、updateメソッドではなく、storeメソッドのコードを掲載すべきではないでしょうか。

[Lulucom]

> 送信ボタンも省略してます、必要でしょうか？
載せた方が良いと思います。もしかしたらJSからsubmitしているのかな、そのJSのsubmit方法がまずいのではないかな、と考えてしまう可能性があるからです。

[iwatadaigo]

掲載するコードはメソッド名の記述ミスでした。
送信ボタンも掲載しました。

[Lulucom]

ありがとうございます。SellRequest のコードも掲載されると良いかなと思います。

[iwatadaigo]

SellRequest掲載しました

[Lulucom]

ありがとうございます。
ファイル未指定で「出品する」ボタンを押すとそのエラーになってしまいそうですが、
ファイル指定時でもそのエラーになってしまう、ということでしょうか。

[iwatadaigo]

はい、そうです。

[Lulucom]

ファイルサイズが大きすぎてアップロードに失敗しているということはないでしょうか。
サイズが小さいファイルで試しても同じでしょうか。

[iwatadaigo]

3KBのファイルでも同じでした。

[Lulucom]

デバッグのため、storeメソッドの最初で以下のような感じのコードを書くと、何かエラー等は出力されますか？
dd($request->file('item-image')->getErrorMessage()); // debug

↑すみません、nullなのでこれだとダメですね・・・うーん

[Lulucom]

store メソッドの最初で以下のようなコードを書いてみた場合、true と表示されますか？
dd($request->hasFile('item-image')); // debug

[iwatadaigo]

falseでした！

[Lulucom]

！
ということはフォーム側に何か問題があるのかもしれませんね。

[Lulucom]

掲載されたBladeのコードではformは1つしかありませんが、実際には他にもformがあって、別のformから送信されているとか、formがネストしてしまっている（2重構造になってしまっている）、あるいは、別のBladeのformから送信されている、ということはないでしょうか。

[iwatadaigo]

このBladeにはformは一つだけです。
別のBladeから送信されているなんてことがありえるんですか？

[Lulucom]

そうですか・・・いえ、それなら良いのですが、勘違い等で違うコードを見ていたという可能性もゼロでは無いと思いましたので念のための確認でした。個人的な経験で、formがネストしてしまっていて違うformから送信されていたのが原因だったり、まったく別のページのformを確認していたというケースがありましたので。
Bladeのコードよりも、表示されたページのHTMLソースから、そのformとinputがどうなっているかを確認されたほうが良いかもしれませんね。

[iwatadaigo]

解決いたしました。
やはり原因はbladeの中身で、ここで解決できなかったのはbladeの中身を省略してしまったからです。
貴重なお時間を奪ってしまって誠に申し訳ありません。

[Lulucom]

いえいえ、解決されたようで良かったです。
ご自身で詳しい回答を書かれてBAにしていただければと思います。

[iwatadaigo]

ありがとうございました！

Answer 1

bladeにて、レスポンシブを意識してアップロードする場所を２つ用意して、画面幅によって表示するHTMLを変えていました。
その結果、ファイルアップロード時に不具合が起きていたものと思われます。