send form data with rtk query – Reactjs

The Problem:

I need to send form data with RTK query but the file is not being sent. I can send an image with Axios, but in RTK I can’t. Here is the code I’m using with RTK query::

    uploadImage: builder.mutation<any, any>({
  query: (imageFile) => {
    var bodyFormData = new FormData();
    bodyFormData.append('file', imageFile);
    console.log({ bodyFormData, imageFile });
    return {
      url: '/uploader/image',
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data;'
      },
      body: { bodyFormData }
    };
  }
})

The Solutions:

Solution

To send form data, including an image file, with RTK Query, you need to:

1. Create a FormData object. This object will store the form data, including the image file.
2. Append the image file to the FormData object. Use the append() method to add the file to the form data.
3. Pass the FormData object to the RTK Query request body. When creating the RTK Query mutation, include a formData parameter and set its value to the FormData object.

Here’s an example of how you would use RTK Query to send form data with an image file:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import FormData from 'form-data';

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Image'],
  mutations: {
    uploadImage: builder.mutation({
      query: (formData) => ({
        url: '/image',
        method: 'POST',
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        body: formData,
      }),
      invalidatesTags: ['Image'],
    }),
  },
});

export default api;

In this example, the uploadImage mutation takes a formData object as its argument. The body property of the request object is set to the formData object.

When you make a request to the uploadImage mutation, the formData object will be sent to the server. The server can then access the image file using the file key in the formData object.

Solution

To send form data with an image using RTK Query, you can use the `FormData` interface as follows:

uploadImageMutation: builderMutation<any, any>('uploadImage', async (queryArg) => {
      const bodyFormData = new FormData();
      bodyFormData.append('file', imageFile);
      console.log({ bodyFormData, imageFile });

      return {
        url: '/uploadImage',
        method: 'POST',
        headers: {
          'Content-Type': 'multipart/form-data',
          Accept: 'application/json',
        },
        body: bodyFormData,
      };
    }),

In this example:

• new FormData() creates a new form data object.
• bodyFormData.append('file', imageFile); appends the image file to the form data with the key 'file'.
• The headers object sets the Content-Type to 'multipart/form-data' and adds an Accept header with the value 'application/json', which is important for some servers to correctly parse the request.
• The body of the request is set to the bodyFormData.

Solution 3: Form Data with RTK Query

To send form data with RTK Query, follow these steps:

1. Create a new FormData object.
2. Append your file to the FormData object using the append() method. The first parameter is the key (e.g., 'file'), and the second parameter is the file.
3. In your RTK Query mutation, set the body property to the FormData object directly, instead of wrapping it in an additional object.

Additionally, consider using the following structure when constructing your FormData object for image files:


var bodyFormData = new FormData();
bodyFormData.append('file', {
uri: imageFileUri,
type: "image/jpeg",
name: imageFileUri?.split('/')[imageFileUri?.split('/').length - 1]
});


This ensures that the file is properly formatted and includes the correct metadata (URI, type, name).

Video Explanation: