Dojo Uploader with Drag and Drop

Question

I am trying to recreate this example in my project, to add the drag and drop feature to the dojo uploader:

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_Uploader.html

Copying the exact same code in jsfiddle or in my application the line

if(uploader.addDropTarget && uploader.uploadType=='html5'){

returns undefined for addDropTarget and iframe for the uploadType. I tried it with various browsers, and even added force: html5 in the uploader but nothing changed.

Please, note that everything works ok except from the dnd.

I am using dojo 1.8.1.

Answer 1

In dojo 1.8, the uploader is not yet fully AMD compliant. So, in order to make the example from the trunk tests work in 1.8, you need to create the uploader programmatically using the dojox.form.Uploader constructor rather the required AMD module. As follows :

<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
    <fieldset>
        <legend>DnD Test</legend>
        <input class="browseButton" id="uploader"/>
        <input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
        <div id="files" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader"' ></div>
    </fieldset>
</form>

<div id="dropTarget">Drop files here !</div>

And in the javascript :

require([
    'dojo/parser',
    'dojo/dom',
    'dijit/registry',
    'dojox/form/Uploader',
    'dojox/form/uploader/FileList',
    'dojox/form/uploader/plugins/HTML5',
    'dojo/domReady!'
], function(parser, dom, registry, ready){

    var dropTarget = dom.byId('dropTarget'), uploader;

    parser.parse().then(function(){

        // You need to use dojox.form.Uploader, as in dojo 1.8, 
        // the module is not fully AMD compliant yet.

        uploader = new dojox.form.Uploader({
            name:'uploadedfile', 
            label:'Select Some Files',
            multiple:true, 
            force:'html5'
        }, 'uploader');

        uploader.startup();

        if(require.has('file-multiple')){
            console.debug("Adding a new drop target");
            registry.byId('uploader').addDropTarget(dropTarget); 
        }
    });
});

See http://jsfiddle.net/psoares/6r2jZ/