Added web upload

2025-08-09 15:05:48 +02:00
parent 1d0fe30480
commit eed2a9ed12
8 changed files with 179 additions and 1 deletions
--- a/views/partials/web-upload.html
+++ b/views/partials/web-upload.html
@@ -0,0 +1,117 @@
+{{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">
+    </div>
+    <div class="form-row">
+      <button type="submit" id="upload-btn" class="btn-primary">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}}