send form data with rtk query

Question

I wanna send an image with form data to the nest js server with RTK query but the file didn't send. the code are:

    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 }
    };
  }
})

I can send an image with Axios but in RTK I cant.

Puke

Answer 1

You should also pass another parameter called formData in RTK Query while passing formdata in API request.

  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 },
      formData:true           //add this line 👈
    };
  }
})

Tobin

Cannot read properties of undefined (reading 'filename') still get error – Puke

Content-Type should be omitted from headers because it's added automatically with the correct boundary if formData is true. – Electrojet

That prop formData: true doesn't exist anymore. Adding headers: { 'Content-Type': 'multipart/form-data' } is enough. – Vallombrosa

Answer 2

Remove body: { bodyFormData } instead use body: bodyFormData.

Additionally, you could try using this structure:

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

Vallombrosa

Answer 3

Just sending the FormData directly on the body works for me. No need to manually set the header (it will be set for you) nor adding formData: true.

Example:

    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',
          body: bodyFormData
        };
      }
    })

Erode

Answer 4

Adding header 'Skip-Content-Type': true, helped in my case

Example:

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

Elicia

Answer 5

In my case, adding "Accept", "application/json" in addition to formData: true solved the problem.

Syllabism

formData: true Doesn't exist anymore. – Vallombrosa