JSFiddle - React, Tailwind, and code Playground

by alexjamesbrown

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <div class="container">
        <!-- The file upload form used as target for the file upload widget -->
        <form id="fileupload" action="#" method="POST" enctype="multipart/form-data">

            <div class="row files" id="files1">
                <h2>Files 1</h2>
                <span class="btn btn-default btn-file">
                    Browse  <input type="file" name="files1" multiple />
                </span>
                <br />
                <ul class="fileList"></ul>
            </div>

            <div class="row files" id="files2">
                <h2>Files 2</h2>
                <span class="btn btn-default btn-file">
                    Browse  <input type="file" name="files2" multiple />
                </span>
                <br />
                <ul class="fileList"></ul>
            </div>

            <br/>
            <br/>

            <div class="row">
                <button type="x" id="uploadBtn" class="btn primary start">Start upload</button>
            </div>

            <br>
            <div class="row">
                <div class="span16">

                    <table class="zebra-striped">
                        <tbody class="files"></tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>

CSS

body {
  padding: 20px;
}


.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

JavaScript

$.fn.fileUploader = function (filesToUpload) {
    this.closest(".files").change(function (evt) {

        for (var i = 0; i < evt.target.files.length; i++) {
            filesToUpload.push(evt.target.files[i]);
        };
        var output = [];

        for (var i = 0, f; f = evt.target.files[i]; i++) {
            var removeLink = "<a href=\"#\" data-fileid=\"" + i + "\">Remove</a>";

            output.push("<li><strong>", escape(f.name), "</strong> - ",
                f.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> ");
        }

        $(this).children(".fileList")
            .append(output.join(""));
    });
};


    var filesToUpload = [];

    $("#files1").fileUploader(filesToUpload);
    $("#files2").fileUploader(filesToUpload);

    $("#uploadBtn").click(function (e) {
        e.preventDefault();
    });