Upload multiple photos in batch to Facebook using Javascript SDK

Question

I can upload single photos via URL to Facebook, but I'm having trouble doing it using batch. I'm getting the (#324) Requires Upload File uncaught exception. I'm ensuring the user is logged in and when I look at the batch payload (batchJson) it looks okay.

To be clear, if I remove all the batch-related setup code and in the FB.api call replace "batch" : batchJson with a single "url": photoUrl the code works.

Here's my code. TIA for any insight on my error:

var message = $("#message-fb").val();
var batchItems = [];
var photoUrl = "";

$(".photo-selected").each(function () {        
    photoUrl = $(this).data('content');
    item = {};
    item['method'] = 'POST';
    item['relative_url'] = 'me/photos';
    item['url'] = encodeURI(photoUrl);
    item['caption'] = message;        
    batchItems.push(item);
});
batchJson = JSON.stringify(batchItems);

alert(batchJson);

FB.getLoginStatus(function (response) {
    if (response.status === 'connected') {
        // Already logged in and authorized
        FB.api(
            "/",
            "POST",
            {
                "batch": batchJson
            },
            function (response) {
                if (response && !response.error) {
                    /* successful upload */
                    alert('Photos uploaded to Facebook (nl) - ' + JSON.stringify(response));
                }
                if (response && response.error) {
                    /* Provide error info during testing */
                    alert('Sorry, there was a problem uploading your photo to Facebook - ' + JSON.stringify(response));
                }
            });
    } else {
        // Need to login and authorize
        FB.login(function () {
            FB.api(
                "/",
                "POST",
                {
                    'batch': batchJson
                },
                function (response) {
                    if (response && !response.error) {
                        /* successful upload */
                        alert('Photos uploaded to Facebook - ' + JSON.stringify(response));
                    }
                    if (response && response.error) {
                        /* Provide error info during testing */                            
                        alert('Sorry, there was a problem uploading your photo to Facebook - ' + JSON.stringify(response));
                    }
                });
        }, { scope: 'publish_actions' });
    }
});

EDIT: Here are the relevant changes using @CBroe's answer:

$(".photo-selected").each(function () {        
    var photoUrl = $(this).data('content');
    var item = {};
    item['method'] = 'POST';
    item['relative_url'] = 'me/photos';
    var itemUrl = encodeURI(photoUrl);
    var itemCaption = encodeURIComponent(message);
    item['body'] = "caption=" + itemCaption + "&url=" + itemUrl;
    batchItems.push(item);
});
batchJson = JSON.stringify(batchItems);

Answer 1

You are sending url and caption parameters on the same “level” as the method and relative_url – they need to be put inside a body property however. And the content of that field has to be encoded the same way an actual POST request via a form would be encoded (so like a URL query string, param1=value1&param2=value2).