Multipage loading a binary form using casperjs outside the state machine (cannot fill)

Question

Multipage loading a binary form using casperjs outside the state machine (cannot fill)

UPDATE 1: I created a GIST with the actual executable code in a test jig to show what I came across. I turned on working bot-markers (for throwing a bot) and access to the telegram chat in which the bot is already in, in case someone wants to look quickly. it

https://gist.github.com/pleasantone/59efe5f9d7f0bf1259afa0c1ae5a05fe

UPDATE 2: I have already reviewed the following articles for answers (and another ton):

https://github.com/francois2metz/html5-formdata/blob/master/formdata.js

PhantomJS - Upload a file without submitting a form

https://groups.google.com/forum/#!topic/casperjs/CHq3ZndjV0k

How to instantiate a File object in JavaScript?

How to create a File object from binary data in JavaScript

I have a program written in casperjs (phantomjs) that successfully sends Telegram messages through the BOT API, but I pull my hair out trying to figure out how to send a photo.

I can access my photo either as a file or the local file system, or I already got it as a base64 encoded encoding (this is a screen capture in the cache).

I know that my photo is good, because I can publish it through CURL using:

curl -X POST "https://api.telegram.org/bot<token>/sendPhoto" -F chat_id=<id> -F photo=@/tmp/photo.png

I know that my code for connecting to the api bot from inside capserjs works, since I can do sendMessage, not sendPhoto.

function sendMultipartResponse(url, params) {
    var boundary = '-------------------' + Math.floor(Math.random() * Math.pow(10, 8));
    var content = [];

    for (var index in params) {
        content.push('--' + boundary + '\r\n');
        var mimeHeader = 'Content-Disposition: form-data; name="' + index + '";';
        if (params[index].filename)
            mimeHeader += ' filename="' + params[index].filename + '";';
        content.push(mimeHeader + '\r\n');
        if (params[index].type)
            content.push('Content-Type: ' + params[index].type + '\r\n');
        var data = params[index].content || params[index];
//        if (data.length !== undefined)
//            content.push('Content-Length: ' + data.length + '\r\n');
        content.push('' + '\r\n');
        content.push(data + '\r\n');
    };

    content.push('--' + boundary + '--' + '\r\n');
    utils.dump(content);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, false);

    if (true) {
        /*
         * Heck, try making the whole thing a Blob to avoid string conversions
         */
        body = new Blob(content, {type: "multipart/form-data; boundary=" + boundary});
        utils.dump(body);
    } else {
        /*
         * this didn't work either, but both work perfectly for sendMessage
         */
        body = content.join('');
        xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
//        xhr.setRequestHeader("Content-Length", body.length);
    }

    xhr.send(body);
    casper.log(xhr.responseText, 'error');
};