title: sending file and json in POST multipart/form-data request with axios
body: <p>I am trying to send a file and some json in the same multipart POST request to my REST endpoint. The request is made directly from javascript using axios library as shown in the method below.</p>
  
  <pre><code>doAjaxPost() {
      var formData = new FormData();
      var file = document.querySelector('#file');
  
      formData.append("file", file.files[0]);
      formData.append("document", documentJson);
  
      axios({
          method: 'post',
          url: 'http://192.168.1.69:8080/api/files',
          data: formData,
      })
      .then(function (response) {
          console.log(response);
      })
      .catch(function (response) {
          console.log(response);
      });
  }
  </code></pre>
  
  <p>However, the problem is when I inspect the request in chrome developer tools in the network tab, I find no <code>Content-Type</code> field for <code>document</code>, while for <code>file</code> field <code>Content-Type</code> is <code>application/pdf</code> (I'm sending a pdf file).</p>
  
  <p><a href="https://i.stack.imgur.com/WKVIm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WKVIm.png" alt="Request shown in network inspector"></a></p>
  
  <p>On the server <code>Content-Type</code> for <code>document</code> is <code>text/plain;charset=us-ascii</code>.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I managed to make a correct request via Postman, by sending <code>document</code> as a <code>.json</code> file. Though I discovered this only works on Linux/Mac.</p>