RTK formData PUT not working

I have this file input

<input
    type="file"
    id="desktop-user-photo"
    name="user-photo"
    className="absolute inset-0 w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-xs"
    onChange={(e) =>  updatePicture(e.target.files ? e.target.files[0] : null)}
    />

that calls this method:

const [editPicture] = useEditPictureMutation();

const updatePicture = async (file: File | null) => {
  const formData = new FormData();
  formData.append('file', file);
  await editPicture({ formData }).unwrap();
}

here the API slice

editPicture: builder.mutation<Profile, { formData: FormData }>({
  query: ({ formData }) => ({
    url: `/picture`,
    method: 'PUT',
    body: formData,
  }),
  invalidatesTags: [PROFILE_TAG],
}),

When I’m calling this endpoint I have and error from BE: [Nest] Unexpected end of multipart data

If I try to use the same endpoint with swagger it works

I’m using “@reduxjs/toolkit”: “1.8.1”

Any ideas? Thank you in advance!

[msutkowski]

Hmm. Actually, that may be part of the issue? I don’t think RTKQ is really meant for file uploads.

Also, I think it tries to send the body as JSON by default.

So, may be some combination of those two things - if you’re trying to send a file, you may have to alter the settings for the fetch send.

We don’t set headers when the body is FormData and file uploads should just work (I do this myself with RTKQ in many projects). You can see by the screenshots that it’s generating the form boundary and such as expected. This is most likely an API issue.

Reference: https://github.com/reduxjs/redux-toolkit/blob/master/packages/toolkit/src/query/tests/fetchBaseQuery.test.tsx#L675-L694

[ymoon715]

yes @phryneas you are right, also fails with fetch so is not RTK issue. I’ll close this now and thank you guys for your help!

@fs-innonova It is indeed an issue with fetch. You can use axios instead of baseQuery.

https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery.

I used modified version of this example and got it to work.