-
Notifications
You must be signed in to change notification settings - Fork 0
/
upload.html
117 lines (117 loc) · 4.19 KB
/
upload.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UploadAsset v{{ .Version }}</title>
<style>
html {
text-align: center;
background-color: black;
color: lime;
}
form {
display: inline;
}
progress::-moz-progress-bar { background: lime; }
progress::-webkit-progress-value { background: lime; }
progress {
width: 99%;
margin-top: 15px;
margin-bottom: 15px;
background-color: black;
color: lime;
}
button, input[type=file]::file-selector-button, select {
background-color: black;
color: lime;
border: lime solid 1px;
}
</style>
</head>
<body>
<h2 id="fileDrop">Drag file >here< to upload</h2>
<form name="formInput" id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1" value="">
</form>
<button onclick="uploadFile(document.getElementById('file1').files[0])">Upload</button>
<br>
<label>
location
<select id="locationSelect">
<option>drops</option>
<option>music</option>
<option>videoLoop</option>
</select>
</label>
<br>
<progress id="progressBar" value="0" max="100"></progress>
<h3 id="status">Status: Nil</h3>
<p id="loaded_n_total">Uploaded: 0.00 B / 0.00 B</p>
<script>
let uploadLocation = document.getElementById("locationSelect");
let status = document.getElementById("status");
let fileEm = document.getElementById("file1");
let lnt = document.getElementById("loaded_n_total");
let progressBar = document.getElementById("progressBar");
const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
function uploadFile(file) {
console.log(file, uploadLocation.value);
progressBar.value = 0;
let fd = new FormData();
fd.append("file", file);
let xr = new XMLHttpRequest();
xr.upload.addEventListener("progress", progressHandler, false);
xr.addEventListener("load", completeHandler, false);
xr.addEventListener("error", errorHandler, false);
xr.addEventListener("abort", abortHandler, false);
xr.open("POST", "/upload?loc="+uploadLocation.value);
xr.send(fd);
}
// formatBytes // https://stackoverflow.com/a/18650828
function formatBytes(bytes, precision = 2) {
if (!+bytes) return '0.00 B'
const k = 1024
const dm = precision < 0 ? 0 : precision
const i = Math.floor(Math.log(bytes) / Math.log(k))
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
}
function progressHandler(event) {
lnt.innerHTML = "Uploaded: " + formatBytes(event.loaded) + " / " + formatBytes(event.total);
let percent = (event.loaded / event.total) * 100;
progressBar.value = Math.round(percent);
status.innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
status.innerHTML = "Status: Complete -> " + event.target.responseText;
}
function errorHandler(event) {
status.innerHTML = "Status: Upload Failed -> " + event.target.responseText;
}
function abortHandler(event) {
status.innerHTML = "Status: Upload Aborted -> " + event.target.responseText;
}
// Drag'n'drop file event
let fileDrop = document.getElementById("fileDrop");
fileDrop.addEventListener("dragover", (e) => {
e.preventDefault();
fileDrop.style.color = "red";
});
fileDrop.addEventListener("dragleave", () => {
fileDrop.style.color = "green";
});
fileDrop.addEventListener("drop", (event) => {
event.preventDefault();
if (event.dataTransfer.items) {
[...event.dataTransfer.items].forEach((item, i) => {
if (item.kind === "file") {
const file = item.getAsFile();
console.log(`uploading file ${file.name}`);
fileEm.filename = file.name;
uploadFile(file);
}
});
}
});
</script>
</body>
</html>