118 lines
3.8 KiB
HTML
118 lines
3.8 KiB
HTML
{{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>
|
|
|
|
<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">
|
|
</div>
|
|
<div class="form-row">
|
|
<button type="submit" id="upload-btn" class="btn-primary" data-rybbit-event="Upload">Upload</button>
|
|
</div>
|
|
</form>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<script>
|
|
(function(){
|
|
const form = document.getElementById('web-upload-form');
|
|
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) {
|
|
statusEl.textContent = msg;
|
|
statusEl.hidden = false;
|
|
statusEl.className = 'upload-status ' + (type || '');
|
|
}
|
|
function clearStatus(){
|
|
statusEl.hidden = true;
|
|
statusEl.textContent = '';
|
|
}
|
|
function setLoading(isLoading){
|
|
uploadBtn.disabled = isLoading;
|
|
uploadBtn.textContent = isLoading ? 'Uploading…' : 'Upload';
|
|
}
|
|
|
|
form.addEventListener('submit', async function(e){
|
|
e.preventDefault();
|
|
clearStatus();
|
|
resultEl.hidden = true;
|
|
|
|
const file = fileInput.files && fileInput.files[0];
|
|
if(!file){
|
|
showStatus('Please choose a file first.', 'error');
|
|
return;
|
|
}
|
|
|
|
const data = new FormData();
|
|
data.append('file', file);
|
|
|
|
setLoading(true);
|
|
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();
|
|
}
|
|
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');
|
|
} 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);
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
{{end}}
|