1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
/**
* JavaScript for mod/cloud
*/
$(document).ready(function () {
// call initialization file
if (window.File && window.FileList && window.FileReader) {
DragDropUploadInit();
}
});
//
// initialize
function DragDropUploadInit() {
var fileselect = $("#fileselect"),
filedrag = $("#filedrag");
// file select
fileselect.on("change", DragDropUploadFileSelectHandler);
// is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// file drop
filedrag.on("dragover", DragDropUploadFileHover);
filedrag.on("dragleave", DragDropUploadFileHover);
filedrag.on("drop", DragDropUploadFileSelectHandler);
filedrag.show();
}
window.filesToUpload = 0;
window.fileUploadsCompleted = 0;
}
// file drag hover
function DragDropUploadFileHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
// file selection
function DragDropUploadFileSelectHandler(e) {
// cancel event and hover styling
DragDropUploadFileHover(e);
// fetch FileList object
var files = e.target.files || e.originalEvent.dataTransfer.files;
$("#file-upload-list").empty();
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
$("#file-upload-list").append(
"<p>" + "<span id='upload-progress-" + i + "'></span> -> File: <strong>" + f.name +
"</strong> type: <strong>" + f.type +
"</strong> size: <strong>" + f.size +
"</strong> bytes</p>"
);
DragDropUploadFile(f, i);
}
}
// upload files
function DragDropUploadFile(file, idx) {
window.filesToUpload = window.filesToUpload + 1;
var xhr = new XMLHttpRequest();
xhr.withCredentials = true; // Include the SESSION cookie info for authentication
(xhr.upload || xhr).addEventListener('progress', function (e) {
var done = e.position || e.loaded;
var total = e.totalSize || e.total;
// Dynamically update the percentage complete displayed in the file upload list
$('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%');
});
xhr.addEventListener('load', function (e) {
//console.log('xhr upload complete', e);
window.fileUploadsCompleted = window.fileUploadsCompleted + 1;
// When all the uploads have completed, refresh the page
if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {
window.fileUploadsCompleted = window.filesToUpload = 0;
// After uploads complete, refresh browser window to display new files
window.location.href = window.location.href;
}
});
// POST to the entire cloud path
xhr.open('post', window.location.pathname, true);
var data = new FormData(document.getElementById("ajax-upload-files"));
data.append('file[]', file);
xhr.send(data);
}
|
