diff --git a/static/index.html b/static/index.html index da4dfbb..9023dc8 100644 --- a/static/index.html +++ b/static/index.html @@ -4,41 +4,21 @@ - Upload Test - - - - - - - - -
- -
- - +
+ +
+ +

Files selected:

+ + +
+ diff --git a/static/transbeam.css b/static/transbeam.css index 3a7402b..d442e02 100644 --- a/static/transbeam.css +++ b/static/transbeam.css @@ -1,58 +1,10 @@ -body { - text-align: center; - font-family: sans-serif; - max-width: 512px; - margin: 0.5em auto; - padding: 0 1em; -} - -#header h1 { - margin-top: 5px; -} - -#progress_container { - margin: 10px auto; -} - -#progress_bar, #progress_bar_filled { - height: 20px; - border-radius: 8px; -} -#progress_bar { - border: 1px solid #48f; -} -#progress_bar_filled { - width: 0; - background-color: #27f; -} - -table { - border-collapse: collapse; - margin: 20px auto; -} - -tr + tr td { - border-top: 1px solid #ddd; -} - -td { - padding: 10px; -} - -td.file_size { - text-align: right; -} - -td.file_name { - text-align: left; -} - input[type="file"] { display: none; } button, .fake_button { font-size: 18px; + font-family: sans-serif; color: #000; background-color: #ccc; border: 1px solid #bbb; @@ -71,11 +23,3 @@ button:disabled, input:disabled + .fake_button { border-color: #ddd; cursor: not-allowed; } - -#footer { - margin-top: 30px; -} - -#footer h5 { - margin: 5px auto; -} diff --git a/static/upload.js b/static/upload.js index d1b570e..d332674 100644 --- a/static/upload.js +++ b/static/upload.js @@ -1,21 +1,5 @@ const FILE_CHUNK_SIZE = 16384; -const fileInputContainer = document.getElementById('file_input_container'); -const fileInput = document.getElementById('file_input'); -const fileInputMessage = document.getElementById('file_input_message'); - -const fileListContainer = document.getElementById('file_list_container'); -const fileList = document.getElementById('file_list'); - -const uploadButton = document.getElementById('upload'); - -const downloadLinkContainer = document.getElementById('download_link_container'); -const downloadLink = document.getElementById('download_link'); - -const progressContainer = document.getElementById('progress_container'); -const progress = document.getElementById('progress'); -const progressBarFilled = document.getElementById('progress_bar_filled'); - let files = []; let socket = null; @@ -39,7 +23,7 @@ function finishSending() { return; } socket.close(); - progressContainer.textContent = "Upload complete!"; + alert("done"); } function sendData() { @@ -54,7 +38,7 @@ function sendData() { socket.send(data); byteIndex = endpoint; bytesSent += data.size; - updateProgress(); + progress.textContent = `${Math.floor(bytesSent * 100 / totalBytes)}%`; } else { fileIndex += 1; byteIndex = 0; @@ -62,69 +46,42 @@ function sendData() { } } -function updateProgress() { - let percentage; - if (totalBytes === 0) { - percentage = "0%"; - } else { - percentage = `${(bytesSent*100/totalBytes).toFixed(1)}%`; - } - progress.textContent = percentage; - progressBarFilled.style.width = percentage; -} - -function updateFiles() { - totalBytes = files.reduce((acc, file) => acc + file.size, 0); +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) { + uploadButton.disabled = true; fileInputMessage.textContent = 'Select files to upload...'; - fileListContainer.style.display = 'none'; - uploadButton.style.display = 'none'; } else { + uploadButton.disabled = false; fileInputMessage.textContent = 'Select more files to upload...'; - fileListContainer.style.display = ''; - uploadButton.textContent = `Upload ${files.length} file${files.length > 1 ? 's' : ''} (${displaySize(totalBytes)})`; - uploadButton.style.display = ''; } } -updateFiles(); -downloadLinkContainer.style.display = 'none'; -progressContainer.style.display = 'none'; +updateButtons(); function addFile(newFile) { if (files.some((oldFile) => newFile.name === oldFile.name)) { return; } files.push(newFile); - addListEntry(newFile); -} - -function addListEntry(file) { - const listEntry = document.createElement('tr'); - - const deleteButtonCell = document.createElement('td'); + const listEntry = document.createElement('li'); const deleteButton = document.createElement('button'); - deleteButtonCell.appendChild(deleteButton); - deleteButton.className = 'file_delete'; deleteButton.textContent = 'x'; deleteButton.addEventListener('click', () => { - removeFile(file.name); + removeFile(newFile.name); listEntry.remove(); - updateFiles(); + updateButtons(); }); - - const sizeCell = document.createElement('td'); - sizeCell.className = 'file_size'; - sizeCell.textContent = displaySize(file.size); - - const nameCell = document.createElement('td'); - nameCell.className = 'file_name'; - nameCell.textContent = file.name; - - listEntry.appendChild(deleteButtonCell); - listEntry.appendChild(sizeCell); - listEntry.appendChild(nameCell); + const entryName = document.createElement('span'); + entryName.textContent = newFile.name; + listEntry.appendChild(deleteButton); + listEntry.appendChild(entryName); fileList.appendChild(listEntry); } @@ -135,26 +92,25 @@ function removeFile(name) { fileInput.addEventListener('input', (e) => { for (const file of e.target.files) { addFile(file); } - updateFiles(); + updateButtons(); e.target.value = ''; }); uploadButton.addEventListener('click', (e) => { if (files.length === 0) { return; } - fileInputContainer.remove(); - for (const button of Array.from(document.getElementsByTagName('button'))) { - button.remove(); + fileInput.disabled = true; + for (const button of document.getElementsByTagName('button')) { + button.disabled = true; } + totalBytes = files.reduce((acc, file) => acc + file.size, 0); + socket = new WebSocket(`${window.location.protocol === 'http:' ? 'ws' : 'wss'}://${window.location.host}/upload`); socket.addEventListener('open', sendMetadata); socket.addEventListener('message', (msg) => { if (bytesSent === 0 && msg.data.match(/^[A-Za-z0-9]+$/)) { downloadLink.textContent = `${window.location.origin}/download/${msg.data}`; - downloadLinkContainer.style.display = ''; - updateProgress(); - progressContainer.style.display = ''; sendData(); } else if (msg.data === 'ack') { sendData(); diff --git a/static/util.js b/static/util.js deleted file mode 100644 index 195d803..0000000 --- a/static/util.js +++ /dev/null @@ -1,14 +0,0 @@ -const UNITS = [ - { name: 'GB', size: Math.pow(2, 30) }, - { name: 'MB', size: Math.pow(2, 20) }, - { name: 'KB', size: Math.pow(2, 10) }, -]; - -function displaySize(bytes) { - for (const unit of UNITS) { - if (bytes >= unit.size) { - return `${(bytes / unit.size).toFixed(1)}${unit.name}`; - } - } - return `${bytes}B`; -}