CODEWITHSUNDEEP
javascripthtmlfacebook
Todd
Todd

Reputation: 1953

Submitting an image to Facebook with Javascript and HTML form

I’m going crazy with image upload to Facebook. I’ve tried HTML5 drag and drop methods, Dropzone.js, as well as uploading to my own server before submitting the image via PHP. But the only one I can make work (because of my inexperience, I’ll admit) and that doesn't involve uploading the image to my own server, is by using a HTML form as shown in the Facebook documentation:

<form id=“upload_form” enctype="multipart/form-data" action=“https://graph.facebook.com/event_id/photos?access_token=an_access_token” method="POST"> Please choose a photo <input name="source" type="file"><br/><br/> Say something about this photo: <input name="message" type="text" value=""><br/><br/> <input type="submit" value="Upload"/><br/> </form>

I dynamically generate it in Javascript and use var’s to fill in event_id and access_token.

This works fine, so all my permissions and authorising are correct. Now what I’d like to do is handle the response because the browser does as you’d expect when the user clicks submit and displays basic text showing the post id and whatnot.

So, I created a button and bound the following to it’s click event:

var fd = document.getElementById('upload_form');
if (fd) {
  console.log('Sending');
  var XHR = new XMLHttpRequest();
  XHR.addEventListener('load', function(data) {
   console.log('XHR finished:');
   console.log(data);
 });

 XHR.addEventListener('error', function(data) {
  console.log('XHR ERROR:');
  console.log(data);
 });

 var graph_url = 'https://graph.facebook.com/'+event_id+'/photos?access_token=' + access_token;
 XHR.open('POST', graph_url);
 XHR.send(fd);
}

Once the user has selected an image and clicks my button to execute the above XHR completes the send and reports as finished, but Facebook replies with:

(#324)Requires upload file.

Please can someone show me where I’ve gone wrong - it’s been a problem for days now!

Upvotes: 0

Views: 185

Answers (2)

wayne
wayne

Reputation: 3410

If you willing to use jquery and jquery.ajaxForm plugin

<!-- You form code stay Make sure your form.action url is valid ajaxForm use that as url -->

<form id=“upload_form” enctype="multipart/form-data" action=“https://graph.facebook.com/event_id/photos?access_token=an_access_token” method="POST">
Please choose a photo
<input name="source" type="file"><br/><br/>
Say something about this photo: 
<input name="message" type="text" value=""><br/><br/>
<input type="submit" value="Upload"/><br/>
</form>


//your javascript to upload the image togather with message
// put this in a button, not submit button
$('#upload_form').ajaxForm({
    complete: function(data) {
        //process fb response
    }
});

Upvotes: 1

K. Weber
K. Weber

Reputation: 2773

I suggest you use Fiddler to catch both connections, with and without XMLHttpRequest and see which is the actual difference between both request, I don't actually know what XHR.send(fd); does, but maybe it's sending the form content itself, not submitting it?

Fiddler is a very useful tool when connecting to external APIs

Upvotes: 1

Related Questions