transbeam/static/transbeam.js

199 lines
6.4 KiB
JavaScript
Raw Normal View History

const FILE_CHUNK_SIZE = 16384;
2022-04-28 00:27:22 -04:00
const MAX_FILES = 256;
2022-04-27 23:52:45 -04:00
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 lifetimeContainer = document.getElementById('lifetime_container');
const lifetimeInput = document.getElementById('lifetime');
2022-04-27 23:52:45 -04:00
const uploadButton = document.getElementById('upload');
const downloadLinkContainer = document.getElementById('download_link_container');
2022-04-28 03:24:05 -04:00
const downloadLinkMain = document.getElementById('download_link_main');
2022-04-27 23:52:45 -04:00
const downloadLink = document.getElementById('download_link');
2022-04-28 03:24:05 -04:00
const copiedMessage = document.getElementById('copied_message');
2022-04-27 23:52:45 -04:00
const progressContainer = document.getElementById('progress_container');
const progress = document.getElementById('progress');
2022-04-28 02:28:10 -04:00
const progressBar = document.getElementById('progress_bar');
2022-04-27 23:52:45 -04:00
2022-04-26 23:54:29 -04:00
let files = [];
let socket = null;
let fileIndex = 0;
let byteIndex = 0;
let bytesSent = 0;
let totalBytes = 0;
2022-04-26 23:54:29 -04:00
function sendManifest(lifetime) {
const fileMetadata = files.map((file) => ({
2022-04-26 23:54:29 -04:00
name: file.name,
size: file.size,
modtime: file.lastModified,
}));
socket.send(JSON.stringify({ lifetime, files: fileMetadata }));
2022-04-26 23:54:29 -04:00
}
function finishSending() {
if (socket.bufferedAmount > 0) {
window.setTimeout(finishSending, 1000);
return;
}
socket.close();
2022-04-27 23:52:45 -04:00
progressContainer.textContent = "Upload complete!";
2022-04-28 02:19:43 -04:00
fileList.style.backgroundColor = "#7af";
2022-04-26 23:54:29 -04:00
}
function sendData() {
if (fileIndex >= files.length) {
finishSending();
return;
2022-04-26 23:54:29 -04:00
}
const currentFile = files[fileIndex];
if (byteIndex < currentFile.size) {
const endpoint = Math.min(byteIndex+FILE_CHUNK_SIZE, currentFile.size);
2022-04-26 23:54:29 -04:00
const data = currentFile.slice(byteIndex, endpoint);
socket.send(data);
byteIndex = endpoint;
bytesSent += data.size;
2022-04-27 23:52:45 -04:00
updateProgress();
2022-04-26 23:54:29 -04:00
} else {
fileIndex += 1;
byteIndex = 0;
sendData();
}
}
2022-04-27 23:52:45 -04:00
function updateProgress() {
let percentage;
if (totalBytes === 0) {
percentage = "0%";
} else {
percentage = `${(bytesSent*100/totalBytes).toFixed(1)}%`;
}
2022-04-28 02:28:10 -04:00
progress.textContent = `${percentage} (${displaySize(bytesSent)}/${displaySize(totalBytes)})`;
progressBar.style.backgroundSize = percentage;
2022-04-28 02:19:43 -04:00
const fileEntries = Array.from(fileList.children);
for (entry of fileEntries.slice(0, fileIndex)) {
entry.style.backgroundSize = "100%";
}
if (fileIndex < files.length) {
const currentFile = files[fileIndex];
if (currentFile.size > 0) {
fileEntries[fileIndex].style.backgroundSize = `${(byteIndex*100/currentFile.size)}%`;
}
}
2022-04-27 23:52:45 -04:00
}
function updateFiles() {
totalBytes = files.reduce((acc, file) => acc + file.size, 0);
2022-04-26 23:54:29 -04:00
if (files.length === 0) {
fileInputMessage.textContent = 'Select files to upload...';
2022-04-27 23:52:45 -04:00
fileListContainer.style.display = 'none';
uploadButton.style.display = 'none';
lifetimeContainer.style.display = 'none';
2022-04-26 23:54:29 -04:00
} else {
fileInputMessage.textContent = 'Select more files to upload...';
2022-04-27 23:52:45 -04:00
fileListContainer.style.display = '';
uploadButton.textContent = `Upload ${files.length} file${files.length > 1 ? 's' : ''} (${displaySize(totalBytes)})`;
uploadButton.style.display = '';
lifetimeContainer.style.display = '';
2022-04-26 23:54:29 -04:00
}
2022-04-28 00:27:22 -04:00
fileInput.disabled = (files.length >= MAX_FILES);
2022-04-26 23:54:29 -04:00
}
2022-04-27 23:52:45 -04:00
updateFiles();
downloadLinkContainer.style.display = 'none';
progressContainer.style.display = 'none';
2022-04-26 23:54:29 -04:00
function addFile(newFile) {
2022-04-28 00:27:22 -04:00
if (files.length >= MAX_FILES) { return; }
2022-04-26 23:54:29 -04:00
if (files.some((oldFile) => newFile.name === oldFile.name)) { return; }
files.push(newFile);
2022-04-27 23:52:45 -04:00
addListEntry(newFile);
}
function addListEntry(file) {
const listEntry = document.createElement('tr');
const deleteButtonCell = document.createElement('td');
2022-04-28 03:35:02 -04:00
deleteButtonCell.className = 'file_delete';
deleteButtonCell.addEventListener('click', () => {
2022-04-27 23:52:45 -04:00
removeFile(file.name);
2022-04-26 23:54:29 -04:00
listEntry.remove();
2022-04-27 23:52:45 -04:00
updateFiles();
2022-04-26 23:54:29 -04:00
});
2022-04-27 23:52:45 -04:00
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);
2022-04-26 23:54:29 -04:00
fileList.appendChild(listEntry);
}
function removeFile(name) {
files = files.filter((file) => file.name !== name);
}
fileInput.addEventListener('input', (e) => {
for (const file of e.target.files) { addFile(file); }
2022-04-27 23:52:45 -04:00
updateFiles();
2022-04-26 23:54:29 -04:00
e.target.value = '';
});
uploadButton.addEventListener('click', (e) => {
if (files.length === 0) { return; }
const lifetime = parseInt(lifetimeInput.value);
lifetimeContainer.remove();
2022-04-27 23:52:45 -04:00
fileInputContainer.remove();
2022-04-28 03:35:02 -04:00
for (const button of Array.from(document.getElementsByTagName('button')).concat(...document.getElementsByClassName('file_delete'))) {
2022-04-27 23:52:45 -04:00
button.remove();
2022-04-26 23:54:29 -04:00
}
socket = new WebSocket(`${window.location.protocol === 'http:' ? 'ws' : 'wss'}://${window.location.host}/upload`);
socket.addEventListener('open', () => sendManifest(lifetime));
2022-04-26 23:54:29 -04:00
socket.addEventListener('message', (msg) => {
if (bytesSent === 0) {
const reply = JSON.parse(msg.data);
if (reply.type === 'ready' && reply.code.match(/^[A-Za-z0-9]+$/)) {
downloadLink.textContent = `${window.location.origin}/download/${reply.code}`;
downloadLinkContainer.style.display = '';
updateProgress();
progressContainer.style.display = '';
sendData();
}
} else if (msg.data === 'ack') {
2022-04-26 23:54:29 -04:00
sendData();
}
});
})
2022-04-28 03:24:05 -04:00
downloadLinkContainer.addEventListener('click', (e) => {
navigator.clipboard.writeText(downloadLink.textContent);
downloadLinkMain.style.visibility = 'hidden';
copiedMessage.style.display = '';
})
downloadLinkContainer.addEventListener('mouseleave', (e) => {
copiedMessage.style.display = 'none';
downloadLinkMain.style.visibility = 'visible';
});