|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>ZIP Extractor</title> |
|
<script> |
|
function uploadFile() { |
|
let formData = new FormData(document.getElementById("uploadForm")); |
|
let xhr = new XMLHttpRequest(); |
|
|
|
xhr.open("POST", "/upload", true); |
|
xhr.onreadystatechange = function () { |
|
if (xhr.readyState == 4 && xhr.status == 200) { |
|
document.getElementById("status").innerText = JSON.parse(xhr.responseText).message; |
|
} |
|
}; |
|
xhr.send(formData); |
|
|
|
checkProgress(); |
|
} |
|
|
|
function checkProgress() { |
|
let progressBar = document.getElementById("progressBar"); |
|
let xhr = new XMLHttpRequest(); |
|
|
|
xhr.open("GET", "/progress", true); |
|
xhr.onreadystatechange = function () { |
|
if (xhr.readyState == 4 && xhr.status == 200) { |
|
let progress = JSON.parse(xhr.responseText).progress; |
|
progressBar.value = progress; |
|
|
|
if (progress < 100) { |
|
setTimeout(checkProgress, 500); |
|
} |
|
} |
|
}; |
|
xhr.send(); |
|
} |
|
</script> |
|
</head> |
|
<body> |
|
<h2>Upload a ZIP File</h2> |
|
<form id="uploadForm" method="post" enctype="multipart/form-data"> |
|
<input type="file" name="zip_file" required> |
|
<br><br> |
|
<label for="extract_path">Extract to:</label> |
|
<input type="text" name="extract_path" placeholder="Enter folder path" required> |
|
<br><br> |
|
<button type="button" onclick="uploadFile()">Extract</button> |
|
</form> |
|
|
|
<progress id="progressBar" value="0" max="100"></progress> |
|
<p id="status"></p> |
|
</body> |
|
</html> |
