JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/tundra/tundra.css">
<script src="https://raw.github.com/moxiecode/moxie/master/bin/js/moxie.min.js"></script>
<script src="https://raw.github.com/moxiecode/plupload/master/src/plupload.js"></script>
<body class="tundra">
<div id="borderContainer" style="display:none;">
<div id="leftPane">
<div id="actionPane">
<div id="adminActions" style="display:none">
<button id="importUsers" style="display:none">Import Users</button>
</div>
</div>
</div>
<div id="mainPane"></div>
<div id="footerPane">
</div>
</div>
</body>
CSS
html, body {
font:90% helvetica, arial, sans-serif;
height:100%;
margin:0;
overflow:hidden;
width:100%
}
#borderContainer {
height:100%;
width:100%
}
#leftPane {
width:150px
}
#footerPane {
border:hidden;
font-size:0.9em;
height:55px;
padding-top:8px;
text-align:center
}
#mainPane {
height:100%;
width:100%
}
#loader {
background:#fff url('//ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/image/resources/images/loading.gif') no-repeat center center;
height:32px
}
JavaScript
require(["dijit/layout/BorderContainer", "dijit/layout/AccordionContainer",
"dijit/layout/ContentPane", "dojo/ready", "dojo/dom-construct",
"dijit/form/Button", "dojo/_base/array", "dojo/sniff", "dijit/Tooltip"
], function (BorderContainer, AccordionContainer, ContentPane, ready, construct,
Button, array, sniff, Tooltip) {
ready(function () {
var statusTable, button = new Button({}, 'importUsers'),
uploader = new plupload.Uploader({
runtimes: 'html4',
browse_button: button.domNode,
max_file_size: '10mb',
max_file_count: 50,
url: 'http://www.plupload.com/upload.php',
unique_names: false,
filters: [{
title: 'JSON files',
extensions: 'json'
}
]
});
uploader.bind('FilesAdded', function (up, files) {
var html = '<table>';
array.forEach(files, function (file) {
html += '<tr id="row' + file.id + '"><td>' + file.name +
'</td></tr>';
});
html += '<tr><td><div id="loader"></div></td></tr></table>';
statusTable = construct.create('div', {
innerHTML: html
}, 'adminActions');
setTimeout(function () {
uploader.start();
}, 500);
});
uploader.bind('Error', function (up, e) {
up.stop();
construct.destroy(statusTable);
construct.create('div', {
innerHTML: 'Upload failed. ' + (sniff('ie') ? e.details :
'Response code = ' + e.status) + '. ' + e.message + (e.file ?
' File: ' + e.file.name : '')
}, 'mainPane', 'only');
});
uploader.bind('FileUploaded', function (up, file, response) {
construct.create('div', {
...