title: Sending canvas.toDataURL() as FormData
body: <p>I am trying to use html2canvas to render a DOM element as a .png image, which I then want to upload to the server. Here is my code:</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  import html2canvas from 'html2canvas';
  import axios from 'axios';
  
  
  const sendScreenshot = (img) =&gt; {
    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
    }
    let data = new FormData();
    data.append('screenshot', img);      
    return axios.post('/api/upload', data)
  }
  
  export default class Export extends Component {
  
    printDocument() {
      const input = document.getElementById('divToPrint');
      html2canvas(input).then(canvas =&gt; {
        document.body.appendChild(canvas);
        const imgData = canvas.toDataURL('image/png');
        sendScreenshot(imgData)
      });
    }
  
    ...
  </code></pre>
  
  <p>I can see that the DOM element is being converted to an image properly because I can see it appended to the page. </p>
  
  <p>On the node.js server end, I can see that the form is coming through, but 'screenshot' is being received as a text field, not as a file. I am using multer and I confirmed that I can properly receive and save file uploads, at least when I use Postman.</p>
  
  <p>So I guess the basic problem is that I need to indicate that the item I am appending to FormData is a file, not a text field. But I can't figure out how to do that. I tried using append with three arguments, and I tried converting the imgData into a blob like so:</p>
  
  <p><code>const blob = new Blob([img], {type: 'image/png'});</code></p>
  
  <p>But the results did not put me any closer to what I wanted. </p>