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
|
function FileUpload(app) {
this.app = app;
this.files = [];
this.currentFile = 0;
}
FileUpload.prototype.listen = function() {
var dropzone = document.getElementById("file-dropzone");
var self = this;
if (dropzone) {
dropzone.ondragover = dropzone.ondragenter = function(e) {
e.stopPropagation();
e.preventDefault();
}
dropzone.ondrop = function(e) {
e.stopPropagation();
e.preventDefault();
self.files = e.dataTransfer.files;
self.show();
$("#file-error-max-size").hide();
}
$(document).on("click", "#file-browser", function(e) {
e.preventDefault();
$("#file-form-element").get(0).click();
});
$(document).on("click", "#file-upload-button", function(e) {
e.preventDefault();
self.currentFile = 0;
self.checkFiles();
});
$("#file-form-element").change(function() {
self.files = document.getElementById("file-form-element").files;
self.show();
$("#file-error-max-size").hide();
});
}
};
FileUpload.prototype.show = function() {
$("#file-list").remove();
if (this.files.length > 0) {
$("#file-upload-button").prop("disabled", false);
$("#file-dropzone-inner").hide();
var ul = jQuery("<ul>", {"id": "file-list"});
for (var i = 0; i < this.files.length; i++) {
var percentage = jQuery("<span>", {"id": "file-percentage-" + i}).append("(0%)");
var progress = jQuery("<progress>", {"id": "file-progress-" + i, "value": 0});
var li = jQuery("<li>", {"id": "file-label-" + i})
.append(progress)
.append(" ")
.append(this.files[i].name)
.append(" ")
.append(percentage);
ul.append(li);
}
$("#file-dropzone").append(ul);
} else {
$("#file-dropzone-inner").show();
}
};
FileUpload.prototype.checkFiles = function() {
var max = parseInt($("#file-dropzone").data("max-size"));
for (var i = 0; i < this.files.length; i++) {
if (this.files[i].size > max) {
$("#file-error-max-size").show();
$("#file-label-" + i).addClass("file-error");
$("#file-upload-button").prop("disabled", true);
return;
}
}
this.uploadFiles();
};
FileUpload.prototype.uploadFiles = function() {
if (this.files.length > 0) {
this.uploadFile(this.files[this.currentFile]);
}
};
FileUpload.prototype.uploadFile = function(file) {
var dropzone = document.getElementById("file-dropzone");
var url = dropzone.dataset.url;
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.upload.addEventListener("progress", this.updateProgress.bind(this));
xhr.upload.addEventListener("load", this.transferComplete.bind(this));
xhr.open("POST", url, true);
fd.append('files[]', file);
xhr.send(fd);
};
FileUpload.prototype.updateProgress = function(e) {
if (e.lengthComputable) {
$("#file-progress-" + this.currentFile).val(e.loaded / e.total);
$("#file-percentage-" + this.currentFile).text('(' + Math.floor((e.loaded / e.total) * 100) + '%)');
}
};
FileUpload.prototype.transferComplete = function() {
this.currentFile++;
if (this.currentFile < this.files.length) {
this.uploadFile(this.files[this.currentFile]);
} else {
$("#file-upload-button").prop("disabled", true);
$("#file-upload-button").parent().hide();
$("#file-done").show();
}
};
|
