Facebook Javascript SDK - Login and photo upload script

facebook.js

<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>

<script>

    var Base64Binary = {
        _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

        /* will return a  Uint8Array type */
        decodeArrayBuffer: function(input) {
            var bytes = (input.length/4) * 3;
            var ab = new ArrayBuffer(bytes);
            this.decode(input, ab);

            return ab;
        },

        removePaddingChars: function(input){
            var lkey = this._keyStr.indexOf(input.charAt(input.length - 1));
            if(lkey == 64){
                return input.substring(0,input.length - 1);
            }
            return input;
        },

        decode: function (input, arrayBuffer) {
            //get last chars to see if are valid
            input = this.removePaddingChars(input);
            input = this.removePaddingChars(input);

            var bytes = parseInt((input.length / 4) * 3, 10);

            var uarray;
            var chr1, chr2, chr3;
            var enc1, enc2, enc3, enc4;
            var i = 0;
            var j = 0;

            if (arrayBuffer)
                uarray = new Uint8Array(arrayBuffer);
            else
                uarray = new Uint8Array(bytes);

            input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

            for (i=0; i<bytes; i+=3) {
                //get the 3 octects in 4 ascii chars
                enc1 = this._keyStr.indexOf(input.charAt(j++));
                enc2 = this._keyStr.indexOf(input.charAt(j++));
                enc3 = this._keyStr.indexOf(input.charAt(j++));
                enc4 = this._keyStr.indexOf(input.charAt(j++));

                chr1 = (enc1 << 2) | (enc2 >> 4);
                chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                chr3 = ((enc3 & 3) << 6) | enc4;

                uarray[i] = chr1;
                if (enc3 != 64) uarray[i+1] = chr2;
                if (enc4 != 64) uarray[i+2] = chr3;
            }

            return uarray;
        }
    }
</script>

<script>
    var token;
    // This is called with the results from from FB.getLoginStatus().
    function statusChangeCallback(response) {
        console.log('statusChangeCallback');
        console.log(response);
        // The response object is returned with a status field that lets the
        // app know the current login status of the person.
        // Full docs on the response object can be found in the documentation
        // for FB.getLoginStatus().
        if (response.status === 'connected') {
            // Logged into your app and Facebook.
            token = response.authResponse.accessToken;
            testAPI();
        } else if (response.status === 'not_authorized') {
            // The person is logged into Facebook, but not your app.
            document.getElementById('status').innerHTML = 'Please log ' +
            'into this app.';
        } else {
            // The person is not logged into Facebook, so we're not sure if
            // they are logged into this app or not.
            document.getElementById('status').innerHTML = 'Please log ' +
            'into Facebook.';
        }
    }

    // This function is called when someone finishes with the Login
    // Button.  See the onlogin handler attached to it in the sample
    // code below.
    function checkLoginState() {
        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });
    }

    window.fbAsyncInit = function() {
        FB.init({
            appId      : '501964376623032',
            cookie     : true,  // enable cookies to allow the server to access
                                // the session
            xfbml      : true,  // parse social plugins on this page
            version    : 'v2.2' // use version 2.2
        });

        // Now that we've initialized the JavaScript SDK, we call
        // FB.getLoginStatus().  This function gets the state of the
        // person visiting this page and can return one of three states to
        // the callback you provide.  They can be:
        //
        // 1. Logged into your app ('connected')
        // 2. Logged into Facebook, but not your app ('not_authorized')
        // 3. Not logged into Facebook and can't tell if they are logged into
        //    your app or not.
        //
        // These three cases are handled in the callback function.

        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });

    };

    // Load the SDK asynchronously
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    // Here we run a very simple test of the Graph API after login is
    // successful.  See statusChangeCallback() for when this call is made.
    function testAPI() {
        console.log('Welcome!  Fetching your information.... ');
        FB.api('/me', function(response) {
            console.log('Successful login for: ' + response.name);
            document.getElementById('status').innerHTML =
                    'Thanks for logging in, ' + response.name + '!';
        });
    }

    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;
        }

        console.log(params);

    }

    function share(){
        FB.ui({
            method: 'share',
            href: 'http://quaiz.localhost/img/felix.jpg',
        }, function(response){});
    }

    var opts = {
        message : 'Photo upload',
        url : 'http://quaiz.localhost/img/felix.jpg'
    };

    var opts2 = {
        message : 'Post message',
        name : 'Test post to wall',
        link : 'http://jonmosley.co.uk',
        description : 'Description here',
        picture : 'http://static.dezeen.com/uploads/2013/03/dezeen_Sergio-concept-car-by-Pininfarina_ss_4.jpg'
    };

    function photo(){

        FB.api('/me/photos', 'post', formData, function(response)
        {
            if (!response || response.error)
            {
                console.log(response.error);
                alert('Posting error occured');
            }else{
                alert('Success - Post ID: ' + response.id);
            }
        });
    }

    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);
        };
    }

    function newteste(){
        var img = document.createElement('img');
        img.src = 'http://quaiz.localhost/img/felix.jpg';
        console.log(img.src);
        img.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img,0,0);
            var c = canvas.toDataURL('image/png');
            var encodedPng = c.substring(c.indexOf(',')+1,c.length);
            var decodedPng = Base64Binary.decode(encodedPng);

            PostImageToFacebook(token, 'shareImage.png', 'image/png', decodedPng, '');
        };
    }

    // 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(token);
        // 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 );
    }

</script>

<!--
  Below we include the Login Button social plugin. This button uses
  the JavaScript SDK to present a graphical Login button that triggers
  the FB.login() function when clicked.
-->

<fb:login-button scope="public_profile,email, user_photos, publish_actions" onlogin="checkLoginState();">
</fb:login-button>

<button type="button" onclick="newteste()">Compartilhar</button>