title: How can I upload file and also include JSON data with Fetch API?
body: <p>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.</p>
  <p>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:</p>
  <pre><code>const uploadFile = ( e ) =&gt; {
  
      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();
  </code></pre>
  <p>Getting the file in my NodeJS backend with <code>req.files.data</code>;</p>
  <p>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:</p>
  <pre><code>const uploadFile = ( e ) =&gt; {
  
      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();
  </code></pre>
  <p>Now if I want to get the file in my backend with:</p>
  <p><code>req.files.file</code>, I get <code>undefined</code>.</p>
  <p><code>req.body</code>, I get <code>{ 'object Object': '' }</code>.</p>
  <p><code>req.files.data</code>, I get <code>UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'data' of undefined</code>.</p>
  <p><code>req.body.data</code>, I get <code>undefined</code>.</p>
  <p>What is going wrong here?</p>