I’m trying to send a new FormData() as the body of a POST request, locally it works without any issues but on our live envs I keep getting Unexpected end of form at Multipart._final
. I tried sending the request without specifying a content-type but then it defaults to application/json
instead of multipart/form-data
with the boundary. I also tried setting content-type
to undefined
but that didn’t work either, the browser won’t set it automatically. I’m using an in-house built http client so not Axios or anything like that maybe that is the culprit here, but I can’t figure this one out.
Is there a way to set the boundary manually using the formData?
This is the api call:
export const uploadFiles = async {
formData: FormData;
) => {
try {
const res = await Api.postUploadFiles.submit({
body: { formData },
headers: { "Content-Type": `multipart/form-data; boundary=${add it manually here}` },
});
return res;
} catch (err) {
const publicErrMsg = err?.response?.data?.message;
throw new Error(
`Error when uploading file: ${publicErrMsg || err.message}`,
);
}
};
This is where data being appended to formData:
const upload = useCallback(
async (files: FileList) => {
const formData = new FormData();
formData.append("filesData", files[0]);
formData.append("folderPath", btoa(selectedFolderPath || ""));
formData.append("friendlyName", files[0].name);
try {
const res = await uploadFiles(
formData,
);
And this is the API definition:
export const postUploadFiles = API_DEF.endpoint<
any, // this is the response type
{ formData: FormData }
>({
id: "uploadFiles",
name: "Upload File",
description: "Upload a file to to storage",
method: RequestMethod.Post,
path: "/files/upload",
defaults: {
options: {
cache: false,
},
},
});