feat(downloads): local-upload UI — drag-drop dialog + progress (E7 S5c)

UploadDialog (drag-drop + native picker + optional display name) opened
from a new Upload button in the queue add-row. Uploads stream through a
new XHR helper (uploadReq in api/core) so the dialog shows real 0-100%
progress with a cancel — fetch/req can't report upload progress. The
upload lands as an already-done job; the S5b file-kind row gates it to
download+share. i18n HU/EN; upload cap/empty errors localize via the
shared structured-detail path.

frontend/src/components/DownloadCenter.tsx

@@ -17,6 +17,7 @@ import {
   Share2,
   Pencil,
   Trash2,
+  UploadCloud,
 } from "lucide-react";
 import Tabs from "./Tabs";
 import { PageToolbar } from "./PageShell";
@@ -24,6 +25,7 @@ import { LoadingState, StateMessage } from "./QueryState";
 // Lazy: these dialogs/editors open on demand, so they stay out of the Downloads page chunk until
 // used (the video editor in particular is heavy — filmstrip + scrubber).
 const DownloadDialog = lazy(() => import("./DownloadDialog"));
+const UploadDialog = lazy(() => import("./UploadDialog"));
 const ProfileEditor = lazy(() => import("./ProfileEditor"));
 const VideoEditor = lazy(() => import("./VideoEditor"));
 const ShareDialog = lazy(() => import("./ShareDialog"));
@@ -49,6 +51,7 @@ export default function DownloadCenter() {
   const [tab, setTab] = useState("queue");
   const [addUrl, setAddUrl] = useState("");
   const [addSource, setAddSource] = useState<string | null>(null);
+  const [upload, setUpload] = useState(false);
   const [manage, setManage] = useState(false);
   const [metaJob, setMetaJob] = useState<DownloadJob | null>(null);
   const [shareJob, setShareJob] = useState<DownloadJob | null>(null);
@@ -207,6 +210,16 @@ export default function DownloadCenter() {
               >
                 {t("downloads.page.add")}
               </Button>
+              {/* Local upload is a peer to "add a URL": a general file → the same library (E7 S5c). */}
+              <Button
+                variant="outline"
+                size="sm"
+                icon={<UploadCloud className="w-4 h-4" />}
+                onClick={() => setUpload(true)}
+                className="shrink-0"
+              >
+                {t("downloads.page.upload")}
+              </Button>
             </div>
             <div className="space-y-2">
               {queue.map((job) => (
@@ -406,6 +419,7 @@ export default function DownloadCenter() {
               }}
             />
           )}
+          {upload && <UploadDialog onClose={() => setUpload(false)} />}
           {manage && <ProfileEditor onClose={() => setManage(false)} />}
           {metaJob && <MetaEditModal job={metaJob} onClose={() => setMetaJob(null)} />}
           {shareJob && <ShareDialog job={shareJob} onClose={() => setShareJob(null)} />}

frontend/src/components/UploadDialog.dom.test.tsx

@@ -0,0 +1,75 @@
+// @vitest-environment jsdom
+//
+// E7·S5c — the local-upload dialog. It's a general file upload (any type, no format list): a picked
+// file surfaces its name+size, and Upload streams it through api.uploadDownload (the XHR-progress
+// path). This drives the real dialog against a mocked api so we can assert the file + optional name
+// actually reach the ingest call, and that the success toast points at the library. i18n is
+// key-passthrough.
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const h = vi.hoisted(() => ({
+  uploadDownload: vi.fn(async (_f: File, _o: unknown) => ({ id: 42 })),
+  notify: vi.fn(),
+}));
+
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
+});
+vi.mock("../lib/api", () => ({ api: { uploadDownload: h.uploadDownload } }));
+vi.mock("../lib/downloads", () => ({ invalidateDownloads: vi.fn() }));
+vi.mock("../lib/notifications", () => ({ notify: h.notify }));
+vi.mock("../lib/nav", () => ({ navigateTo: vi.fn() }));
+
+import UploadDialog from "./UploadDialog";
+
+const wrap = (onClose = vi.fn()) => {
+  const qc = new QueryClient();
+  return render(
+    <QueryClientProvider client={qc}>
+      <UploadDialog onClose={onClose} />
+    </QueryClientProvider>,
+  );
+};
+
+// The dialog portals into document.body, so query the whole document, not the render container.
+const fileInput = () => document.querySelector('input[type="file"]') as HTMLInputElement;
+
+beforeEach(() => {
+  h.uploadDownload.mockClear();
+  h.notify.mockClear();
+});
+afterEach(cleanup);
+
+describe("UploadDialog", () => {
+  it("shows the picked file's name and uploads it with the optional name", async () => {
+    const onClose = vi.fn();
+    wrap(onClose);
+    const f = new File(["hello world"], "notes.pdf", { type: "application/pdf" });
+    fireEvent.change(fileInput(), { target: { files: [f] } });
+
+    // The drop zone now surfaces the file name.
+    expect(screen.getByText("notes.pdf")).toBeTruthy();
+
+    // Optional display name.
+    const nameBox = screen.getByPlaceholderText("downloads.upload.namePlaceholder");
+    fireEvent.change(nameBox, { target: { value: "My notes" } });
+
+    fireEvent.click(screen.getByText("downloads.upload.submit"));
+
+    await waitFor(() => expect(h.uploadDownload).toHaveBeenCalledTimes(1));
+    const [passedFile, opts] = h.uploadDownload.mock.calls[0]!;
+    expect(passedFile).toBe(f);
+    expect((opts as { displayName?: string }).displayName).toBe("My notes");
+    await waitFor(() => expect(h.notify).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(onClose).toHaveBeenCalled());
+  });
+
+  it("keeps Upload disabled until a file is chosen", () => {
+    wrap();
+    const btn = screen.getByText("downloads.upload.submit").closest("button")!;
+    expect(btn.disabled).toBe(true);
+  });
+});

frontend/src/components/UploadDialog.tsx

@@ -0,0 +1,152 @@
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "@tanstack/react-query";
+import { UploadCloud, File as FileIcon } from "lucide-react";
+import Modal from "./Modal";
+import { Button } from "./ui/Button";
+import { api } from "../lib/api";
+import { invalidateDownloads } from "../lib/downloads";
+import { notify } from "../lib/notifications";
+import { navigateTo } from "../lib/nav";
+import { formatBytes } from "../lib/format";
+import { inputCls } from "./ui/form";
+
+// Local-file ingest (E7 S5c · D5-A). A general upload — ANY file type, no format list: media
+// (video/audio) joins the library with the full function set, a generic file is download-only. The
+// file is streamed to the server via XHR so this dialog can show real upload progress. On success it
+// lands in the Library as an already-`done` job, so we invalidate + point the user there.
+export default function UploadDialog({ onClose }: { onClose: () => void }) {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const [file, setFile] = useState<File | null>(null);
+  const [name, setName] = useState("");
+  const [dragOver, setDragOver] = useState(false);
+  const [pct, setPct] = useState<number | null>(null); // null = idle; 0–100 while uploading
+  const inputRef = useRef<HTMLInputElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  const busy = pct !== null;
+
+  const pick = () => inputRef.current?.click();
+
+  const submit = async () => {
+    if (!file || busy) return;
+    const ac = new AbortController();
+    abortRef.current = ac;
+    setPct(0);
+    try {
+      await api.uploadDownload(file, {
+        displayName: name.trim() || undefined,
+        onProgress: setPct,
+        signal: ac.signal,
+      });
+      invalidateDownloads(qc);
+      notify({
+        level: "success",
+        message: t("downloads.upload.added"),
+        action: { label: t("downloads.dialog.view"), onClick: () => navigateTo("downloads") },
+      });
+      onClose();
+    } catch {
+      // An aborted upload (Cancel) or a server rejection (cap/quota — already surfaced by the global
+      // error modal, like every other req call). Re-arm the form so the user can retry or pick again.
+      setPct(null);
+      abortRef.current = null;
+    }
+  };
+
+  return (
+    <Modal title={t("downloads.upload.title")} onClose={onClose}>
+      <p className="text-sm text-muted mb-4">{t("downloads.upload.hint")}</p>
+
+      {/* Drop zone doubles as the picker trigger — a click anywhere opens the native file dialog. */}
+      <button
+        type="button"
+        onClick={pick}
+        onDragOver={(e) => {
+          e.preventDefault();
+          setDragOver(true);
+        }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setDragOver(false);
+          const f = e.dataTransfer.files?.[0];
+          if (f) {
+            setFile(f);
+            setName("");
+          }
+        }}
+        disabled={busy}
+        className={`w-full flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-4 py-8 text-center transition disabled:opacity-60 ${
+          dragOver ? "border-accent bg-accent/5" : "border-border hover:border-fg/40"
+        }`}
+      >
+        {file ? (
+          <>
+            <FileIcon className="w-6 h-6 text-muted" />
+            <span className="text-sm font-medium break-all">{file.name}</span>
+            <span className="text-xs text-muted">{formatBytes(file.size)}</span>
+          </>
+        ) : (
+          <>
+            <UploadCloud className="w-7 h-7 text-muted" />
+            <span className="text-sm text-muted">
+              {dragOver ? t("downloads.upload.dropActive") : t("downloads.upload.drop")}
+            </span>
+          </>
+        )}
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        className="hidden"
+        onChange={(e) => {
+          const f = e.target.files?.[0];
+          if (f) {
+            setFile(f);
+            setName("");
+          }
+          e.target.value = ""; // let re-picking the same file fire onChange again
+        }}
+      />
+
+      <label className="block text-sm font-medium mt-4 mb-1">
+        {t("downloads.upload.nameLabel")}
+      </label>
+      <input
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder={t("downloads.upload.namePlaceholder")}
+        disabled={busy}
+        className={`${inputCls} mb-5`}
+      />
+
+      {busy && (
+        <div className="mb-5" aria-live="polite">
+          <div className="h-2 rounded-full bg-surface overflow-hidden">
+            <div
+              className="h-full bg-accent transition-[width] duration-150"
+              style={{ width: `${pct ?? 0}%` }}
+            />
+          </div>
+          <p className="text-xs text-muted mt-1.5 text-center">
+            {t("downloads.upload.uploading", { pct: pct ?? 0 })}
+          </p>
+        </div>
+      )}
+
+      <div className="flex justify-end gap-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => (busy ? abortRef.current?.abort() : onClose())}
+        >
+          {t("downloads.actions.cancel")}
+        </Button>
+        <Button variant="primary" size="sm" onClick={submit} disabled={!file || busy}>
+          {t("downloads.upload.submit")}
+        </Button>
+      </div>
+    </Modal>
+  );
+}