JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<DIV id="drop"> 
    <div class="msg-drop">
    <span class="glyphicon glyphicon-cloud-upload cloud"></span>
        Drop files here or click to <span id="browse">browse</span>.
    
    </div>
    
</DIV>
<input id="fileBox" type="file"/>    
<DIV id="status"></DIV>
<DIV id="list"></DIV>

CSS

body{
    color:#666;
}
#drop {
    border: 1px dashed #ccc;
    width: 450px;
    min-height: 35px;
    margin: 10px auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display:box;
    cursor:pointer;
}
#status {
    width:450px;
    margin: 0 auto;
}
#list {
    width:450px;
    margin: 0 auto;
}
.msg-drop{
    padding:10px;
}
.thumb {
    width:33px;
    height:33px;
    float:left;
    margin:3.5px;
    border: 1px solid #ccc;
}
.fileCont{
    display:block;
    width:425px;
    height:40px;
    margin:2.5px;
    float:left;
}
.fileSize{
   text-align:right;
    margin:2.5px;
    font-size:12px;
    padding-right: 10px;
}
.fileName{
    float:left;
    padding:2.5px;
    font-weight:700;
    text-transform: capitalize;    
}
.remove{
    width:20px;
    height:40px;
    padding-top: 13px;
    font-size: 18px;
    float:left;
}
.progress {
  height: 6px!important;
  width: 380px;
  margin-top: 5px;
}
.progress-bar {
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
}
#fileBox{
    display:none;
}

JavaScript

$(window).load(function(){
    $('#drop').click(function(){
        console.log('click');
        $('#fileBox').trigger('click');
    });
    //Remove item
    $('.fileCont span').click(function(){
        $(this).remove();
    });
});
if (window.FileReader) {
    var drop;
    addEventHandler(window, 'load', function () {
        var status = document.getElementById('status');
        drop = document.getElementById('drop');
        var list = document.getElementById('list');

        function cancel(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }

        // Tells the browser that we *can* drop on this target
        addEventHandler(drop, 'dragover', cancel);
        addEventHandler(drop, 'dragenter', cancel);

        addEventHandler(drop, 'drop', function (e) {
            e = e || window.event; // get window.event if e argument missing (in IE)   
            if (e.preventDefault) {
                e.preventDefault();
            } // stops the browser from redirecting off to the image.

            var dt = e.dataTransfer;
            var files = dt.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var reader = new FileReader();

                //attach event handlers here...

                reader.readAsDataURL(file);
                addEventHandler(reader, 'loadend', function (e, file) {
                    var bin = this.result;
                    var fileCont = document.createElement('div');
                    fileCont.className = "fileCont";
                    list.appendChild(fileCont);
                                        
                    var fileNumber = list.getElementsByTagName('img').length + 1;
                    status.innerHTML = fileNumber < files.length ? 'Loaded 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';

              ...