Upload index.html
Browse files- templates/index.html +54 -0
templates/index.html
ADDED
@@ -0,0 +1,54 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html>
|
3 |
+
<head>
|
4 |
+
<title>ZIP Extractor</title>
|
5 |
+
<script>
|
6 |
+
function uploadFile() {
|
7 |
+
let formData = new FormData(document.getElementById("uploadForm"));
|
8 |
+
let xhr = new XMLHttpRequest();
|
9 |
+
|
10 |
+
xhr.open("POST", "/upload", true);
|
11 |
+
xhr.onreadystatechange = function () {
|
12 |
+
if (xhr.readyState == 4 && xhr.status == 200) {
|
13 |
+
document.getElementById("status").innerText = JSON.parse(xhr.responseText).message;
|
14 |
+
}
|
15 |
+
};
|
16 |
+
xhr.send(formData);
|
17 |
+
|
18 |
+
checkProgress();
|
19 |
+
}
|
20 |
+
|
21 |
+
function checkProgress() {
|
22 |
+
let progressBar = document.getElementById("progressBar");
|
23 |
+
let xhr = new XMLHttpRequest();
|
24 |
+
|
25 |
+
xhr.open("GET", "/progress", true);
|
26 |
+
xhr.onreadystatechange = function () {
|
27 |
+
if (xhr.readyState == 4 && xhr.status == 200) {
|
28 |
+
let progress = JSON.parse(xhr.responseText).progress;
|
29 |
+
progressBar.value = progress;
|
30 |
+
|
31 |
+
if (progress < 100) {
|
32 |
+
setTimeout(checkProgress, 500);
|
33 |
+
}
|
34 |
+
}
|
35 |
+
};
|
36 |
+
xhr.send();
|
37 |
+
}
|
38 |
+
</script>
|
39 |
+
</head>
|
40 |
+
<body>
|
41 |
+
<h2>Upload a ZIP File</h2>
|
42 |
+
<form id="uploadForm" method="post" enctype="multipart/form-data">
|
43 |
+
<input type="file" name="zip_file" required>
|
44 |
+
<br><br>
|
45 |
+
<label for="extract_path">Extract to:</label>
|
46 |
+
<input type="text" name="extract_path" placeholder="Enter folder path" required>
|
47 |
+
<br><br>
|
48 |
+
<button type="button" onclick="uploadFile()">Extract</button>
|
49 |
+
</form>
|
50 |
+
|
51 |
+
<progress id="progressBar" value="0" max="100"></progress>
|
52 |
+
<p id="status"></p>
|
53 |
+
</body>
|
54 |
+
</html>
|