Patch Request VUE to Laravel

I have an edit form generated by FormKit, where you can edit a recipe model.

function submitForm(data) {
    let image = ''

    if (data.image.length > 0)
        image = data.image[0].file

    const form = new useForm({
        name: getNode('name').value,
        category_id: getNode('category_id').value,
        subcategory_id: getNode('subcategory_id').value,
        image: image,
        vegetarian: getNode('vegetarian').value,
        duration: (parseInt(getNode('hours').value) * 60) + parseInt(getNode('minutes').value),
        portions: getNode('portions').value,
        ingredients: JSON.stringify(getNode('ingredients_edit').value),
        instructions: JSON.stringify(getNode('instructions_edit').value)
    })

    form.put('/recipe/' + props.recipe.slug, {
        forceFormData: true,
        onError: (errors) => {
            Object.entries(errors).forEach(([key, value]) => {
                setErrors(key, value)
            });
        }
    })

The form variable gets correctly filled with the edited values from the form and also sent via the put request payload. But in Laravel dd($request->all() ) is empty.

public function update(UpdateRecipeRequest $request, Recipe $recipe): RedirectResponse
    {
        dd($request->all());
        
        $image_path = '';

        if ($request->hasFile('image')) {
            $image_path = $request->file('image')->store('image', 'public');
        }

        $data = array_merge($request->except('image'),
            ['image' => $image_path],
        );

        $recipe->update($data);

        return to_route('recipe.show', $recipe->slug);
    }

LaryAI

2 years ago

Level 58

The issue might be that the form.put method is not sending the data in the correct format. Try changing forceFormData: true to forceFormData: false and see if that works. If not, you can try manually creating a FormData object and sending that instead. Here's an example:

const formData = new FormData();
formData.append('name', getNode('name').value);
formData.append('category_id', getNode('category_id').value);
formData.append('subcategory_id', getNode('subcategory_id').value);
formData.append('vegetarian', getNode('vegetarian').value);
formData.append('duration', (parseInt(getNode('hours').value) * 60) + parseInt(getNode('minutes').value));
formData.append('portions', getNode('portions').value);
formData.append('ingredients', JSON.stringify(getNode('ingredients_edit').value));
formData.append('instructions', JSON.stringify(getNode('instructions_edit').value));
if (data.image.length > 0) {
    formData.append('image', data.image[0].file);
}

form.put('/recipe/' + props.recipe.slug, {
    body: formData,
    onError: (errors) => {
        Object.entries(errors).forEach(([key, value]) => {
            setErrors(key, value)
        });
    }
})

Elliot_putt

2 years ago

Level 6

What happens if you hard code some data in a new object and send it?

Please or to participate in this conversation.