Failed to load response data when updating data with file uploaded using laravel and inertiaJs

Question

I am building a SPA using Laravel 8 and inertiaJs

I am trying to update records that have a uploaded file (input file). When storing data everything is good, but I have a problem when I try to update with file uploaded.

PS: There is no error showing in the console or from the server. In network tab I see the message "Failed to load response", and like a result, the required fields show errors, it's like I sent an empty data.

see image : Image showing the errors

This is my code:

web.php

Route::put('/software/{software}', [SoftwareController::class, 'update'])->name('software.update');

SoftwareController

 public function update(Request $request, Software $software)
    {
        $data = $request->validate([
            'name' => 'required',
            'software_version' => 'nullable',
            'doc_ref' => 'nullable',
            'doc_version' => 'nullable',
            'doc_name' => 'required_with:doc_ref',
            'doc_filename' => 'nullable|file|mimes:docx,doc,xlsx,xls,pdf,jpg,png',
        ]);


        $doc_filename = $request->file('doc_filename') ? $request->file('doc_filename')->store('software/equipment', 'public') : null;
       
        $software->update(array_merge($data, ['doc_filename' => $doc_filename]));

        return Redirect::back()->with('success', 'Software updated.');
    }

Edit.vue

 updateSoftware(){
        if (confirm("Do you want to update the software ?")) {
            this.$inertia.put(this.route('software.update',
                {software : this.software_id}), this.form);
        } 
    },

PS:

this.form : contain the data related to v-model

this.software_id : contain the id of the current instance.

Answer 1

You're problem is likely that you are using the PUT method which is not be default supported by HTML forms using a multipart/form-data request, I bet you are using POST when storing the file which is working.

Try adding using post but adding this <input type="hidden" name="_method" value="PUT"> to your form.

Or you can change your update method to:

 updateSoftware(){
        if (confirm("Do you want to update the software ?")) {
            this.$inertia.post(this.route('software.update',
                {software : this.software_id,
                 _method: 'put',
                }), this.form);
        } 
    },

Check out the documentation here on how to spoof the method.

And read here on how to properly upload an image with Inertia.