diff --git a/static/index.html b/static/index.html index 735628d..1640e13 100644 --- a/static/index.html +++ b/static/index.html @@ -17,6 +17,8 @@

Files selected:

+ +
diff --git a/static/upload.js b/static/upload.js index 3cb582c..2679b46 100644 --- a/static/upload.js +++ b/static/upload.js @@ -3,6 +3,8 @@ let files = []; let socket = null; let fileIndex = 0; let byteIndex = 0; +let bytesSent = 0; +let totalBytes = 0; function sendMetadata() { const metadata = files.map((file) => ({ @@ -32,6 +34,8 @@ function sendData() { const data = currentFile.slice(byteIndex, endpoint); socket.send(data); byteIndex = endpoint; + bytesSent += data.size; + progress.textContent = `${Math.floor(bytesSent * 100 / totalBytes)}%`; } else { fileIndex += 1; byteIndex = 0; @@ -43,6 +47,8 @@ const fileInput = document.getElementById('file_input'); const fileInputMessage = document.getElementById('file_input_message'); const fileList = document.getElementById('file_list'); const uploadButton = document.getElementById('upload'); +const downloadLink = document.getElementById('download_link'); +const progress = document.getElementById('progress'); function updateButtons() { if (files.length === 0) { @@ -95,10 +101,15 @@ uploadButton.addEventListener('click', (e) => { button.disabled = true; } - socket = new WebSocket('ws://localhost:3000/upload'); + totalBytes = files.reduce((acc, file) => acc + file.size, 0); + + socket = new WebSocket(`ws://${window.location.host}/upload`); socket.addEventListener('open', sendMetadata); socket.addEventListener('message', (msg) => { - if (msg.data === 'ack') { + if (bytesSent === 0 && msg.data.match(/^[A-Za-z0-9]+$/)) { + downloadLink.textContent = msg.data; + sendData(); + } else if (msg.data === 'ack') { sendData(); } });