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
|
const DB_DIR_KEY = "DIR_HANDLE";
const bar = document.querySelector("#bar");
const btn = document.querySelector("#btn");
const stdoutEl = document.querySelector("#stdout");
const fileListEl = document.querySelector("#fileList");
const db = await idb();
const stdout = (msg) => (stdoutEl.textContent = msg);
if (await db.has(DB_DIR_KEY)) {
btn.textContent = "Wgraj pliki z folderu " + (await db.get(DB_DIR_KEY)).name;
} else {
btn.textContent = "Wybierz folder";
}
async function handleUpload() {
let dirHandle;
if (await db.has(DB_DIR_KEY)) {
dirHandle = await db.get(DB_DIR_KEY);
dirHandle.requestPermission();
} else {
dirHandle = await window.showDirectoryPicker();
}
const filesUploaded = [];
const formData = new FormData();
for await (const [_, fileHandle] of dirHandle.entries()) {
if (fileHandle.kind !== "file") continue;
formData.append("files", await fileHandle.getFile());
filesUploaded.push(fileHandle.name);
}
await upload(formData);
if ((await db.has(DB_DIR_KEY)) === false) {
await db.set(DB_DIR_KEY, dirHandle);
}
listFiles();
stdout(
`Pliki\n\n[${filesUploaded.join(", ")}]\n\nz folderu\n\n${dirHandle.name}\n\nwgrane`,
);
}
btn.onclick = handleUpload;
async function listFiles() {
const files = await fetch("./cgi-bin/list-files.py").then((res) =>
res.json(),
);
const children = [];
for (const file of files) {
const li = document.createElement("li");
li.textContent = file;
const b = document.createElement("button");
b.textContent = "Usun";
b.onclick = () => deleteFile(file);
li.appendChild(b);
children.push(li);
}
fileListEl.replaceChildren(...children);
}
listFiles();
async function deleteFile(fileName) {
await fetch(
"./cgi-bin/delete-file.py?filename=" + encodeURIComponent(fileName),
{
method: "POST",
},
);
await listFiles();
}
async function upload(formData, onProgress) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
bar.value = 0;
xhr.upload.addEventListener("progress", (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
bar.value = percent;
}
});
xhr.addEventListener("load", resolve);
xhr.open("POST", "./cgi-bin/upload.py");
xhr.send(formData);
});
}
async function idb(dbName = "app", store = "kv") {
const db = await new Promise((resolve, reject) => {
const req = indexedDB.open(dbName, 1);
req.onupgradeneeded = () => req.result.createObjectStore(store);
req.onsuccess = () => resolve(req.result);
req.onerror = () => reject(req.error);
});
const run = (mode, fn) =>
new Promise((resolve, reject) => {
const t = db.transaction(store, mode);
const req = fn(t.objectStore(store));
t.oncomplete = () => resolve(req?.result);
t.onerror = () => reject(t.error);
});
return {
get: (k) => run("readonly", (s) => s.get(k)),
set: (k, v) => run("readwrite", (s) => s.put(v, k)),
del: (k) => run("readwrite", (s) => s.delete(k)),
keys: () => run("readonly", (s) => s.getAllKeys()),
clear: () => run("readwrite", (s) => s.clear()),
has: (k) => run("readonly", (s) => s.count(k)).then((n) => n > 0),
};
}
|
