jQuery-File-Upload Test

using blueimp's jQuery-File-Upload git here https://github.com/blueimp/jQuery-File-Upload

HTML

<script src="https://rawgit.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
<script src="https://rawgit.com/blueimp/jQuery-File-Upload/master/js/jquery.iframe-transport.js"></script>
<script src="https://rawgit.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>
<link rel="stylesheet" href="https://rawgit.com/olton/Metro-UI-CSS/master/css/metro-bootstrap.css">
<link rel="stylesheet" href="https://rawgit.com/olton/Metro-UI-CSS/master/docs/css/iconFont.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="body">
  <h4 class="title">jQuery File Upload Demo</h4>
  <p class="text-center">
    With Auto Clear Feature that clear all previous selected files when browing new files<br/>
  </p>
  <strong>To Test Just follow the instructions below:</strong>
  <ol>
    <li>Browse And Select All Files You Wan't</li>
    <li>Browse And Select All Files You Wan't to upload</li>
    <li>Click Start Upload</li>
    <li>
      You will see that only the second step 2 files are showed on
      <strong>All Uploaded Files</strong> Table
    </li>
  </ol>
  <form id="fileupload" action="/echo/jsonp/" method="POST" enctype="multipart/form-data">
      <div id="dropzone">Drop your files here or click here to browse!</div>
      <input type="file" multiple="" name="files[]" id="inputFile" class="hide"/>
      <input id="start" class="btn btn-primary" type="button" value="Start upload" />
      <input id="cancel" class="btn btn-warning" type="reset" value="Cancel upload" />
  </form>

  <h4>All Selected Files by library</h4>
  <table class="table">
    <thead>
      <tr><th>File Name</th><th>Size</th><th></th></tr>
    </thead>
    <tbody id="allSelectedFiles">

    </tbody>
    <tfoot><tr><td id="result"></td><td></td><td></td></tr></tfoot>
  </table>

  <h4>All Uploaded Files</h4>
   <table class="table">
     <thead>
       <tr><th>File...

CSS

.body{padding-left:30px}
.title{text-align: center;}
#dropzone{width: 100%; height: 100px; border: 2px solid green; text-align: center; line-height: 100px; margin-bottom: 20px;cursor:pointer}
th, td {width: 30%;}

JavaScript

$('#dropzone').on('click',function(){
	$('#inputFile').trigger('click');
});

$('#fileupload').fileupload({
    dataType: 'json',
    dropZone: $('#dropzone'),
    add: function (e, data) { 
    		if(data.files.length > 0) {
          var table= $('#allSelectedFiles');
          table.show();
          var tpl = $('<tr class="file">' +
                      '<td class="fname"></td>' +
                      '<td class="fsize"></td>' +
                      '<td class="fact">' +
                      '</td></tr>');
          tpl.find('.fname').text(data.files[0].name);
          tpl.find('.fsize').text(data.files[0].size);
          data.context = tpl.appendTo('#allSelectedFiles');
        }
    
    
        $('#start').click(function () {
            var table= $('#uploadedFilesTable');
            table.html('');
            if(data.files.length > 0) {
              table.show();
              var tpl = $('<tr class="file">' +
                          '<td class="fname"></td>' +
                          '<td class="fsize"></td>' +
                          '<td class="fact">' +
                          '</td></tr>');
              tpl.find('.fname').text(data.files[0].name);
              tpl.find('.fsize').text(data.files[0].size);
              data.context = tpl.appendTo('#uploadedFilesTable');
            }
        });
        $('#cancel').click(function () {
            data.files.splice(0); // Clear All Existing Files
        });
        
        $('#inputFile').on('change',function(){
        	data.files.splice(0); // Clear All Existing Files
        })
    },
    done: function (e, data) {
        $('#result').val('Upload finished.');            
    },
    error: function (jqXHR, textStatus, errorThrown) {
        if (errorThrown === 'abort') {
            $('#result').val('File Upload has been canceled.');
        }
    }
});