Hope you're having a good day. So I'm using Fetch API to upload files to server but I also want to include a string as JSON for my backend. But I'm unable to do so.
Right now this is what my upload-file function looks like. This works perfectly if I want to just upload a file and not include a string as JSON:
const uploadFile = ( e ) => {
const uploadedFile = e.target.files[ 0 ];
const formData = new FormData();
formData.append( 'data', uploadedFile );
const rawResponse = await fetch( '/upload-file', {
method: 'POST',
body: formData
});
};
uploadFile();
Getting the file in my NodeJS backend with req.files.data;
But if I include a string as JSON and try to upload file then I get undefined in my NodeJS backend. This is how it looks like with string as JSON:
const uploadFile = ( e ) => {
const uploadedFile = e.target.files[ 0 ];
const formData = new FormData();
const str = 'from client';
formData.append( 'data', uploadedFile );
const rawResponse = await fetch( '/upload-file', {
method: 'POST',
body: {
file: formData,
str
}
});
};
uploadFile();
Now if I want to get the file in my backend with:
req.files.file, I get undefined.
req.body, I get { 'object Object': '' }.
req.files.data, I get UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'data' of undefined.
req.body.data, I get undefined.
What is going wrong here?
you append it to FormData, not body
const uploadFile = ( e ) => {
const uploadedFile = e.target.files[ 0 ];
const formData = new FormData();
const str = 'from client';
formData.append( 'data', uploadedFile );
formData.append( 'str', str );
const rawResponse = await fetch( '/upload-file', {
method: 'POST',
body: formData
});
};
uploadFile();
Just append the value to the FormData object, same as you did with the file already
formData.append( 'str', '["some JSON here"]' );
And then keep sending just that object, body: formData