Upload Image with Axios Post request

Question

I am trying to make a post request to an api to upload a user image and send it to the api for profile settings.But i always receive "the image field is required" error although I send formData object. Where is my mistake in below codes ? Please help. below are my codes. Get request is working fine but post request is not working

src - api.js
export const updateProfileImage = (formData) => {
    return axios.post('/my/profile/image', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
    });
};

src - redux - extraActions.js
export const updateProfileImage = createAsyncThunk(
    'profileCreation/updateProfileImage',
    async (formData, { rejectWithValue }) => {
        return handleApiCall(() => getProfileApi.updateProfileImage(formData), rejectWithValue);
    },
);

src - redux - slice.js
import { createSlice } from '@reduxjs/toolkit';
import { updateProfileImage } from './extraActions';
import { REDUX_LOADING_STATUS } from '@constants/status';
import {
    applyFulfilledStatus,
    applyRejectedStatus,
    applyPendingStatus,
    errorMessage,
    successMessage,
} from '@utils/redux';

const initialState = {
    userInfo: {},
    status: REDUX_LOADING_STATUS,
    statusCode: '',
    message: '',
};

export const profileCreationSlice = createSlice({
    name: 'profile',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder.addCase(updateProfileImage.pending, (state) => {
            console.info('profile image is being sent to api...');
            applyPendingStatus(state);
        });

        builder.addCase(updateProfileImage.rejected, (state, action) => {
            applyRejectedStatus(state, action);
            errorMessage(action.payload.message);
        });

        builder.addCase(updateProfileImage.fulfilled, (state, action) => {
            applyFulfilledStatus(state, action);
            successMessage(action.payload.message);
        });
    },
});

export default profileCreationSlice.reducer;

src - containers- ProfileContainer - generalContainer - index.js
import React from 'react';
import { Row, Col, Button } from 'antd';
import styles from './index.module.less';
import { updateProfileImage } from '@redux/slices/profileCreation/extraActions';

export default function GeneralContainer() {
    const [profileImage, setProfileImage] = useState();


    function updateProfileImg(e) {
        e.preventDefault();
        const formData = new FormData();
        formData.append('profileImage', profileImage);
        dispatch(
            updateProfileImage({
                image: formData,
                // image is my api key
            }),
        );
    }
    return (
        <Row className={styles.rowGeneral}>
            <Col span={24} className={styles.subtitleCol}>
                <h4>Profile Settings</h4>
            </Col>
            <Col span={24}>
                <form onSubmit={updateProfileImg}>
                    <div className={styles.profileImage}>
                        <img
                            src={profileImage ? URL.createObjectURL(profileImage) : userInfo?.thumb}
                        />
                        <p>Profile Photo</p>
                    </div>
                    <label htmlFor="img" className={styles.uploadLabel}>
                        Upload a photo:
                    </label>
                    <input
                        type="file"
                        id="img"
                        name="img"
                        hidden
                        onChange={(e) => {
                            setProfileImage(e.target.files[0]);
                        }}
                    />
                    <input type="submit" />
                </form>
            </Col>
        </Row>
    );
}

Answer 1

those we are using axios version 0.25 or 0.26, solution is

axios.post(url, formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  transformRequest: formData => formData,
})

from axios version 0.27, it works as usual.