I am working on a ReactJS frontend and a Laravel backend. My ReactJS frontend sends FormData to a Laravel controller for updating an event. The FormData is correctly populated on the frontend before being sent, and the payload appears correct in the Chrome network tab. I have tried logging the raw data in Laravel, which confirms that the data is received somewhere in the controller. However, the Laravel controller is not populating any data, and it sends an empty object to the database. The controller only updates the database with new values if I hardcode the data in the controller.

I tried the following:

Logging FormData on the frontend: I confirmed that the FormData is correctly populated before being sent.

Checking the network tab in Chrome: The payload appears correct, indicating that the data is being sent from the frontend as expected.

Logging raw data in Laravel: I verified that the data is received in the controller by logging it, which confirms that the FormData is reaching the server.

I expected the Laravel controller to populate the received FormData into the corresponding variables and update the database with these new values. However, instead, the controller is sending an empty value object to the database. The database only updates correctly if I hardcode the values in the controller.

The ReactJS Front end code:

  const finishEvent = async () => {
    if (!photoAfter) {
      alert("Please upload a photo after event completion.");
      return;
    }
  
    try {
      const formData = new FormData();
      setFinishBtnIsLoading(true);
      formData.append("photos_after", photoAfter);
      formData.append("finished", "true");
  
      await axios.patch(`http://127.0.0.1:8000/api/events/${event.id}/complete`, formData, {
        headers: { "Content-Type": "multipart/form-data" },
      });
  
      setFinishBtnIsLoading(false);
      setIsCompleted(true);
      reward();
    } catch (error) {
      setFinishBtnIsLoading(false);
      alert("An error occurred while completing the event. Please try again.");
    }
  };

The finishEvent controller:

public function finishEvent(Request $request, $id)
    {

        $event = Event::findOrFail($id);

        $request->validate([
            'photos_after' => 'nullable|file',
            'finished' => 'required|boolean',
        ]);

        // Handle photos_after upload
        if ($request->hasFile('photos_after')) {
            if ($event->photos_after) {
                Storage::delete(str_replace('/storage/', 'public/', $event->photos_after));
            }

            $file = $request->file('photos_after');
            $path = $file->store('public/photos');
            $photos_after = Storage::url($path);
        } else {
            $photos_after = $event->photos_after;
        }

        // Update the event
        $event->update([
            'photos_after' => $photos_after,
            'finished' => $request->finished,
        ]);

        return response()->json(['event' => $event]);
    }

The API route:

Route::patch('/events/{id}/complete', [EventController::class, 'finishEvent']);

Cors Config:

'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],