JSFiddle - React, Tailwind, and code Playground

by dbjdbj

HTML

<input multiple type="file" id="input" />
    <hr/>
<button id="btn">Click Here</button>
<ol id="out"></ol>

CSS

html,body { font:large/1.5 "courier new", monospace; }
input, button { width: 50mm; margin:3mm; padding:1mm; }

JavaScript

function out(s_) {
    $("#out").append("<li>" + s_ + "</li>");
}
/* functional mumbo jumbo ... just adore these  ... */
var TheThing = (function (cnt_) {
    return function TheThing ( payload ) {
        return {
            oid: cnt_++,
            data : null ,
            activate: function () {
                this.data = payload ;
                out("TheThing [ " + this.oid + " ] is activated<br/>with this payload: " + JSON.stringify(this.data) + "<hr/>");
            }
        };
    }
}(1));

var things = [] ; // [TheThing(), TheThing(), TheThing()];
out("things :: " + JSON.stringify(things));

var button = $("#btn")[0];
button.addEventListener("click", function () {
    things.forEach(function (e) {
        e.activate()
    });
});

var inputElement = $("input");
var handleFiles = function ( evt ) {
  var j = 0 , fileList = this.files; /* now we can work with the file list */
    while( fileList[j]){ things.push( TheThing( fileList[j++] ) ) };
    out("Copied File list to things container.. ");
}
inputElement.on("change", handleFiles );