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
|
var FORM_ASYNC = true;
const upload_form = document.getElementById("upload_form");
const the_file = document.getElementById("the_file");
const filename_input = document.getElementById("filename");
const upload_btn = document.getElementById("upload_btn");
const current_directory = document.getElementById("current_directory");
the_file.onchange = on_file_added;
const pwd = "/";
const pending_uploads = [];
class FileView {
constructor(filename, visuals, mimetype, is_directory) {
this.filename = filename;
this.visuals = visuals;
this.mimetype = mimetype;
this.is_directory = is_directory;
}
}
class PendingUpload {
constructor(fileview) {
this.fileview = fileview;
}
}
var files = [];
function on_file_added(_e) {
if (the_file.files.length >= 1) {
filename_input.value = the_file.files[0].name;
if (!FORM_ASYNC) {
upload_form.submit();
return;
}
var fileview = add_file_visuals(filename_input.value, false, "pending");
// Send the form asynchronously through the fetch api
fetch(upload_form.action, {
method: upload_form.method,
body: new FormData(upload_form)
}).then((resp) => {
if (resp.status == 200) {
done_upload(fileview);
}
else {
alert("Upload failed");
}
}, () => {
alert("Upload failed")
});
pending_uploads.push(fileview);
}
else {
alert("No files selected");
}
}
function done_upload(fileview) {
var index = pending_uploads.indexOf(fileview);
if (index >= 0)
pending_uploads.splice(index, 1);
load_dir(pwd);
}
function load_dir(pwd) {
var data = new FormData();
data.append('path', '/');
var xhr = new XMLHttpRequest();
xhr.open('POST', '/php/readdir.php', true);
xhr.onload = function () {
for (const f of files)
f.visuals.remove();
files = [];
var json = JSON.parse(this.responseText);
for (const f of json) {
add_file_visuals(f.name, f.is_directory, f.mimetype);
}
};
xhr.send(data);
}
function add_file_visuals(name, is_directory, mimetype) {
var fileDiv = document.createElement('div');
var img = document.createElement('img');
var filename = document.createElement('div');
if (is_directory) {
img.src="/mimeicons/directory.png";
}
else {
img.src=`/mimeicons/${mimetype.replace("/", "-")}.png`;
}
fileDiv.classList.add('file');
filename.classList.add('filename');
filename.innerText = name;
if (mimetype == "pending")
fileDiv.classList.add('pending');
fileDiv.appendChild(img);
fileDiv.appendChild(filename);
current_directory.appendChild(fileDiv);
var file = new FileView(name, fileDiv, mimetype, is_directory);
files.push(file);
return file;
}
function begin_upload() {
the_file.click();
}
load_dir("/");
|