How can I upload file and also include JSON data with Fetch API?

Question

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?

awesome you guys. it worked. which one of your answers should I choose? — s.khan
– s.khan, Commented Sep 9, 2021 at 14:56

apple apple · Accepted Answer · 2021-09-09 14:58:14Z

13

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();

answered Sep 9, 2021 at 14:58

apple apple

10.7k2 gold badges20 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

C3roe · Accepted Answer · 2021-09-09 14:57:30Z

1

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

answered Sep 9, 2021 at 14:57

C3roe

97.6k15 gold badges100 silver badges172 bronze badges

2 Comments

Leonardo Drici Over a year ago

Unless the string is a hardcoded don't do this, rely on JSON.stringify(variable).

C3roe Over a year ago

@LeonardoDrici that is true in general of course, but if the original question already refers to this as const str = 'from client';, this is probably not the issue to focus on here.

Collectives™ on Stack Overflow

How can I upload file and also include JSON data with Fetch API?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related