Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<button class="btn btn-primary btn btn-xs" id="openUpload" style="background-color:#3399FF;color:#FFFFFF">
  <span class="glyphicon glyphicon-chevron-up"></span>Importar</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 col-md-12" id="modal-body">
        <div id="upload" class="row">
          <div class="col-md-12">
            <div id="drop">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
                <input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
                <span class="input-group-btn">
                                                <button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
                                            </span>
              </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 class="glyphicon glyphicon-upload"></i><span>Clear upload</span>

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

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */
$(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>' +
          '<div class="actions-col">' +
          '<button class="btn btn-xs btn-danger cancel removeFile" data-toggle="tooltip" data-placement="left" title=""...