XmlHttpRequest corrupts headers in Firefox 3.6 with "Content-Type:multipart/form-data"

Question

I'm working on "multiple ajax uloader". Works fine in bleeding edge browsers (Chrome 6, Firefox 4). But in Firefox 3.6 I must manualy create output string to be sended, cos this browser doesn't support FormData object.

I followed many tutorial, especialy this. Author notify about correct setup of headers & content of body to be sended. I carefully followed that advises, but Firefox 3.6 fail my efforts.

This is correct setup of headers and body (captured by submitting simple static form): correct headers, correct body

This is what I get, when I use Firefox's xhr object to submit same data: wrong headers, wrong body

As you can see xhr's headers are corrupted. This lead in total failure of file upload. Here is a code I use:

function generateBoundary()
{
    var chars = '0123456789',
        out   = '';

    for( var i = 0, len = chars.length; i < 30; i++) {
       out += chars[Math.floor(Math.random()*len)];
    }

    return '----' + out;
}

function getMultipartFd(file, boundary)
{
    var rn   = '\r\n',
        body = '';

    body  = boundary + rn;
    body += 'Content-Disposition: form-data; name="Files[]"; filename="' + file.name + '"' + rn;
    body += 'Content-Type: ' + file.type + rn + rn;
    body += file.getAsBinary() + rn;

    return body;
}

$(function(){

    $startUpload.click(function(){
        var url      = $uploadForm.attr('action'),
            xhr      = new XMLHttpRequest(),
            boundary = generateBoundary(),
            file     = null,
            body     = '';

        file = $SOME_ELEMENT_WITH_ATTACHED_FILE.file;
        body = getMultipartFd(file, boundary);

console.info(file);
console.info(body);

        xhr.upload.onload = function(){
            console.info('done');
        };

        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
        xhr.sendAsBinary(body + boundary + '--' + '\r\n');
        return false;
    });

});

Here is also a dump of file and body variables: dump file, dump body

Have anybody any idea, why xhr is corrupting headers this way?

Answer 1

I was scoping problem. I tried to use code in fresh Firefox installation under WinXP (my primary system is Arch Linux). Problem remains. I found that Mozilla's xhr has additional property called 'multipart'. With this set to true, headers is OK, but my xhr.events aren't fired - JS crash after sending file.

I scoped bit more deep with Firebug's JS debugger and found, that after xhr.multipart = true; code jumps into deep waters of jQuery library, where strange things happens around some curious events.

Even more curiou is that headers/content seems to be right in Firebug's console, but in HttpFox extension, it is corrupted.