File Upload and Bootstrap

by Tomasz

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://blueimp.github.io/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.knob/1.2.2/jquery.knob.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-process.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-validate.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-ui.js"></script>
<button class="btn btn-primary btn-lg" id="openUpload">Upload Files</button>
<div class="modal" id="uploadModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" style="overflow: hidden">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Add new file</h4>

            </div>
            <div class="modal-body" id="modal-body">
                <div id="upload">
                    <div id="drop">Drop files here<a>Browse</a>

                        <input type="file" name="upl" multiple="multiple" />
                    </div>
                    <div class="fileupload-buttonbar">
                        <div>
                            <button type="submit" class="btn btn-success start"> <i class="glyphicon glyphicon-upload"></i><span>Start upload</span>

                            </button>
                            <button type="reset" class="btn btn-warning cancel"> <i...

CSS

#uploadModal {
    min-width: 600px;
}
.upload-file .start {
    display: none;
}
.modal-footer, .modal-header {
    padding: 10px;
}
.modal-header .close {
    margin-top: 3px;
}
ol.upload-files-list {
    /*border: 1px solid #b9b9b9;*/
    margin: 0;
    padding: 0 10px 10px 10px;
    border-left: none;
    border-right: none;
    overflow: hidden;
}
ol.upload-files-list .upload-file:last-child {
    border-bottom: 1px solid #ddd;
}
ol.upload-files-list .upload-file.template-download .error-col {
    float: right;
``}
ol.upload-files-list .upload-file.template-upload .error-col {
    float: left;
}
ol.upload-files-list .upload-file.template-upload .filesize-col{
    float: left;
    padding-right: 5px;
    padding-left: 5px;
    width: 80px;
}
ol.upload-files-list .upload-file {
    list-style: none;
    position: relative;
    margin: 0;
    height: 35px;
    line-height: 35px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    vertical-align: bottom;
}
ol.upload-files-list .upload-file .upload-file-info {
    vertical-align: baseline;
    border-collapse: collapse;
    /*width: 100%;*/
    height: 35px;
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
}
ol.upload-files-list .upload-file .upload-progress-bar {
    height: 33px;
    padding: 0;
    margin: 0;
}
.upload-file.complete .upload-progress-bar {
    background-color: #ebffd9;
}
.upload-file.error .upload-progress-bar {
    background-color: #FD9F9F;
}
.upload-file .upload-progress-bar {
    border-radius: 0;
    background-color: #e9f4ff;
}
.upload-files-list .upload-file .upload-file-info .filename-col {
    float: left;
    width: 310px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-files-list .upload-file .upload-file-info div {
    display: block;
}
.upload-files-list .upload-file .upload-file-info .status-col {
    float: right;
    
}
.upload-files-list .upload-file .upload-file-info...

JavaScript

$(function () {
    var ol = $('#upload ol');
    $('#drop a').click(function () {
        $(this).parent().find('input').click();
    });
    $('body').on('click', '#openUpload', function (e) {
        e.preventDefault();
        $('#upload ol').empty();
        $('#uploadModal').modal('show');
    });


    $('#upload').fileupload({
        messages: {
            maxFileSize: "File is too big",
            minFileSize: "File is too small",
            acceptFileTypes: "Filetype not allowed",
            maxNumberOfFiles: "Too many files",
            uploadedBytes: "Uploaded bytes exceed file size",
            emptyResult: "Empty file upload result"
        },
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        //url: 'AJAX.ashx',
        url: 'http://jquery-file-upload.appspot.com/',
        dataType: 'json',
        disableImageLoad: true,
        headers: {
            Accept: "application/json"
        },
        accept: 'application/json',
        maxFileSize: 10000000, //5mb
        maxNumberOfFiles: 5,
        sequentialUploads: true,
        //singleFileUploads: false,
        //resizeMaxWidth: 1920,
        //resizeMaxHeight: 1200,
        //acceptFileTypes: /(.|\/)(gif|jpe?g|png|pdf)$/i,
        uploadTemplateId: null,
        downloadTemplateId: null,
        uploadTemplate: function (o) {
            var rows = $();
            $.each(o.files, function (index, file) {
                var row = $('<li class="template-upload fade upload-file">' +
                    '<div class="upload-progress-bar progress" style="width: 0%;"></div>' +
                    '<div class="upload-file-info">' +
                    '<div class="filename-col"><span class="filename"></span></div>' +
                    '<div class="filesize-col"><span class="size"></span></div>' +
                    '<div class="error-col"><span class="error field-validation-error"></span></div>' +
                   ...