1if (window.File && window.FileList) {
 2  var form = $("#form-upload");
 3  form.upload_zone = $("#upload-zone");
 4  form.input_file = $("#fileselect"); 
 5  form.file_list = $("#filelist"); 
 6  form.upload_zone.files = new Array();
 7  form.upload_btn = $("#upload-btn");
 8  form.clear_btn = $("#clear-btn");
 9  form.submit (function (e) {
10    e.preventDefault();
11    
12    // generate formdata to upload
13    var file_data = new FormData(form);
14    for (var i=0, file; file=form.upload_zone.files[i]; i++){
15      file_data.append("fileselect" + i.toString(), file);
16    }
17    
18    // send formdata to server
19    var request = new XMLHttpRequest();
20    request.open ($(this).attr("method"), $(this).attr("action"), true);
21    request.onload = function(oEvent) {
22      if (request.status == 200) {
23        form.upload_zone.innerHTML = "Uploaded!";
24      } else {
25        form.upload_zone.innerHTML = "Error " + request.status + " occurred uploading your file.<br \/>";
26      }
27    };       
28    request.send(file_data);
29    cleanSlate();
30  }); 
31
32  // fresh upload page
33  var cleanSlate = function () {
34    form.file_list.empty();
35    form.input_file.replaceWith ( form.input_file = form.input_file.clone(true) );
36    form.upload_zone.files.length = 0;
37    form.upload_btn.prop('disabled', true);
38    form.clear_btn.prop('disabled', true);
39  }  
40  // manage meta-file array
41  var handleFiles = function (files) {
42    for (var i=0, file; file=files[i]; i++){
43      form.upload_zone.files.push (file);
44      form.file_list.append ("<li class='list-group-item'>"+file.name+"\t"+file.size+"B "+"</li>");
45    }
46    form.upload_btn.prop('disabled', false);
47    form.clear_btn.prop('disabled', false);
48  } // end handleFiles
49
50  // watch for changes in form-input-file element
51  form.input_file.change (function (event) { 
52    handleFiles (form.input_file[0].files); // jquery get to FileList at [0]
53  });
54  
55  // open input-file-multiple dialogue
56  form.upload_zone.click (function (event) {
57    form.input_file.focus();
58    form.input_file.click();
59  });
60
61  form.clear_btn.click (function(e) {
62    cleanSlate();
63  });
64
65} // end upload jquery functions
66
67$(document).on ('dragstart dragenter dragover', function (e) {
68  if ($.inArray('Files', e.originalEvent.dataTransfer.types) > -1) {
69    e.stopPropagation();
70    e.preventDefault();
71    $('#upload-zone').css('border', '2px dashed #0B85A1');
72  }
73});
74
75$(document).on ('dragleave dragged', function (e) {
76    e.stopPropagation();
77    e.preventDefault();
78    $('#upload-zone').css('border', '');
79});
80
81 $(document).on ('drop', function (e) {
82    e.stopPropagation();
83    e.preventDefault();
84    $('#upload-zone').css('border', '');
85    if (e.target.id =='upload-zone' || $(e.target).parent().is('#upload-zone')){
86      handleFiles(e.originalEvent.dataTransfer.files);
87    }
88});
89
90
91