I am trying to upload files to my backend server with this library, and I am facing a few issues.
The HTML form I have tested, and that works fine - so I know the backend is set up correctly. However, I am using Javascript to handle my form submission.
My payload looks like this:
My javascript code to post looks like this:
const data = new FormData();
Object.entries(files).forEach(([fieldName, files]) => {
data.append(fieldName, files[0]);
// fieldName: the input name
// files = FileList (https://developer.mozilla.org/en-US/docs/Web/API/FileList)
});
fetch({
url: `files/upload`,
method: "POST",
headers: {
"Content-Type": "multipart/form-data",
},
body: data,
})
To best of my knowledge, about code should work. I have also tried different variations with and without the headers (which some recommend I don't set, and some recommend I do).
On the backend req.files will always be undefined.
What solved it for me was to ensure I did NOT set any Content-Type header. In my case my baseQuery would automatically set Content-Type if none was provided, and this is fixed now.
I am trying to upload files to my backend server with this library, and I am facing a few issues.
The HTML form I have tested, and that works fine - so I know the backend is set up correctly. However, I am using Javascript to handle my form submission.
My payload looks like this:
My javascript code to post looks like this:
To best of my knowledge, about code should work. I have also tried different variations with and without the
headers
(which some recommend I don't set, and some recommend I do).On the backend
req.files
will always be undefined.If using a traditional