Axios doenst send formData in put method

Question

i'm trying to update a user's profile( social web app), i'm working with React as a frontend and laravel as a backend. the data includes an image, so i sent it using FormData, i'm doing a small validation in backend to check if data is sent to the backend, but i found that axios is not sending formData. Here is my function that runs after submit:

const editProfile = (e) => {
        e.preventDefault()
        setLoading(true)
        const formData = new FormData();
        formData.append('avatar', pic.avatar)
        formData.append('website', profile.website)
        formData.append('addresse', profile.addresse)
        formData.append('bio', profile.bio)
        formData.append('phone', profile.phone)
        formData.append('gender', profile.gender)
        formData.append('full_name', auth.full_name)
        formData.append('user_name', auth.user_name)
        formData.append('email', auth.email)
        console.log(formData)
            axios.put(`api/profile/update/${id}`, formData).then((res) => {
                if(res.data.success) {
                    console.log('success')
                    history.push(`/profile/${id}`)
                }else {
                    console.log(res.data.message)
                    setLoading(false)
                }
            })      
    }

I only made gender is required in laravel:

public function update(Request $request, $id)
    {
        $profile = Profile::find($id);
        if(is_null($profile)) {
            return response()->json([
                'success' => false,
                'message' => 'Profile can not be found!'
            ]);
        }else {
            $validate = Validator::make($request->all(),[
                'gender' => 'required'
            ]);
            if($validate->fails()) {
                return response()->json([
                    'success' => false,
                    'message' => $validate->messages()
                ]);
            }else {...

As its mentioned in react logic, i'm doing console.log to check errors if the response is failed, and i;m getting gender field is required, i tried to do a console.log(profile.gender) before sending data to axios and i could see the value normaly, So can anyone help me please?

try to dd the $request object if you are receiving anything on server side. I think axios is not sending your form data object. — Muhammad Shariq
How can i see the result of dd, when i'm using react structure? — REZAZI MOHAMED ABDESSAMED
it will be visible in api response. Or if you are using postman it will be visible there. — Muhammad Shariq
In your developer tools, in network, go to your request and check the preview and you'll see the dd output. — Fer Toasted

Nassim Nassim · Accepted Answer · 2021-08-13T11:44:44

I think you should change your header for exapmple

 .put(url, formData, {
        headers: { "Content-type": "multipart/form-data" },
      })

Axios doenst send formData in put method

2 Answers