How to upload photos on Facebook event through phonegap?

Question

I am working on Phonegap .

Right now I am using this :-

$.post("https://graph.facebook.com/"+Event_Id, { 
     "Photos":uri,
     "access_token": fbAccessToken
},
function(data){

    Some code here

}, "json");

Answer 1

I know the pain of not being able to upload a single photo. After sleepless nights and days of research, I finally got it to work with the cordova file-transfer plugin

First add the plugin: cordova plugin add org.apache.cordova.file-transfer

Then, use this code (Note that I am using angular.js. Either do not user promises or use a library like rsvp or Q to make your promises):

function postImage(fileURI, message) {

    var deferred = $q.defer();

    var win = function (r) {

        deferred.resolve(r);
    }

    var fail = function (error) {

        deferred.reject(error);
    }

    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = 'name_of_photo_' + Math.round((+(new Date()) + Math.random()));
    options.mimeType = "image/jpg";

    var params = new Object();
    params.access_token = "your facebook access token ;)";
    params.message = message;
    params.no_story = false;

    options.params = params;

    var ft = new FileTransfer();
    ft.upload(fileURI, "https://graph.facebook.com/v2.0/me/photos", win, fail, options);

    return deferred.promise;
}

Answer 2

Maybe try this method, it works for me : (imageData have to be the binary representation of your image)

function PostImageToFacebook(authToken, filename, mimeType, imageData)
{
    if (imageData != null)
    {
        //Prompt the user to enter a message
        //If the user clicks on OK button the window method prompt() will return entered value from the text box. 
        //If the user clicks on the Cancel button the window method prompt() returns null.
        var message = prompt('Facebook', 'Enter a message');

        if (message != null)
        {
            // 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() {
            };
            xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
            xhr.sendAsBinary(formData);
        }
    }
}

Hope this helps ! Bye !

Answer 3

I hope this will be useful. By doing photo upload to FB only with the help of javascript you can use the following method. Required thing here are imageData(which is base64 format of image) and the mime type.

try{
        blob = dataURItoBlob(imageData,mimeType);
}catch(e){console.log(e);}
var fd = new FormData();
fd.append("access_token",accessToken);
fd.append("source", blob);fd.append("message","Kiss");
try{
   $.ajax({
        url:"https://graph.facebook.com/" + <<userID received on getting user details>> + "/photos?access_token=" + <<user accessToken>>,
        type:"POST"
        data:fd,
        processData:false,
        contentType:false,
        cache:false,
        success:function(data){
            console.log("success " + data);
        },
        error:function(shr,status,data){
            console.log("error " + data + " Status " + shr.status);
        },
        complete:function(){
            console.log("Ajax Complete");
        }
    });

}catch(e){console.log(e);}

function dataURItoBlob(dataURI,mime) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs

    var byteString = window.atob(dataURI);

    // separate out the mime component


    // write the bytes of the string to an ArrayBuffer
    //var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var blob = new Blob([ia], { type: mime });

    return blob;
}