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
|
$(function () {
status('choose a file');
var timerId;
function setTimer() {
timerId = setInterval(function () {
if ($('#userFileInput').val() !== '') {
clearInterval(timerId);
$('#uploadForm').submit();
}
}, 500);
}
function setProgress(percent) {
$('#percent').html(percent + '%');
$('#bar').css('width', percent + '%');
}
setTimer();
$('#uploadForm').submit(function () {
status('0%');
var formData = new FormData();
var file = document.getElementById('userFileInput').files[0];
formData.append('userFile', file);
var xhr = new XMLHttpRequest();
xhr.overrideMimeType('application/json');
xhr.open('post', '/api/upload', true);
xhr.upload.onprogress = function (e) {
if (e.lengthComputable)
setProgress(Math.round((e.loaded / e.total) * 100));
};
xhr.onerror = function (e) {
status('error while trying to upload');
};
xhr.onload = function () {
$('#userFileInput').val('');
setProgress(0);
var resJson = JSON.parse(xhr.responseText);
status(resJson.file + ' done, choose a file');
setTimer();
if (resJson.image)
window.open('./uploads/' + resJson.savedAs, 'upload', 'status=1, height = 300, width = 300, resizable = 0');
else
console.log('not an image');
};
xhr.send(formData);
return false; // no refresh
});
function status(message) {
$('#status').text(message);
}
function uploadedFilenameList() {
var xhr = new XMLHttpRequest();
xhr.open('get', '/api/filenames', true);
xhr.onload = function () {
var fnames = JSON.parse(xhr.response);
fnames.forEach(function (element) {
$("#filenames").append("<a href=\"./uploads/" + element + "\" style=\"display: block\">" + element + "</a>");
});
}
xhr.send();
}
uploadedFilenameList();
});
|
