JSFiddle - React, Tailwind, and code Playground

by msm595

HTML

<form id="upload" action="#" method="post" enctype="multipart/form-data">
    <div id="filebox"></div>
    <input type="file" id="mainFile">
    <input type="button" value="Add">
</form>

CSS

body {
    font-family:"Trebuchet MS", sans-serif;
    font-size: 12px;
}
#filebox {
    border: 1px solid #ccc;
    width: 400px;
    height: 150px;
    position: relative;
    background-color: #ddd;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#ddd));
    background: -moz-linear-gradient(top, #eee, #ddd);
    overflow: auto;
    white-space: nowrap;
}
#scrollbar {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #555;
    height: 16px;
}
#scrollnub {
    height: 6px;
    background-color: #75BEDE;
    width: 50px;
    margin-top: 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#filebox .box {
    height: 100px;
    width: 100px;
    border: 1px solid #ccc;
    margin: 15px 0 0 12px;
    background-color: #eee;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#efefef));
    background: -moz-linear-gradient(top, #eee, #efefef);
    position: relative;
    display: inline-block;
    line-height: 100px;
    text-align: center;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
}
#filebox :last-child {
    margin-right: 12px;   
}
#filebox .overlay {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #333;
    line-height: 100px;
    text-align: center;
    color: white;
}

JavaScript

var files = [],
    filebox = $('#filebox'),
    dAD = !(typeof window.FileReader === 'undefined');

function addNew(file) {
    var fileInput,labelText;
    if(dAD && file.type != undefined) {
        if (!file.type.match(/image\/.*/)) return;
        fileInput=$(document.createElement("input")).attr({type: 'file',name:'files[]'}).css({display: 'none'});
        fileInput[0].files[0]=file;
        labelText="Loading";
        
        load(fileInput);
    } else {
        if(dAD) return addNew(file[0].files[0]);
        
        fileInput=file;
        if(!file[0].value) return;
            
        var fullPath=file[0].value;
        var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
        var filename = fullPath.substring(startIndex);
        if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
                filename = filename.substring(1);
        }
        var extension = filename.substring(filename.lastIndexOf('.'));
        
        if(['.jpg','.jpeg','.bmp','.png'].indexOf(extension)==-1) return;
            
        labelText=filename;
    }
    
    var div = $(document.createElement("div")).addClass('box').html("<span>"+labelText+"</span>").append(
        fileInput
    ).append(
        $(document.createElement('div')).addClass('overlay').css({opacity:0}).html('delete')
    ).mouseover(function() {
        $(this).children().filter('.overlay').stop().animate({opacity:.7},500);
    }).mouseout(function() {
        $(this).children().filter('.overlay').stop().animate({opacity:0},500);
    }).click(function() {
        remove($(this));
    });

    
    
    files.push({box: div, file:null});
    filebox.append(div).scrollLeft(filebox[0].scrollWidth);

}

function remove(el) {
     var i=files.indexOf(el);
    if(i!=-1) files.splice(i,1);
    
    el.remove();
}

function load(input) {
    var reader = new FileReader();
    reader.onload = (function(inp) {
        return function(e)...