laravel 8 image validation is not working properly

Question

I am using laravel 8 and I am trying to validate images. I can only have jpeg. Having a photo is not required and works fine if i dont add it. However, when i do add it with the jpeg image, I get an error saying: "The photo must be a file of type: jpeg."

I have enctype="multipart/form-data" in my form.

code:

public function compute(Request $request){

        $rules = [
            'vessel' => 'required',
            'date' => 'required',
            'species' => 'required',
            'grade' => 'required',
            'temperature' => 'required',
            'visualCheck' => 'required',
            'skin' => 'required',
            'touch' => 'required',
            'damage' => 'required',
            'eyes' => 'required',
            'gills' => 'required',
            'gutting' => 'required',
            'washing' => 'required',
            'boxing' => 'required',
            'condition' => 'required',
            'checkedBy' => 'required',
            'photo' => 'image|mimes:jpeg|min:1|max:2000',
        ];

        $validator = Validator::make($request->all(), $rules);
        if ($validator->fails()) {
            return redirect()->back()
                ->withInput()
                ->withErrors($validator);
        }

        
        $data = $request->all();
        $comments = $data["comments"];
        try{
            $report = new insertQualityReport();
            $report->vessel = $data["vessel"];
            $report->species = $data["species"];
            $report->grade = $data["grade"];
            $report->product_temperature = $data["temperature"];
            $report->visual_check = $data["visualCheck"];
            $report->skin = $data["skin"];
            $report->touch = $data["touch"];
            $report->damage = $data["damage"];
            $report->eyes = $data["eyes"];
            $report->gills = $data["gills"];
            $report->gutting = $data["gutting"];
            $report->washing = $data["washing"];
            $report->boxing = $data["boxing"];
            $report->conditions_of_fish_box = $data["condition"];
            $report->comments = $data["comments"];
            $report->checked_by = $data["checkedBy"];
            $report->intake_quantity = $data["intakeQuantity"];
            $report->rejected_quantity = $data["rejectedProduct"];
            $report->processed_quantity = $data["processed"];
            $report->date_recorded = $data["date"];
            if(isset($data["photo"])){
                $report->photo = $data["photo"];
            } else {
                $report->photo = null;
            }
            
            if (!$report->save()) {
                return redirect()->back()
                    ->withInput()
                    ->withErrors(["errors" => ["Problem saving report"]]);
            }
            $report->save();
            return redirect()->back()
                    ->withInput()
                    ->with('comments', $comments);
        }
        catch (Exception $e) {
            return redirect()->back()
                    ->withInput()
                    ->withErrors(["errors" => [$e->getMessage()]]);
        }
        
    }

Any idea on how to fix this?

If i remove the mimes rule, it works fine

Update, blade file form

<form id="form" action="{{ url('/addqualityreport') }}" onsubmit="return validate(event)" method="POST" enctype="multipart/form-data" name="form">
...other inputs
<div class="row ms-3 mt-2 mb-2 imput-group">
<label for="photo" class="col-2 me-5">Upload Photo</label>
<span class="input-group-text col-1 photo" style="min-width:min-content;">JPEG Only</span>
<input type="file" name="photo" id="photo" class="form-control col-7" style="text-align:left;width:33.5%;height:100%;" accept="image/jpeg"/>
</div>
<div class="row justify-content-center m-2">
<input type="reset" id="reset" value="Cancel" class="col-1 m-3" style="width:auto;" />
<input type="submit" value="Submit" class="col-1 m-3" style="width:auto;" />
</div>
</form>

Answer 1

Try removing image on your validation and only use mimes:jpeg.

On this:

'photo' => 'image|mimes:jpeg|min:1|max:2000',