How to encode local image as multipart / form-data for Facebook post

Question

How to encode local image as multipart / form-data for Facebook post

I am trying to post media to a Facebook page I manage using FB.api ("/ {page_id} / photos") from JavaScript sdk. But I cannot do it successfully.

How to encode local image file as correct multipart / form-data which can be posted to Facebook.

function onChangeMediaReader() {
  var file = document.getElementById('post-media').files[0];
  reader = new FileReader();
  reader.onload = function() {
    // displays the selected image in canvas.
    document.getElementById('post-media-src').src = reader.result;
    document.getElementById('media-container').style.display = "block";

    // form-data of the selected image for source param.
    formData = new FormData();
    formData.append("source", reader.result);
  }

  if (file) {
    reader.readAsDataURL(file);
  }
}

function publishPost() {
  params.access_token = page_access_token;
  params.message = document.getElementById('post-message').innerHTML;

  if (formData) {
    params.source = formData;
  }

  FB.getLoginStatus(function(response) {
    FB.api(
      '/' + page_id + '/photos',
      "POST",
      params,
      function(response) {
        console.log(response);
      });
  });
}

<form id="image-data" method="post" enctype="multipart/form-data">
  <input type="file" name="source" id="post-media" accept="image/*" onchange="onChangeMediaReader();" />
  <label for="post-media">Upload media</label>
  <br />
  <br />
</form>

<button id="publish-post" onclick="publishPost();">Submit</button>