Question

183

Facebook Graph API - upload photo using JavaScript

rated 0 times [ 184] [ 1] / answers: 1 / hits: 84965 / 14 Years ago, tue, february 15, 2011, 12:00:00

Is it possible to upload a file using the Facebook Graph API using javascript, I feel like I'm close. I'm using the following JavaScript

var params = {};

params['message'] = 'PicRolled';

params['source'] = '@'+path;

params['access_token'] = access_token;

params['upload file'] = true;



function saveImage() {

    FB.api('/me/photos', 'post', params, function(response) {

        if (!response || response.error) {

            alert(response);

        } else {

            alert('Published to stream - you might want to delete it now!');

        }

    }); 

}

Upon running this I receive the following error...

OAuthException - (#324) Requires upload file

When I try and research this method all I can find out about is a php method that apears to solve this

$facebook->setFileUploadSupport(true);

However, I am using JavaScript, it looks like this method might be to do with Facebook Graph permissions, but I already have set the permissions user_photos and publish_stream, which I believed are the only ones I should need to perform this operation.

I have seen a couple of unanswered questions regarding this on stackoverflow, hopefully I can explained myself enough. Thanks guys.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jennie

Add To Favorites

Follow

Total Points: 593

Total Questions: 102

Total Answers: 106

Location: Federated States of Micronesia

Member since Fri, Sep 16, 2022

2 Years ago

jennie questions

1 Is there a React equivalent of Vue's nextTick() function?

Tue, Jun 21, 22, 00:00, 2 Years ago

1 how to loop to expect a list of item in jest

Tue, Feb 8, 22, 00:00, 2 Years ago

1 arrow function expected no return value with clean-up function in useEffect

Sun, May 23, 21, 00:00, 3 Years ago

1 React Re-Render Causes Flickering : How can i fix this?

Thu, Mar 4, 21, 00:00, 3 Years ago

1 React onChange not working for input inside functional component

Thu, Feb 25, 21, 00:00, 3 Years ago

View All

answered 14 Years ago ross · Accepted Answer

EDIT: this answer is (now) largely irrelevant. If your image is on the web, just specify the url param as per the API (and see examples in other answers). If you would like to POST the image content to facebook directly, you may want to read this answer to gain understanding. Also see HTML5's Canvas.toDataUrl().

The API says: To publish a photo, issue a POST request with the photo file attachment as multipart/form-data.

FB is expecting that the bytes of the image to be uploaded are in the body of the HTTP request, but they're not there. Or to look at it another way - where in the FB.api() call are you supplying the actual contents of the image itself?

The FB.api() API is poorly documented, and doesn't supply an example of an HTTP POST which includes a body. One might infer from the absence of such an example that it doesn't support this.

That's probably OK - FB.api() is using something called XmlHttpRequest under the covers which does support including a body ... look it up in your favourite JavaScript reference.

However, you'll still have 2 sub-problems to solve:

how to prepare the image bytes (and rest of the request) as multipart/form-data; and

getting the bytes of the image itself

(incidentally, the need to encode the message body is probably what the PHP setFileUploadSupport(true) method is for - tell the facebook object to encode the message body as multipart/form-data before sending)

But it's a bit meessier than that

Unfortunately, sub-problem '2' may bite you - there is no way (last time I looked) to extract the bytes of an image from the browser-supplied Image object.

If the image to be uploaded is accessible via a URL, you could fetch the bytes with XmlHttpRequest. Not too bad.

If the image is coming from the user's desktop, your probable recourse is to offer the user a:

 <form enctype=multipart/form-data>

     <input type=filename name=myfile.jpg />

     <input type=hidden name=source [email protected]/>

     <input type=hidden name=message value=My Message/>

     <input type=hidden name=access_token value=.../> 

 </form>

(notice that source references the name given to the file-upload widget)

... and hope that FB anticipated receiving the data in this manner (try it with a static HTML form first, before coding it up dynamically in JS). One might infer that in fact it would, since they don't offer another means of doing it.