Uploading a canvas image to facebook as Blob of multipart/form-data type
<p>I am trying to use the facebook api to upload an image from a canvas I save on the page:</p>

<pre><code>var file = dataURItoBlob(canvas.toDataURL('image/jpeg', 1.0))

FB.api('/me/photos', 'POST', {
  source: file,
  message: 'photo description'
}, function (response) {
    console.log(response)
  }
)
</code></pre>

<p>This is the blob convertor:</p>

<pre><code>function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i &lt; byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: 'image/jpeg' });
}
</code></pre>

<p>And I am getting an error: <code>message: "(#324) Requires upload file"</code> so it seems the uploader does not recognize the blob as a valid file.</p>

<hr>

<p>UPDATE 1:</p>

<p>I fount this post: <a href="https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata">Convert Data URI to File then append to FormData</a> about converting blob to formData, tried it like this:</p>

<pre><code>var dataURL = canvas.toDataURL('image/jpeg', 1.0)
var blob = dataURItoBlob(dataURL)
var fd = new FormData(document.forms[0])
fd.append("canvasImage", blob)

FB.api('/me/photos', 'POST', {
  source: fd .....
</code></pre>

<p>But still the same error.</p>

<hr>

<p>UPDATE 2:</p>

<p>Even tried this XHR post solution, <a href="https://stackoverflow.com/questions/28955469/using-facebooks-javascript-api-to-post-multipart-form-data-encoded-image">Using Facebooks javascript api to post multipart/form-data encoded image</a> and still getting file issue <code>"Your photos couldn't be uploaded. Photos should be less than 4 MB and saved as JPG, PNG, GIF or TIFF files."</code></p>

<pre><code>function postImageToFacebook(access_token) {
  var filename = "samplepic.png",
    mimeType = "image/png",
    message = "test comment",
    data = canvas.toDataURL("image/png"),
    encodedPng = data.substring(data.indexOf(',') + 1, data.length),
    imageData = atob(encodedPng);

  // build the multipart/form-data
  var boundary = '----ThisIsTheBoundary1234567890';
  var formData = '--' + boundary + '\r\n'
  formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n';
  formData += 'Content-Type: ' + mimeType + '\r\n\r\n';
  for (var i = 0; i &lt; imageData.length; ++i) {
    formData += String.fromCharCode(imageData[i] &amp; 0xff);
  }
  formData += '\r\n';
  formData += '--' + boundary + '\r\n';
  formData += 'Content-Disposition: form-data; name="message"\r\n\r\n';
  formData += message + '\r\n'
  formData += '--' + boundary + '--\r\n';

  var xhr = new XMLHttpRequest();
  xhr.open( 'POST', 'https://graph.facebook.com/v2.5/me/photos?access_token=' + access_token, true );
  xhr.onload = xhr.onerror = function() {
    console.log( xhr.responseText );
  };
  xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=" + boundary );
  xhr.send( formData );
}
</code></pre>