title: Upload Image with Axios Post request
body: <p>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 &quot;the image field is required&quot; 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</p>
  <pre><code>src - api.js
  export const updateProfileImage = (formData) =&gt; {
      return axios.post('/my/profile/image', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
      });
  };
  </code></pre>
  <pre><code>src - redux - extraActions.js
  export const updateProfileImage = createAsyncThunk(
      'profileCreation/updateProfileImage',
      async (formData, { rejectWithValue }) =&gt; {
          return handleApiCall(() =&gt; getProfileApi.updateProfileImage(formData), rejectWithValue);
      },
  );
  </code></pre>
  <pre><code>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) =&gt; {
          builder.addCase(updateProfileImage.pending, (state) =&gt; {
              console.info('profile image is being sent to api...');
              applyPendingStatus(state);
          });
  
          builder.addCase(updateProfileImage.rejected, (state, action) =&gt; {
              applyRejectedStatus(state, action);
              errorMessage(action.payload.message);
          });
  
          builder.addCase(updateProfileImage.fulfilled, (state, action) =&gt; {
              applyFulfilledStatus(state, action);
              successMessage(action.payload.message);
          });
      },
  });
  
  export default profileCreationSlice.reducer;
  </code></pre>
  <pre><code>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 (
          &lt;Row className={styles.rowGeneral}&gt;
              &lt;Col span={24} className={styles.subtitleCol}&gt;
                  &lt;h4&gt;Profile Settings&lt;/h4&gt;
              &lt;/Col&gt;
              &lt;Col span={24}&gt;
                  &lt;form onSubmit={updateProfileImg}&gt;
                      &lt;div className={styles.profileImage}&gt;
                          &lt;img
                              src={profileImage ? URL.createObjectURL(profileImage) : userInfo?.thumb}
                          /&gt;
                          &lt;p&gt;Profile Photo&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;label htmlFor=&quot;img&quot; className={styles.uploadLabel}&gt;
                          Upload a photo:
                      &lt;/label&gt;
                      &lt;input
                          type=&quot;file&quot;
                          id=&quot;img&quot;
                          name=&quot;img&quot;
                          hidden
                          onChange={(e) =&gt; {
                              setProfileImage(e.target.files[0]);
                          }}
                      /&gt;
                      &lt;input type=&quot;submit&quot; /&gt;
                  &lt;/form&gt;
              &lt;/Col&gt;
          &lt;/Row&gt;
      );
  }
  </code></pre>