/
dropzone.init.js
165 lines (147 loc) · 6.15 KB
/
dropzone.init.js
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
// Dropzone
var dropzone = new Dropzone('body', {
// previewTemplate: document.querySelector('#preview-template').innerHTML,
parallelUploads: 2,
thumbnailHeight: 500,
thumbnailWidth: null,
maxFilesize: 3,
clickable: false,
url: '/upload',
filesizeBase: 1000,
dragenter: function(){
// console.log("dragenter");
document.querySelector('#drop-box-overlay').classList.add('show');
},
dragover: function(evt){
// console.log("dragover");
evt.stopPropagation();
evt.preventDefault();
},
drop: function(){
// console.log("drop");
// document.querySelector("#drop-box-overlay").classList.remove('show');
document.querySelector(".message .instructions").classList.add('hide');
document.querySelector(".message .processing").classList.remove('hide');
},
dragleave: function(evt){
// console.log("dragleave");
/*
* We have to double-check the 'leave' event state because this event stupidly
* gets fired by JavaScript when you mouse over the child of a parent element;
* instead of firing a subsequent enter event for the child, JavaScript first
* fires a LEAVE event for the parent then an ENTER event for the child even
* though the mouse is still technically inside the parent bounds. If we trust
* the dragenter/dragleave events as-delivered, it leads to "flickering" when
* a child element (drop prompt) is hovered over as it becomes invisible,
* then visible then invisible again as that continually triggers the enter/leave
* events back to back. Instead, we use a 10px buffer around the window frame
* to capture the mouse leaving the window manually instead. (using 1px didn't
* work as the mouse can skip out of the window before hitting 1px with high
* enough acceleration).
*/
if(evt.pageX < 10 || evt.pageY < 10 || document.querySelector('body').offsetWidth - evt.pageX < 10 || document.querySelector('body').offsetHeight - evt.pageY < 10) {
document.querySelector("#drop-box-overlay").classList.remove('show');
// document.querySelector("#drop-box-prompt").classList.remove('show');
}
},
// processing: function(file){
// console.log(file);
// // document.querySelector('.currentlyProcessing').setAttribute('src',file);
// },
queuecomplete:function(){
// console.log("queuecomplete");
document.querySelector('#drop-box-overlay').classList.remove('show');
document.querySelector(".message .instructions").classList.remove('hide');
document.querySelector(".message .processing").classList.add('hide');
},
previewsContainer: '.dropzone-previews',
thumbnail: function(file, dataUrl) {
if (file.previewElement) {
file.previewElement.classList.remove("dz-file-preview");
var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
for (var i = 0; i < images.length; i++) {
var thumbnailElement = images[i];
thumbnailElement.alt = file.name;
thumbnailElement.src = dataUrl;
// make sure it isn't already in the system
if(!localStorage.getItem("data:"+file.name)){
document.querySelector("#itemEntry").value = document.querySelector("#itemEntry").value + "\ndata:"+file.name+","+(file.name.split('.')[0]);
console.log("file.name",dataUrl.length);
localStorage.setItem("data:"+file.name,dataUrl);
document.querySelector('.currentlyProcessing').setAttribute('src',dataUrl);
} else {
console.log('already have '+file.name);
}
}
setTimeout(function() { file.previewElement.classList.add("dz-image-preview"); }, 1);
loadItems();
listLocal();
findDataItemsUsed();
}
}
});
var minSteps = 6,
maxSteps = 60,
timeBetweenSteps = 100,
bytesPerStep = 100000;
dropzone.uploadFiles = function(files) {
var self = this;
for (var i = 0; i < files.length; i++) {
var file = files[i];
totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
for (var step = 0; step < totalSteps; step++) {
var duration = timeBetweenSteps * (step + 1);
setTimeout(function(file, totalSteps, step) {
return function() {
file.upload = {
progress: 100 * (step + 1) / totalSteps,
total: file.size,
bytesSent: (step + 1) * file.size / totalSteps
};
self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
if (file.upload.progress == 100) {
file.status = Dropzone.SUCCESS;
self.emit("success", file, 'success', null);
self.emit("complete", file);
self.processQueue();
}
};
}(file, totalSteps, step), duration);
}
}
}
Dropzone.prototype.filesize = function(size) {
var units = [ 'TB', 'GB', 'MB', 'KB', 'b' ],
selectedSize, selectedUnit;
for (var i = 0; i < units.length; i++) {
var unit = units[i],
cutoff = Math.pow(this.options.filesizeBase, 4 - i) / 10;
if (size >= cutoff) {
selectedSize = size / Math.pow(this.options.filesizeBase, 4 - i);
selectedUnit = unit;
break;
}
}
selectedSize = Math.round(10 * selectedSize) / 10;
return '<strong>' + selectedSize + '</strong> ' + selectedUnit;
}
// filesize: (size) ->
// if size >= 1024 * 1024 * 1024 * 1024 / 10
// size = size / (1024 * 1024 * 1024 * 1024 / 10)
// string = "TiB"
// else if size >= 1024 * 1024 * 1024 / 10
// size = size / (1024 * 1024 * 1024 / 10)
// string = "GiB"
// else if size >= 1024 * 1024 / 10
// size = size / (1024 * 1024 / 10)
// string = "MiB"
// else if size >= 1024 / 10
// size = size / (1024 / 10)
// string = "KiB"
// else
// size = size * 10
// string = "b"
// "<strong>#{Math.round(size)/10}</strong> #{string}"
dropzone.on('complete', function(file) {
file.previewElement.classList.add('dz-complete');
});