Inserting data is working but when I update the data it gives an error that all fields are required even it has a value. How to fix this?

Question

Error: The part name field is required, The part number field is required, the image field is required.

   async submit(form) {
        const forms = new FormData();
        const keys = Object.keys(form);
        keys.forEach((key) => forms.append(key, form[key]));
        // appends image
        this.$refs.upload.uploadFiles.forEach(({ raw }) => forms.append("image", raw));

        try {
            this.loading = true;

            const { id } = form;
            const {
                data: { message },
            } = id
                ? await this.$axios.put(`/api/inventory_transactions/${id}`, forms)
                : await this.$axios.post("/api/inventory_transactions", forms);

            this.$notify.success(message);
            this.$emit("success");
            this.close();
        } catch ({ response }) {
            this.errors = response?.data?.errors || {};
        } finally {
            this.loading = false;
        }
    },

Here is my Controller and how I validate all the fields. I need your help guys. Thank you. I think my the axios is the problem. I wasted a lot of time just fixing this

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

$inventory_transaction = $request->validate($this->validation());

    $value = Inventory_transaction::withTrashed()->findOrFail($id);

    if($request->hasFile('image')) {
        $filename = uniqid() . '.' . $request->image->extension();
        Storage::putFileAs('inventory_transactions', $request->image, $filename);   
        $inventory_transaction['image'] = $filename;  
    }
    
    $value->update($inventory_transaction);

    return $this->respondWithMessage('Transaction successfully updated.');
}

private function validation()
{
    return [
   
    'part_name' => ['required'],
    'part_number' => ['required'],
    'unit' => ['required'],
    'category' => ['required'],
    'sub_category' => ['required'],
    'unit_price' => ['required'],
    'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
    'brand' => ['required'],
    'serial_number' => ['required'],
    'specifications' => ['required'],
    'remarks' => ['required'],
    ];
}

Answer 1

I would verify exactly what data I send to the server (in browser > developer tools > network tab) or check what I receive in php, using var_dump, print_r or laravel's dd function:

public function update(Request $request, $id)
{
    dd($request->all()); 
    ...
}

It looks like you are trying to upload files via Axios. If this is the case you should also send a Content-type: multipart/form-data header, like so:

axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

maybe have a look at this post: How to post a file from a form with Axios while you are at it.