Facebook Javascript sdk posting media as multipart/form-data

I am trying to post a media to one of the pages that I manage on Facebook, using JavaScript sdk using source parameter (multipart/form-data). I am using the access-token to post on the page managed by me at /{page-id}/photos.

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("image", 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>

I am always receiving a code error 324

message: "(#324) Requires upload file "type: "OAuthException"

Is the form-data I am sending not formatted properly? Is the form-data incorrect?