title: How to POST a blob and JSON values using fetch
body: <p>I am passing a <code>blob</code> image file to a server using the header,</p>
  
  <p><code>application/octet-stream</code>.</p>
  
  <p>I need to also pass some <code>string</code> values to the server with it. If I change the header to </p>
  
  <pre><code>application/json
  </code></pre>
  
  <p>I can access the string, but the blob becomes undefined. </p>
  
  <p><strong>Example</strong></p>
  
  <pre><code>  const data = {
            blob,
            firstname: 'Nichoals',
          };
  
  fetch(url, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
          })
            .then(response =&gt; response.blob())
            .then(blob =&gt; {
              ...
            })
            .catch(error =&gt; console.log(error));
        },
        'image/png',
        1,
      );
  </code></pre>
  
  <p><strong>Things I have tried</strong></p>
  
  <p>I have tried to pass the data using <code>FormData()</code> and was able to get the data to the server but the file was corrupt. I do think I could figure out how to get it to work this way but I would like to learn a better way to do it if possible. </p>
  
  <p><strong>Things I do not want to do</strong></p>
  
  <p>I do not want to convert the blob to a string because I fear that will be way to expensive. </p>
  
  <p><strong>Question</strong></p>
  
  <p>In what way can I <code>POST</code> an object with a <code>blob</code> and some <code>string</code> values inside of it to a server without using the way mentioned above? </p>
  
  <p><em>Essentially this,</em> </p>
  
  <pre><code>const data = {
        blob,
         firstname: 'Will',
   };
  </code></pre>