title: How to upload file using fetch
body: <p>I know this has been asked before, but none of the solutions are working for me. First I tried to solve this using <code>axios</code>, but reading about it there seem to be a bug that won't allow me to use it for uploading files. So I'm stuck with <code>fetch</code>.</p>
  
  <p>This is my uploading function: </p>
  
  <pre><code>export async function postStudyPlan(plan, headers) {
      const options = {
          method: "POST",
          body: plan
      }
      return fetch(`${HOST}:${PORT}/study-plans/add`, options)
          .then(res =&gt; {return res.json()})
          .catch(err =&gt; console.log(err));
  }
  </code></pre>
  
  <p>This is how I call it: </p>
  
  <pre><code>onStudyPlanUpload(files) {
          const file = files[0];
          let formData = new FormData();
  
          formData.append("pdf", file);
          formData.append("comments", "A really lit study plan!");
          formData.append("approved", true);
          formData.append("uploaded_by", "Name");
          formData.append("date_uploaded", "2012-02-1");
          formData.append("university", "australian_national_university");
  
          let plan = {
              "pdf": file,
              "comments": "A really lit study plan!",
              "approved": true,
              "uploaded_by": "Name",
              "date_uploaded": Date.now(),
              "university": "australian_national_university"
          }
          postStudyPlan(formData)
              .then(res =&gt; console.log(res))
              .catch(err =&gt; console.log(err))
      }
  </code></pre>
  
  <p>I know that <code>file</code> is in fact a file. Whenever I change <code>"pdf"</code> to a normal string, everything works fine. But when I use a <code>File</code> object, I recieve nothing to my backend, just an empty object. What am I missing here? I feel like my solution is basically identical to every other solution I've found online.</p>
  
  <p><strong>Edit:</strong>
  Also tried using FormData and adding <code>headers: {"Content-Type": "application/x-www-form-urlencoded"}</code> to options. Same result.</p>
  
  <p><strong>Edit 2</strong>
  I'm beginning to think my backend might be the problem! This is my backend, and I'm actually getting some outputs for the "data" event. Not sure how to process it...</p>
  
  <pre><code>router.route("/add").post((req, res) =&gt; {
      req.on("data", function(data) {
          console.log("got data: " + data.length);
          console.log("the Data: ?" )
          // let t = new Test(data);
          // t.save()
          //     .then(res =&gt; console.log(res))
      })
  
      req.on("end", function(d) {
          console.log("ending!");
      })
  
      req.on("error", function(e){
          console.log("ERROR: " + e);
      })
  });
  </code></pre>