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

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0