Laravel/Inertia js/React js PUT Request Form Data Not Fully Received on Update When Including Image Upload

Question

I'm facing a strange issue in my Laravel Inertia.js project. I can successfully create new 'Ville' resources, including image uploads. Updates also work fine if I don't upload a new image. However, when I try to update a 'Ville' and include a new image, it seems like the entire form data isn't being sent to Laravel correctly, leading to validation failures.

Specifically, Laravel throws a "The nom field is required" error, even though the 'nom' field is definitely part of the FormData being sent.

Here's the React component (Edit.jsx) using Inertia.js useForm for the update:

import { useForm } from '@inertiajs/react';
// ... imports ...

export default function Edit({ auth, ville }) {
    // ... (YearlyDataInput, DYNAMIC_FIELDS, etc. -  as in my code) ...

    const { data, setData, put, processing, errors } = useForm({
        nom: ville.nom || '',
        region: ville.region || '',
        geographie: ville.geographie || '',
        histoire: ville.histoire || '',
        image: null,
        nombre_annonces_analysees: ville.nombre_annonces_analysees || 0,
        // ... other fields ...
        ...Object.fromEntries(DYNAMIC_FIELDS.map(field => [field.name, ville[field.name] || {}])),
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('_method', 'PUT'); // Explicitly setting PUT method
        Object.entries(data).forEach(([key, value]) => {
            if (key === "image" && value instanceof File) {
                formData.append(key, value);
            } else if (typeof value === "object" && value !== null) {
                formData.append(key, JSON.stringify(value));
            } else if (value !== null && value !== undefined) {
                formData.append(key, value);
            }
        });
        console.log("FormData contents:");
        for (const pair of formData.entries()) {
            console.log(pair[0]+ ', ', pair[1]);
        }
        put(route('villes.update', ville.id), formData, {
            forceFormData: true, // Explicitly forcing FormData
        });
    };

    // ... (rest of the component - as in your code) ...
}

And here's the update method in my Laravel controller (VilleController.php):

getContent());
            Log::info('Request data for updating Ville:', $request->all());

            Validator::make($request->all(), [
                'nom' => 'required|string|max:255',
                'region' => 'nullable|string|max:255',
                // ... other validation rules as in your code ...
                'image' => 'nullable|image|mimes:jpeg,png,jpg,webp|max:2048',
                // ...
            ])->validate();

            $villeData = $request->except('image');
            $ville->update($villeData);

            if ($request->hasFile('image')) {
                // ... image handling as in your code ...
            }

            return redirect()->back()->with('success', 'Ville mise à jour avec succès.');
        } catch (ValidationException $e) {
            return redirect()->back()->withErrors($e->errors())->withInput();
        } catch (Exception $e) {
            Log::error('Error updating ville: ' . $e->getMessage());
            return redirect()->back()->with('error', 'Une erreur inattendue est survenue.');
        }
    }

    // ... rest of the controller ...
}

My route definition in web.php looks like this:

Route::prefix('villes')->name('villes.')->group(function () {
    // ... other routes ...
    Route::put('/{ville}', [VilleController::class, 'update'])->name('update');
    // ...
});

Here are the relevant logs and error messages:

Client-side FormData (from console.log in Edit.jsx):

FormData contents: Edit.jsx:79:16
_method,  PUT Edit.jsx:81:20
nom,  test create nw gonan be updated Edit.jsx:81:20
region,  test update Edit.jsx:81:20
geographie,  test up Edit.jsx:81:20
histoire,  test up Edit.jsx:81:20
image,  File { name: "Amlou-4.webp", lastModified: 1696953691022, webkitRelativePath: "", size: 85456, type: "image/webp" }
Edit.jsx:81:20
nombre_annonces_analysees,  5 Edit.jsx:81:20
nombre_habitants,  {"2025":"4","2027":"7","2028":"4"} Edit.jsx:81:20
tension_locative,  {"2025":"8","2033":"4"} Edit.jsx:81:20
tension_transactionnelle,  {"2025":"5","2030":"4"} Edit.jsx:81:20
tourisme_vie_etudiante,  {"2025":"4","2030":"4"} Edit.jsx:81:20
duree_moyenne_recherche_locataire,  {"2025":"3","2031":"4"} Edit.jsx:81:20
prix_moyen_logements,  {} Edit.jsx:81:20

Network Request Headers (from browser dev tools):

PUT http://127.0.0.1:8000/villes/29

...
Content-Type: multipart/form-data; boundary=----geckoformboundaryede855ff350cf86be037df87e95e4f78
...

Laravel Validation Error (from browser dev tools - Response):

{"component":"Villes\/Edit","props":{"errors":{"nom":"The nom field is required."},"flash":{ ... },"ville":{ ... }}, ... }

Laravel Log (laravel.log):

[2025-02-14 11:57:54] local.INFO: perform a update action 👇
[2025-02-14 11:57:54] local.INFO: Raw Request Content: ------geckoformboundary75754b8ccae1fffa28bf0bf1f08eec31
Content-Disposition: form-data; name="nom"

test create nw gonan be updated
------geckoformboundary75754b8ccae1fffa28bf0bf1f08eec31
Content-Disposition: form-data; name="region"

test update
------geckoformboundary75754b8ccae1fffa28bf0bf1f08eec31
Content-Disposition: form-data; name="geographie"

test up
------geckoformboundary75754b8ccae1fffa28bf0bf1f08eec31
Content-Disposition: form-data; name="histoire"

test up
------geckoformboundary75754b8ccae1fffa28bf0bf1f08eec31
Content-Disposition: form-data; name="image"; filename="Amlou-4.webp"
Content-Type: image/webp

RIFF�M

I've tried a few things: ensuring FormData is correctly constructed, using forceFormData: true in Inertia, and verifying the request headers. It really seems like Laravel isn't parsing the multipart form data properly in the update scenario when an image is included.

Could someone point out what I'm missing or how to fix this so that Laravel correctly receives and validates the form data during an update with an image upload? Is there something inherently different in how Laravel handles PUT requests with multipart/form-data compared to POST requests, especially when images are involved?

Any help would be greatly appreciated!

Laravel/Inertia js/React js PUT Request Form Data Not Fully Received on Update When Including Image Upload

Answers (1)

I found the solution I ued this code and It worked

backend

Routes:

this is how the log lloks like :

Related Questions