Multiple sectioned file upload with remove file from upload queue

A page where you can upload files in different sections Ability to remove files from upload queue before sending

by alexjamesbrown

HTML

<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>

            <div class="row files" id="files3">
                <h2>Files 2</h2>
                <span class="btn btn-default btn-file">
                    Browse  <input type="file" name="files3" 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, sectionIdentifier) {
    var fileIdCounter = 0;

    this.closest(".files").change(function (evt) {
        var output = [];

        for (var i = 0; i < evt.target.files.length; i++) {
            fileIdCounter++;
            var file = evt.target.files[i];
            var fileId = sectionIdentifier + fileIdCounter;

            filesToUpload.push({
                id: fileId,
                file: file
            });

            var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + fileId + "\">Remove</a>";

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

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

        //reset the input to null - nice little chrome bug!
        evt.target.value = null;
    });

    $(this).on("click", ".removeFile", function (e) {
        e.preventDefault();

        var fileId = $(this).parent().children("a").data("fileid");

        // loop through the files array and check if the name of that file matches FileName
        // and get the index of the match
        for (var i = 0; i < filesToUpload.length; ++i) {
            if (filesToUpload[i].id === fileId)
                filesToUpload.splice(i, 1);
        }

        $(this).parent().remove();
    });

    this.clear = function () {
        for (var i = 0; i < filesToUpload.length; ++i) {
            if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
                filesToUpload.splice(i, 1);
        }

        $(this).children(".fileList").empty();
    }

    return this;
};

(function () {
    var filesToUpload = [];

    var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");
    var files2Uploader = $("#files2").fileUploader(filesToUpload, "files2");
    var files3Uploader = $("#files3").fileUploader(filesToUpload, "files3");

    $("#uploadBtn").click(function (e)...