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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
{% set prefix_s = prefix | trim('/') ~ '/' %}{% set s_prefix_s = ( '/' ~ prefix | trim('/') ~ '/' ) | replace ("//","/") %}{% set ulp_s = ulp | trim('/') ~ '/' %}{% set server_prefix = ( server | replace("//","##") ~ '/' ~ prefix ~ '/' ) | replace("///","/") | replace("//", "/") | replace("##","//") %}{% set prefix_ulp = ( '/' ~ prefix ~ '/' ~ ulp ~ '/' ) | replace("///","/") | replace("//", "/") %}{% set server_prefix_ulp = ( server | replace("//","##") ~ '/' ~ prefix ~ '/' ~ ulp ~ '/' ) | replace("///","/") | replace("//", "/") | replace("##","//") %}
/* vim:set syntax=javascript ts=2 sw=2 sts=2 et: */
var ddup = {
// (A) ON PAGE LOAD
hzone: null, // HTML upload zone
hstat: null, // HTML upload status
hform: null, // HTML upload form
hiddenfirst: null,
init : function () {
// (A1) GET HTML ELEMENTS
ddup.hzone = document.getElementById("upzone");
ddup.hstat = document.getElementById("upstat");
ddup.hform = document.getElementById("upform");
ddup.hiddenfirst = document.getElementById("hiddenfirst");
// (A2) DRAG-DROP SUPPORTED
if (window.File && window.FileReader && window.FileList && window.Blob) {
// HIGHLIGHT DROPZONE ON FILE HOVER
ddup.hzone.addEventListener("dragenter", function (e) {
e.preventDefault();
e.stopPropagation();
ddup.hzone.classList.add('highlight');
ddup.hzone.innerHTML = "Release to upload";
});
ddup.hzone.addEventListener("dragleave", function (e) {
e.preventDefault();
e.stopPropagation();
ddup.hzone.classList.remove('highlight');
ddup.hzone.innerHTML = "Drop Files Here";
});
// DROP TO UPLOAD FILE
ddup.hzone.addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
});
ddup.hzone.addEventListener("drop", function (e) {
e.preventDefault();
e.stopPropagation();
ddup.hzone.classList.remove('highlight');
ddup.hiddenfirst.style.display = "block" ;
if (e.dataTransfer.files.length > 0) {
ddup.hzone.classList.add('processing');
ddup.hzone.innerHTML = "Uploading...";
ddup.queue(e.dataTransfer.files);
} else {
ddup.hzone.classList.add('invalid');
ddup.hzone.innerHTML = "Input is not recognized!";
ddup.reset_text_timer(1500);
}
});
}
// (A3) DRAG-DROP UPLOAD NOT SUPPORTED
else {
ddup.hzone.style.display = "none";
ddup.hform.style.display = "block";
}
},
// (B) UPLOAD QUEUE + HANDLER
// NOTE: AJAX IS ASYNCHRONOUS
// A QUEUE IS REQUIRED TO STOP SERVER FLOOD
upqueue : [], // upload queue
uplock : false, // currently uploading a file
queue : function (files) {
// FILE LIST INTO QUEUE
for (let f of files) {
// OPTIONAL - SHOW UPLOAD STATUS
ddup.thisdiv = document.getElementById(f.name);
if (!ddup.thisdiv) {
// add new div with filename as id
ddup.hstat.innerHTML += `<div id="${f.name}">${f.name} - Added to queue</div>`;
} else {
// change contents of existing div
ddup.thisdiv.innerHTML = `${f.name} - Added to queue`;
}
// ADD TO QUEUE
ddup.upqueue.push(f);
}
// GO!
ddup.go();
},
// (C) AJAX UPLOAD
go : function () { if (!ddup.uplock && ddup.upqueue.length!=0) {
// (C1) QUEUE STATUS UPDATE
ddup.uplock = true;
// (C2) PLUCK OUT FIRST FILE IN QUEUE
let thisfile = ddup.upqueue[0];
ddup.upqueue.shift();
// OPTIONAL - SHOW UPLOAD STATUS
ddup.thisdiv = document.getElementById(thisfile.name);
ddup.thisdiv.innerHTML = `${thisfile.name} - Upload started`;
// at start of queue, change color
ddup.hzone.classList.add('processing');
ddup.hzone.innerHTML = "Uploading...";
// (C3) UPLOAD DATA
let data = new FormData();
data.append('file', thisfile);
// ADD MORE POST DATA IF YOU WANT
// data.append("KEY", "VALUE");
// (C4) AJAX REQUEST
let xhr = new XMLHttpRequest();
xhr.open("POST", "{{ server_prefix_ulp }}");
xhr.setRequestHeader("lastModified", thisfile.lastModified/1000);
xhr.onload = function () {
// OPTIONAL - SHOW UPLOAD STATUS
ddup.thisdiv.innerHTML = `${thisfile.name} - ${this.response}`;
// NEXT BETTER PLAYER!
ddup.hzone.classList.remove('processing');
ddup.hzone.innerHTML = "Drop Files Here";
ddup.uplock = false;
ddup.go();
};
xhr.onerror = function(evt){
// OPTIONAL - SHOW UPLOAD STATUS
ddup.thisdiv.innerHTML = `${thisfile.name} - AJAX ERROR`;
// NEXT BETTER PLAYER!
ddup.hzone.classList.remove('processing');
ddup.hzone.innerHTML = "Drop Files Here";
ddup.uplock = false;
ddup.go();
};
xhr.send(data);
} },
reset_text_timer : function (delay_ms) {
setTimeout(function (){
ddup.hzone.classList.remove('invalid');
ddup.hzone.innerHTML = "Drop Files Here";
}, delay_ms);
}
};
window.addEventListener("DOMContentLoaded", ddup.init);
|
