-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
65 lines (55 loc) · 2.06 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>File Uploader</title>
</head>
<body>
<h1>My File Uploader!</h1>
File: <input type="file" accept="audio/*" name="uploader" id="f" />
<button id="btnUpload">Read and Upload</button>
<div id="output"></div>
<script>
const btnUpload = document.getElementById("btnUpload");
const output = document.getElementById("output");
const f = document.getElementById("f");
btnUpload.addEventListener("click", () => {
const file = f.files[0];
const reader = new FileReader();
reader.onload = async (ev) => {
console.log(ev);
console.log("Read Successfully");
const data = ev.target.result;
const CHUNK_SIZE = 10000;
const chunkCount = Math.ceil(data.byteLength / CHUNK_SIZE);
const filename = Math.random() * 1000 + file.name;
const formData = new FormData();
// +1 is for the leftover chunk
for (let chunkId = 0; chunkId < chunkCount + 1; chunkId++) {
const start = chunkId * CHUNK_SIZE;
const end = start + CHUNK_SIZE;
const chunk = data.slice(start, end);
console.log(chunkId, chunk);
formData.append("chunkId", chunkId.toString());
formData.append("totalChunks", chunkCount.toString());
formData.append("chunk", new Blob([chunk]));
const res = await fetch("http://localhost:8080/api/upload", {
method: "POST",
headers: {
"content-type": "application/json",
"content-length": chunk.length,
"file-name": filename,
},
body: formData,
});
console.log(await res.json());
output.textContent =
Math.round((chunkId * 100) / chunkCount, 0) + "%";
}
};
reader.readAsArrayBuffer(file);
});
</script>
</body>
</html>