security

src/public/app.js

@@ -6,6 +6,7 @@ const STORAGE_KEY = "filehost.uploads";
 
 const dropzone = $("dropzone");
 const fileInput = $("fileInput");
+const pwInput = $("pwInput");
 const progress = $("progress");
 const progressBar = $("progressBar");
 const progressPct = $("progressPct");
@@ -14,6 +15,7 @@ const result = $("result");
 const resultUrl = $("resultUrl");
 const resultName = $("resultName");
 const resultSize = $("resultSize");
+const resultLock = $("resultLock");
 const copyBtn = $("copyBtn");
 const deleteBtn = $("deleteBtn");
 const againBtn = $("againBtn");
@@ -57,10 +59,12 @@ function reset() {
   uploading = false;
   current = null;
   result.classList.add("hidden");
+  resultLock.classList.add("hidden");
   progress.classList.add("hidden");
   progressBar.style.width = "0%";
   progressPct.textContent = "0%";
   fileInput.value = "";
+  pwInput.value = "";
   clearNotice();
 }
 
@@ -160,6 +164,13 @@ function renderList() {
     name.textContent = item.originalName;
     name.title = item.originalName;
 
+    if (item.protected) {
+      const lock = document.createElement("span");
+      lock.className = "lock";
+      lock.textContent = "Password protected";
+      name.appendChild(lock);
+    }
+
     const sub = document.createElement("span");
     sub.className = "file-item-sub";
     let subText = formatBytes(item.size || 0);
@@ -182,7 +193,6 @@ function renderList() {
     dl.className = "btn-link";
     dl.href = downloadUrl(item);
     dl.textContent = "Download";
-    dl.setAttribute("download", "");
     dl.title = "Open download link";
 
     const copy = document.createElement("button");
@@ -243,6 +253,7 @@ function showResult(data) {
   resultName.textContent = data.originalName;
   resultSize.textContent = formatBytes(data.size);
   resultUrl.value = downloadUrl(data);
+  resultLock.classList.toggle("hidden", !data.protected);
   current = data;
   addUpload({
     id: data.id,
@@ -250,6 +261,7 @@ function showResult(data) {
     url: data.url,
     originalName: data.originalName,
     size: data.size,
+    protected: !!data.protected,
     createdAt: new Date().toISOString(),
   });
 }
@@ -264,6 +276,7 @@ function startUpload(file) {
 
   const xhr = new XMLHttpRequest();
   const form = new FormData();
+  if (pwInput.value) form.append("password", pwInput.value);
   form.append("file", file);
 
   xhr.upload.addEventListener("progress", (e) => {

src/public/index.html

@@ -19,6 +19,16 @@
         <p class="dz-sub">or click to choose</p>
       </div>
 
+      <div class="pw-row">
+        <input
+          type="password"
+          id="pwInput"
+          placeholder="Optional password (protects the download)"
+          autocomplete="off"
+          aria-label="Optional download password"
+        />
+      </div>
+
       <div id="progress" class="progress hidden">
         <div class="progress-label">
           <span id="progressName"></span>
@@ -33,6 +43,7 @@
         <div class="result-meta">
           <strong id="resultName"></strong>
           <span id="resultSize"></span>
+          <span id="resultLock" class="lock hidden">Password protected</span>
         </div>
         <div class="url-row">
           <input id="resultUrl" type="text" readonly aria-label="Download URL" />

src/public/style.css

@@ -75,6 +75,38 @@ h1 {
   font-size: 13px;
 }
 
+.pw-row {
+  margin-top: 12px;
+}
+
+.pw-row input {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 13px;
+}
+
+.pw-row input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.lock {
+  display: inline-block;
+  margin-left: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--muted);
+  background: rgba(79, 140, 255, 0.12);
+  border: 1px solid rgba(79, 140, 255, 0.3);
+  border-radius: 99px;
+  padding: 2px 8px;
+  vertical-align: middle;
+}
+
 .progress {
   margin-top: 20px;
 }