Laravel validation rules for arrays failed when sending multipart/form-data using Reactjs

Question

I'm trying to make a POST Request to Laravel from Reactjs to insert into the database a product which may have some categories which is an array, also some images.

But it seems that when I send the POST Request with Content-Type: 'multipart/form-data', the laravel (or php) doesn't JSON Decode the array. Same thing for 'images'

How can I solve this?

This is my custom validation rules:

public function rules(): array
    {
        return [
            'name' => 'required|min:3|max:255',
            'title' => 'required|min:3|max:255',
            'subtitle' => 'required|min:3|max:255',
            'description' => 'nullable|min:10|max:1000',
            'categories' => 'required|array',
            'images' => 'required|array|min:1|max:10',
            'images.*' => 'image|mimes:jpeg,png,jpg,gif|max:2048',
        ];
    }

Reactjs:

const handleUploadPictures = (event) => {
        const files = event.target.files;
        if (!files.length) return toast.error("You need to upload minimum 1 image.");

        setProductImages(Array.from(files));
    };

 const createProduct = async () => {
        const formData = new FormData();
        formData.append("name", productName);
        formData.append("title", productTitle);
        formData.append("subtitle", productSubTitle);
        formData.append("description", productDescription);
        formData.append("categories", JSON.stringify(['sneakers', 'shoes']));
        formData.append("images", JSON.stringify(productImages)); // productImages = Array.from(event.target.files);


        await axios
            .post(`${API_URL}/api/create/product`, formData, {
                headers: {
                    "Content-Type": "multipart/form-data",
                },
            })
            .then((response) => {
                console.log(response.data);
                return response.data;
            })
            .catch((error) => {
                console.log(error);
                return getResponseValidationErrors(error) ?? formatResponseError(error, "We could not add the product.");
            });

    }

I get 422 Unprocessable Content, response is:

{
        "message": "The categories field must be an array. (and 1 more error)",
        "errors": {
            "categories": [
                "The categories field must be an array."
            ],
            "images": [
                "The images field must be an array."
            ]
        }
    }

xenooooo · Accepted Answer · 2023-07-20 02:17:42Z

2

The possible options available for you is to create middleware to json_decode the json value in your request data or transform the 'json' value directly in the FormRequest file assuming you're using it you can override the prepareForValidation():

Preparing Input for Validation

Using Form Request

protected function prepareForValidation()
{
    $this->merge([
        'images' => json_decode($this->images),
        'categories' => json_decode($this->categories),
    ]);
}

Using Middleware

class DecodeJsonInput
{
    public function handle(Request $request, Closure $next)
    {
        $request->merge([
            'images' => json_decode($request->input('images')),
            'categories' => json_decode($request->input('categories'))
        ]);

        return $next($request);
    }
}

// Then add it to the route
Route::post('/create/product', [ProductController::class,'store'])->middleware(DecodeJsonInput::class);

PS: I'm not sure if the middleware will work if since I didn't check it yet. But in theory it should work.

answered Jul 20, 2023 at 2:17

xenooooo

1,2262 gold badges5 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Galbert Over a year ago

Thank you! It is working now! I'm using Form Request.

Stetzon Over a year ago

Had a similar problem and followed this article that offers a similar solution also using prepareForValidation that stringifies the non-file payload and then decodes it in the form request

Collectives™ on Stack Overflow

Laravel validation rules for arrays failed when sending multipart/form-data using Reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related