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?

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?

• javascript
• jquery
• node.js
• express
• fetch-api

• 1 you append it to formdata, not body – apple apple Commented Sep 9, 2021 at 14:53
• 1 formData.append( 'str', '["some JSON here"]' ); – C3roe Commented Sep 9, 2021 at 14:54
• awesome you guys. it worked. which one of your answers should I choose? – s.khan Commented Sep 9, 2021 at 14:56

2 Answers 2

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