Отправка изображения в Facebook с Javascript и HTML-формой

Question

Отправка изображения в Facebook с Javascript и HTML-формой

0

Im сходит с ума при загрузке изображения на Facebook. Я попробовал методы перетаскивания HTML5, Dropzone.js, а также загрузку на свой собственный сервер перед отправкой изображения через PHP. Но единственное, что я могу сделать для работы (из-за моей неопытности, признаю я), и что это не связано с загрузкой изображения на мой собственный сервер, - это использовать форму HTML, как показано в документации на Facebook:

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

Я динамически генерирую его в Javascript и использую var для заполнения event_id и access_token.

Это прекрасно работает, поэтому все мои разрешения и авторизация верны. Теперь, что Id нравится делать, это обработать ответ, потому что браузер делает так, как ожидал пользователь, когда пользователь нажимает submit и отображает основной текст, отображающий идентификатор сообщения и еще что-то.

Итак, я создал кнопку и связал следующее с событием click:

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

После того как пользователь выбрал изображение и щелкнул мою кнопку для выполнения вышеуказанного XHR завершает отправку и отчеты как завершенные, но Facebook отвечает:

(#324)Requires upload file.

Пожалуйста, может кто-нибудь показать мне, где я пошла не так - это проблема уже несколько дней!

Todd 26 март 2014, в 16:37

Источник

Теги:

javascript

html

facebook

2 ответа

1

Я предлагаю вам использовать Fiddler, чтобы поймать оба соединения, с XMLHttpRequest и без него и посмотреть, какая фактическая разница между обоими запросами, я действительно не знаю, что XHR.send(fd); но может быть, он отправляет сам контент формы, а не отправляет его?

Fiddler - очень полезный инструмент при подключении к внешним API

K. Weber 26 март 2014, в 13:44

0

Спасибо, я попробую.
Todd 26 март 2014, в 15:26
0

У меня никогда не было возможности попробовать Fiddle, но вы почти наверняка были правы относительно того, что на самом деле происходит, когда нажимается мой код кнопки.
Todd 27 март 2014, в 10:52

Ещё вопросы

У меня никогда не было возможности попробовать Fiddle, но вы почти наверняка были правы относительно того, что на самом деле происходит, когда нажимается мой код кнопки.

wayne · Accepted Answer · 2014-03-26T14-34-00.000Z

Если вы хотите использовать jquery и jquery.ajaxForm плагин

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

Спасибо Уэйн, извиняюсь за поздний ответ. Я попробую ваше предложение, как только смогу.
Это тот самый Уэйн! Работает впервые.