Multi file upload, updated styling.
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
{{define "web-upload"}}
|
||||
<h2>📤 Web Upload</h2>
|
||||
<p>Upload a file directly from your browser. Files are temporary and automatically deleted after 24 hours.</p>
|
||||
<h2>Web upload</h2>
|
||||
<p>Upload files directly from your browser. Files are temporary and automatically deleted after 24 hours.</p>
|
||||
|
||||
<div class="upload-card">
|
||||
<form id="web-upload-form" class="upload-form" aria-label="Web upload form">
|
||||
<div class="form-row">
|
||||
<input type="file" id="file-input" name="file" required aria-label="Choose a file to upload" data-rybbit-event="Select file">
|
||||
<input type="file" id="file-input" name="file" multiple required aria-label="Choose files to upload" data-rybbit-event="Select files">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<button type="submit" id="upload-btn" class="btn-primary" data-rybbit-event="Upload">Upload</button>
|
||||
@@ -15,14 +15,7 @@
|
||||
<div id="upload-status" class="upload-status" role="status" aria-live="polite" hidden></div>
|
||||
|
||||
<div id="upload-result" class="upload-result" hidden>
|
||||
<p><strong>File uploaded successfully!</strong></p>
|
||||
<p>
|
||||
<span>Download URL:</span>
|
||||
<a id="download-link" href="#" target="_blank" rel="noopener noreferrer">open</a>
|
||||
</p>
|
||||
<div class="actions">
|
||||
<button id="copy-link-btn" class="btn-secondary" type="button">Copy link</button>
|
||||
</div>
|
||||
<div id="upload-results-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,8 +25,6 @@
|
||||
const fileInput = document.getElementById('file-input');
|
||||
const statusEl = document.getElementById('upload-status');
|
||||
const resultEl = document.getElementById('upload-result');
|
||||
const linkEl = document.getElementById('download-link');
|
||||
const copyBtn = document.getElementById('copy-link-btn');
|
||||
const uploadBtn = document.getElementById('upload-btn');
|
||||
|
||||
function showStatus(msg, type) {
|
||||
@@ -55,62 +46,117 @@
|
||||
clearStatus();
|
||||
resultEl.hidden = true;
|
||||
|
||||
const file = fileInput.files && fileInput.files[0];
|
||||
if(!file){
|
||||
showStatus('Please choose a file first.', 'error');
|
||||
const files = fileInput.files;
|
||||
if(!files || files.length === 0){
|
||||
showStatus('Please choose at least one file.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = new FormData();
|
||||
data.append('file', file);
|
||||
|
||||
setLoading(true);
|
||||
const resultsList = document.getElementById('upload-results-list');
|
||||
resultsList.innerHTML = '';
|
||||
|
||||
let successCount = 0;
|
||||
let totalFiles = files.length;
|
||||
|
||||
try {
|
||||
const resp = await fetch('/upload', { method: 'POST', body: data });
|
||||
const contentType = resp.headers.get('content-type') || '';
|
||||
if(!resp.ok){
|
||||
let message = 'Upload failed';
|
||||
if (contentType.includes('application/json')) {
|
||||
const errJson = await resp.json().catch(()=>({}));
|
||||
if (errJson && errJson.error) message = errJson.error;
|
||||
} else {
|
||||
message = await resp.text();
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
showStatus(`Uploading file ${i + 1} of ${totalFiles}: ${file.name}`, 'info');
|
||||
|
||||
const data = new FormData();
|
||||
data.append('file', file);
|
||||
|
||||
try {
|
||||
const resp = await fetch('/upload', { method: 'POST', body: data });
|
||||
const contentType = resp.headers.get('content-type') || '';
|
||||
|
||||
if(!resp.ok){
|
||||
let message = 'Upload failed';
|
||||
if (contentType.includes('application/json')) {
|
||||
const errJson = await resp.json().catch(()=>({}));
|
||||
if (errJson && errJson.error) message = errJson.error;
|
||||
} else {
|
||||
message = await resp.text();
|
||||
}
|
||||
addFileResult(file.name, null, message, false);
|
||||
continue;
|
||||
}
|
||||
|
||||
const json = contentType.includes('application/json') ? await resp.json() : null;
|
||||
const url = json && json.url ? json.url : null;
|
||||
|
||||
if(!url){
|
||||
addFileResult(file.name, null, 'Upload succeeded but no URL was returned', false);
|
||||
continue;
|
||||
}
|
||||
|
||||
addFileResult(file.name, url, 'Success', true);
|
||||
successCount++;
|
||||
} catch (err) {
|
||||
addFileResult(file.name, null, 'Network error', false);
|
||||
}
|
||||
showStatus(message || 'Upload failed', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const json = contentType.includes('application/json') ? await resp.json() : null;
|
||||
const url = json && json.url ? json.url : null;
|
||||
if(!url){
|
||||
showStatus('Upload succeeded but no URL was returned by the server.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
linkEl.href = url;
|
||||
linkEl.textContent = url;
|
||||
|
||||
resultEl.hidden = false;
|
||||
showStatus('Done.', 'success');
|
||||
} catch (err) {
|
||||
showStatus('Network error. Please try again.', 'error');
|
||||
if (successCount === totalFiles) {
|
||||
showStatus(`All ${totalFiles} files uploaded successfully!`, 'success');
|
||||
} else if (successCount > 0) {
|
||||
showStatus(`${successCount} of ${totalFiles} files uploaded successfully.`, 'warning');
|
||||
} else {
|
||||
showStatus('All uploads failed.', 'error');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
copyBtn.addEventListener('click', function(){
|
||||
const url = linkEl.href;
|
||||
if(!url) return;
|
||||
navigator.clipboard.writeText(url).then(()=>{
|
||||
const original = copyBtn.textContent;
|
||||
copyBtn.textContent = 'Copied!';
|
||||
copyBtn.classList.add('copied');
|
||||
setTimeout(()=>{ copyBtn.textContent = original; copyBtn.classList.remove('copied'); }, 1500);
|
||||
}).catch(()=>{
|
||||
const original = copyBtn.textContent;
|
||||
copyBtn.textContent = 'Failed';
|
||||
setTimeout(()=>{ copyBtn.textContent = original; }, 1500);
|
||||
});
|
||||
function addFileResult(filename, url, message, success) {
|
||||
const resultsList = document.getElementById('upload-results-list');
|
||||
const resultDiv = document.createElement('div');
|
||||
resultDiv.className = 'file-result ' + (success ? 'success' : 'error');
|
||||
|
||||
if (success && url) {
|
||||
resultDiv.innerHTML = `
|
||||
<p><strong>${filename}</strong> - ${message}</p>
|
||||
<p>
|
||||
<span>Download URL:</span>
|
||||
<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>
|
||||
</p>
|
||||
<div class="actions">
|
||||
<button class="btn-secondary copy-link-btn" type="button" data-url="${url}">Copy link</button>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
resultDiv.innerHTML = `
|
||||
<p><strong>${filename}</strong> - ${message}</p>
|
||||
`;
|
||||
}
|
||||
|
||||
resultsList.appendChild(resultDiv);
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('copy-link-btn')) {
|
||||
const url = e.target.getAttribute('data-url');
|
||||
if (!url) return;
|
||||
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
const original = e.target.textContent;
|
||||
e.target.textContent = 'Copied!';
|
||||
e.target.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
e.target.textContent = original;
|
||||
e.target.classList.remove('copied');
|
||||
}, 1500);
|
||||
}).catch(() => {
|
||||
const original = e.target.textContent;
|
||||
e.target.textContent = 'Failed';
|
||||
setTimeout(() => {
|
||||
e.target.textContent = original;
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user