Uploading files using dojox.form.Uploader and FormData

Question

I am trying to upload files via XMLHttpRequest. I create a input with type set to file and get the file data using the below statement

var files = document.getElementById("fileInput").files;
var file = files[0];
var formData = new FormData();
formData.append("fileInput", file);
.
.
.
xhr.send(formData);

This works! But when using the dojox.form.Uploader I wite something like this:

var files = dijit.byId("dojoFileInput").getFileList();
var file = files[0];
var formData = new FormData();
formData.append("dojoFileInput", file);
.
.
.
xhr.send(formData);

This does not work! I cannot use the upload function of dojox.form.Uploader as I require some additional data to be sent in the FormData object. I am creating dojo file uploader using this statement

<div dojoType="dojox.form.Uploader" label="Select files..." id="dojoFileInput"></div>

I tried to print the file data in console using these statements:

console.log(document.getElementById("fileInput").files[0]); // Normal file input
var files = dijit.byId("dojoFileInput").getFileList(); // Dojo file input
console.log(files[0]);

The normal file input gives the following output (actually there is a lot more info. than this under each section but this is condensed):

File {webkitRelativePath: "", lastModifiedDate: Sat Nov 10 2012 19:42:45 GMT+0530 (India Standard Time), name: "<FILE NAME>", type: "image/png", size: 115661}
    lastModifiedDate: Sat Nov 10 2012 19:42:45 GMT+0530 (India Standard Time)
        __proto__: Invalid Date
        name: "<FILE NAME>"
        size: 115661
        type: "image/png"
        webkitRelativePath: ""
    __proto__: File
        constructor: function File() { [native code] }
        arguments: null
        caller: null
        length: 0
        name: "File"
        prototype: File
        toString: function toString() { [native code] }
        __proto__: Object
        <function scope>
    __proto__: Blob
        constructor: function Blob() { [native code] }
        slice: function slice() { [native code] }
        webkitSlice: function webkitSlice() { [native code] }
        __proto__: Object

But the Dojo file uploader only gives a single line output:

Object {index: 0, name: "<FILE NAME>", size: 115661, type: "image/png"}

Does Dojo not give the entire file details that can be sent to server? Is this the right way to send files to server using dojo file uploader? Any ideas how his can be done?

Answer 1

Uploader has a submit method that allows you to add post data.