added file expiration and fleshed out the API a bit
This commit is contained in:
parent
cc0aaaab94
commit
f52aa0f08b
9 changed files with 296 additions and 103 deletions
|
@ -18,6 +18,17 @@
|
|||
<noscript>This page requires Javascript :(</noscript>
|
||||
|
||||
<button id="upload">Upload</button>
|
||||
<div id="lifetime_container" style="display: none;">
|
||||
<label>
|
||||
Keep files for:
|
||||
<select id="lifetime">
|
||||
<option value="1">1 day</option>
|
||||
<option value="7">1 week</option>
|
||||
<option value="14" selected>2 weeks</option>
|
||||
<option value="30">1 month</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div id="download_link_container" style="display: none;">
|
||||
<div id="download_link_main">
|
||||
<div>Download link: <span id="download_link"></span></div><div class="copy_button"></div>
|
||||
|
|
|
@ -133,6 +133,10 @@ button:disabled, input:disabled + .fake_button {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#lifetime_container {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
|
@ -8,6 +8,9 @@ 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');
|
||||
|
||||
const uploadButton = document.getElementById('upload');
|
||||
|
||||
const downloadLinkContainer = document.getElementById('download_link_container');
|
||||
|
@ -27,13 +30,13 @@ let byteIndex = 0;
|
|||
let bytesSent = 0;
|
||||
let totalBytes = 0;
|
||||
|
||||
function sendMetadata() {
|
||||
const metadata = files.map((file) => ({
|
||||
function sendManifest(lifetime) {
|
||||
const fileMetadata = files.map((file) => ({
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
modtime: file.lastModified,
|
||||
}));
|
||||
socket.send(JSON.stringify(metadata));
|
||||
socket.send(JSON.stringify({ lifetime, files: fileMetadata }));
|
||||
}
|
||||
|
||||
function finishSending() {
|
||||
|
@ -95,11 +98,13 @@ function updateFiles() {
|
|||
fileInputMessage.textContent = 'Select files to upload...';
|
||||
fileListContainer.style.display = 'none';
|
||||
uploadButton.style.display = 'none';
|
||||
lifetimeContainer.style.display = 'none';
|
||||
} else {
|
||||
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 = '';
|
||||
lifetimeContainer.style.display = '';
|
||||
}
|
||||
fileInput.disabled = (files.length >= MAX_FILES);
|
||||
}
|
||||
|
@ -156,20 +161,25 @@ fileInput.addEventListener('input', (e) => {
|
|||
uploadButton.addEventListener('click', (e) => {
|
||||
if (files.length === 0) { return; }
|
||||
|
||||
const lifetime = parseInt(lifetimeInput.value);
|
||||
lifetimeContainer.remove();
|
||||
fileInputContainer.remove();
|
||||
for (const button of Array.from(document.getElementsByTagName('button')).concat(...document.getElementsByClassName('file_delete'))) {
|
||||
button.remove();
|
||||
}
|
||||
|
||||
socket = new WebSocket(`${window.location.protocol === 'http:' ? 'ws' : 'wss'}://${window.location.host}/upload`);
|
||||
socket.addEventListener('open', sendMetadata);
|
||||
socket.addEventListener('open', () => sendManifest(lifetime));
|
||||
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();
|
||||
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') {
|
||||
sendData();
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue