Upload an image file using the request object

Question

In the Firefox extension I am currently developing, I've been trying for days now to upload an image file to a server using the request module of the Firefox Add-on SDK. I managed to upload a text file but I cannot upload any other kind of files. My final goal is to upload a screenshot so I really need to be able to upload an image. Here is my current code:

params= file.read("C:\\FullPath\h3nf5v2c.png", "b");

//multipart form data
boundary = "---------------------------132611019532525";
var snapShotUpload = Request({
    url : "https://myurl.com",
        headers : {
        "Referer" : "https://myurl.com",
    "Content-Type" : "multipart/form-data; boundary=" + boundary,
    },
    content :  "--" + boundary + "\r\n" + "Content-Disposition: form-data; name='Upload_FileName'; filename='h3nf5v2c.png'\r\nContent-Type: application/octet-stream\r\n\r\n" + params + "\r\n--" + boundary + "--\r\n",                          
    onComplete: function(response) {
        console.log(response.text);
    }                        
});
console.log("request built");
snapShotUpload.post();      

The uploaded image is corrupted and I can't read it.

So my question is:
How do I post an image using the request module of the Firefox Add-on SDK?

Answer 1

Thank you Wladimir,

I didn't actually modify the Request module but simply used an XMLHttpRequest instead. Here is the code I used if anybody is interested:

function sendImage(file){
        fName = "h3nf5v2c.png";

    // prepare the MIME POST data
    var boundaryString = '---------------------------132611019532525';
    var boundary = '--' + boundaryString;
    var requestbody = boundary + '\r\n'
            + 'Content-Disposition: form-data; name="Upload_FileName"; filename="'
            + fName + '"' + '\r\n'
            + 'Content-Type: image/png' + '\r\n'
            + '\r\n'
            + file.read()
            + '\r\n'
            + boundary + '--\r\n';

    // Send
    var http_request = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
            .createInstance(Components.interfaces.nsIXMLHttpRequest);

    http_request.onreadystatechange = function() {
        if (http_request.readyState == 4 && http_request.status == 200) {
            console.log(http_request.responseText);
        }
    };

    http_request.open('POST', 'http://myUrl.com', true);
    http_request.setRequestHeader("Referer", "http://myUrl.com");                  
    http_request.setRequestHeader("Content-type", "multipart/form-data; boundary=" + boundaryString);
    //http_request.setRequestHeader("Connection", "close");
    http_request.setRequestHeader("Content-length", requestbody.length);
    http_request.sendAsBinary(requestbody);    

}

The file parameter of the function is a file object from the file module.

The sendAsBinary function at the end is very important because I'm working client side only and I had to simulate an insert via a form. If you have access to the server side, sending a base64 encoded version of the image and decoding it server-side is probably simpler.