Javascript Facebook API POST multipart/form-data

Question

I've been completely stumped on this problem for the last few days. If someone could point me in the right direction I'd appreciate it! I've been trying to figure out how to post an image via facebooks graph api.

I have an image downloaded from Facebook via their graph API that is displayed in a canvas element properly. I'm modifying this element by drawing text on it and then want to upload it back up to facebook. I'm getting stuck on the upload.

Here are the links I've looked at which have been helpful, but I'm still stuck:

Facebook Graph API - upload photo using JavaScript Discusses using multipart/form-data to upload to facebook using a post request.

https://gist.github.com/andyburke/1498758 Code to create multipart form data and send a request to facebook to post the images.

This is the code I'm using to try and post an image to facebook

if ( XMLHttpRequest.prototype.sendAsBinary === undefined ) {
    XMLHttpRequest.prototype.sendAsBinary = function(string) {
        var bytes = Array.prototype.map.call(string, function(c) {
            return c.charCodeAt(0) & 0xff;
        });
        //this.send(new Uint8Array(bytes).buffer); //depreciated warning
        this.send(new Uint8Array(bytes));
    };
}

// This function takes an array of bytes that are the actual contents of the image file.
// In other words, if you were to look at the contents of imageData as characters, they'd
// look like the contents of a PNG or GIF or what have you.  For instance, you might use
// pnglib.js to generate a PNG and then upload it to Facebook, all from the client.
//
// Arguments:
//   authToken - the user's auth token, usually from something like authResponse.accessToken
//   filename - the filename you'd like the uploaded file to have
//   mimeType - the mime type of the file, eg: image/png
//   imageData - an array of bytes containing the image file contents
//   message - an optional message you'd like associated with the image

function PostImageToFacebook( authToken, filename, mimeType, imageData, message )
{
    console.log("filename " +  filename);
    console.log("mimeType " + mimeType);
    console.log("imageData " + imageData);
    console.log("message " + message);

    // this is the multipart/form-data boundary we'll use
    var boundary = '----ThisIsTheBoundary1234567890';

    // let's encode our image file, which is contained in the var
    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 < imageData.length; ++i )
    {
        formData += String.fromCharCode( imageData[ i ] & 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/me/photos?access_token=' + authToken, true );
    xhr.onload = xhr.onerror = function() {
        console.log( xhr.responseText );
    };
    xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=" + boundary );
    xhr.sendAsBinary( formData );
    console.log(formData);
}

A call to the PostImageToFacebook function has the results in the following error:

{
   "error": {
      "type": "Exception",
      "message": "Your photos couldn't be uploaded. Photos should be less than 4 MB and saved as JPG, PNG, GIF or TIFF files.",
      "code": 1366046
}

I log the formData the output of which I pasted below:

------ThisIsTheBoundary1234567890
Content-Disposition: form-data; name="source"; filename="MemeImage.png"
Content-Type: image/png

------ThisIsTheBoundary1234567890
Content-Disposition: form-data; name="message"

Posting a meme image
------ThisIsTheBoundary1234567890--

Answer 1

This is possible in a much less complicated way, just turn the Canvas image into a blog with this code:

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

There is no need to set all those headers on your own, just use the blog with FormData:

formData.append('source', blob);

Source: http://www.devils-heaven.com/facebook-javascript-sdk-photo-upload-from-canvas/

Answer 2

try replace

for ( var i = 0; i < imageData.length; ++i )
{
    formData += String.fromCharCode( imageData[ i ] & 0xff );
}

with

formData += imageData;