@putkoff/abstract-securefiles 0.0.48 → 0.0.50

package/src/UploadPanel.tsx

@@ -0,0 +1,217 @@
+import React, { useRef, useState } from "react";
+import type { SecureFilesApi } from "./api";
+import { FolderSelect } from "./FolderSelect";
+
+interface Queued {
+  file: File;
+  relPath: string;
+  progress: number;
+  error?: string;
+  done?: boolean;
+}
+
+function readEntries(reader: any): Promise<any[]> {
+  return new Promise((resolve, reject) => reader.readEntries(resolve, reject));
+}
+
+async function walkEntry(entry: any, prefix: string, out: { file: File; relPath: string }[]) {
+  if (entry.isFile) {
+    const file: File = await new Promise((resolve, reject) => entry.file(resolve, reject));
+    out.push({ file, relPath: prefix + file.name });
+  } else if (entry.isDirectory) {
+    const reader = entry.createReader();
+    let batch: any[];
+    do {
+      batch = await readEntries(reader);
+      for (const child of batch) await walkEntry(child, `${prefix}${entry.name}/`, out);
+    } while (batch.length > 0);
+  }
+}
+
+async function filesFromDrop(dt: DataTransfer) {
+  const out: { file: File; relPath: string }[] = [];
+  const entries = Array.from(dt.items || [])
+    .map((item) => (item as any).webkitGetAsEntry?.())
+    .filter(Boolean);
+  if (entries.length) {
+    for (const entry of entries) await walkEntry(entry, "", out);
+  } else {
+    for (const file of Array.from(dt.files)) out.push({ file, relPath: file.name });
+  }
+  return out;
+}
+
+function joinTarget(target: string, relPath: string) {
+  const clean = target.trim().replace(/^\/+|\/+$/g, "");
+  return clean ? `${clean}/${relPath}` : relPath;
+}
+
+function CloudIcon() {
+  return (
+    <svg className="sf-drop__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
+      />
+    </svg>
+  );
+}
+
+export function UploadPanel({
+  api,
+  folders,
+  onUploaded,
+}: {
+  api: SecureFilesApi;
+  folders: string[];
+  onUploaded: () => void;
+}) {
+  const [queue, setQueue] = useState<Queued[]>([]);
+  const [mode, setMode] = useState<"files" | "folder">("files");
+  const [target, setTarget] = useState("");
+  const [dragging, setDragging] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const folderInput = useRef<HTMLInputElement>(null);
+
+  const enqueue = (items: { file: File; relPath: string }[]) => {
+    setMessage(null);
+    setQueue((q) => {
+      const kept = q.filter((x) => !x.done);
+      const seen = new Set(kept.map((x) => x.relPath));
+      return [...kept, ...items.filter((i) => !seen.has(i.relPath)).map((i) => ({ ...i, progress: 0 }))];
+    });
+  };
+
+  const openPicker = () => (mode === "folder" ? folderInput : fileInput).current?.click();
+
+  const fromInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    enqueue(files.map((file) => ({ file, relPath: (file as any).webkitRelativePath || file.name })));
+    e.target.value = "";
+  };
+
+  const uploadAll = async () => {
+    setBusy(true);
+    setMessage(null);
+    let failed = 0;
+    for (let i = 0; i < queue.length; i++) {
+      const item = queue[i];
+      if (item.done) continue;
+      const set = (patch: Partial<Queued>) =>
+        setQueue((q) => q.map((x, idx) => (idx === i ? { ...x, ...patch } : x)));
+      try {
+        await api.upload(item.file, joinTarget(target, item.relPath), (p) => set({ progress: p }));
+        set({ progress: 1, done: true, error: undefined });
+      } catch (err) {
+        failed++;
+        set({ error: err instanceof Error ? err.message : String(err) });
+      }
+    }
+    setBusy(false);
+    setMessage(failed ? `${failed} upload(s) failed` : "Upload complete");
+    if (!failed) setQueue([]);
+    onUploaded();
+  };
+
+  const pending = queue.filter((q) => !q.done);
+
+  return (
+    <section className="sf-upload">
+      <div className="sf-row sf-mode" role="radiogroup" aria-label="Choose what clicking the upload area picks">
+        <label className="sf-check sf-check--inline">
+          <input type="radio" checked={mode === "files"} onChange={() => setMode("files")} /> Files
+        </label>
+        <label className="sf-check sf-check--inline">
+          <input type="radio" checked={mode === "folder"} onChange={() => setMode("folder")} /> Folder
+        </label>
+        <span className="sf-muted">(drag-and-drop accepts either)</span>
+      </div>
+
+      <div
+        className={`sf-drop${dragging ? " sf-drop--active" : ""}`}
+        role="button"
+        tabIndex={0}
+        aria-label={`Upload area: click to choose ${mode === "folder" ? "a folder" : "files"}, or drop files or folders`}
+        onClick={openPicker}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openPicker();
+          }
+        }}
+        onDragEnter={(e) => {
+          e.preventDefault();
+          setDragging(true);
+        }}
+        onDragOver={(e) => e.preventDefault()}
+        onDragLeave={(e) => {
+          if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragging(false);
+        }}
+        onDrop={async (e) => {
+          e.preventDefault();
+          setDragging(false);
+          enqueue(await filesFromDrop(e.dataTransfer));
+        }}
+      >
+        <CloudIcon />
+        <div>
+          <p className="sf-drop__title">Drag &amp; drop files or folders here</p>
+          <p className="sf-muted">Click anywhere to choose {mode === "folder" ? "a folder" : "files"}</p>
+          {pending.length > 0 && (
+            <p className="sf-drop__count">
+              {pending.length} item{pending.length === 1 ? "" : "s"} queued
+            </p>
+          )}
+        </div>
+      </div>
+      <input ref={fileInput} type="file" multiple hidden onChange={fromInput} />
+      <input
+        ref={folderInput}
+        type="file"
+        multiple
+        hidden
+        onChange={fromInput}
+        {...({ webkitdirectory: "", directory: "" } as any)}
+      />
+
+      <div className="sf-row">
+        <FolderSelect label="Upload into" folders={folders} value={target} onChange={setTarget} />
+        <button type="button" className="sf-btn sf-btn--primary" disabled={busy || !pending.length} onClick={uploadAll}>
+          {busy ? "Uploading…" : `Upload ${pending.length}`}
+        </button>
+        {queue.length > 0 && !busy && (
+          <button type="button" className="sf-btn" onClick={() => setQueue([])}>
+            Clear
+          </button>
+        )}
+      </div>
+
+      {message && (
+        <p className={message.includes("failed") ? "sf-error" : "sf-muted"} role="status">
+          {message}
+        </p>
+      )}
+
+      {queue.length > 0 && (
+        <ul className="sf-queue">
+          {queue.map((q, i) => (
+            <li key={`${q.relPath}-${i}`}>
+              <span className="sf-queue__name">{joinTarget(target, q.relPath)}</span>
+              {q.error ? (
+                <span className="sf-error">{q.error}</span>
+              ) : (
+                <span className="sf-row">
+                  <progress max={1} value={q.progress} />
+                  <span className="sf-muted">{Math.round(q.progress * 100)}%</span>
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

package/src/api.ts

@@ -0,0 +1,108 @@
+import type { BrowseResult, LinkRoot, RootChallenge, SecureFile, ShareUpdate } from "./types";
+
+export const DEFAULT_API_BASE = "https://api.abstractendeavors.com";
+
+export class ApiError extends Error {
+  constructor(message: string, public status: number) {
+    super(message);
+  }
+}
+
+async function errorFrom(res: Response): Promise<ApiError> {
+  let message = `${res.status} ${res.statusText}`;
+  try {
+    const body = await res.json();
+    message = body?.message || body?.error || message;
+  } catch {
+    /* non-JSON error body */
+  }
+  if (res.status === 401) message = "Please log in to use Secure Files.";
+  return new ApiError(message, res.status);
+}
+
+export function createApi(apiBase: string = DEFAULT_API_BASE) {
+  const root = `${apiBase.replace(/\/+$/, "")}/secure-files`;
+
+  async function json<T>(path: string, init: RequestInit = {}): Promise<T> {
+    const res = await fetch(`${root}${path}`, {
+      credentials: "include",
+      ...init,
+      headers: { Accept: "application/json", ...(init.body ? { "Content-Type": "application/json" } : {}) },
+    });
+    if (!res.ok) throw await errorFrom(res);
+    return res.json();
+  }
+
+  return {
+    list: () => json<{ user_name: string; is_admin: boolean; files: SecureFile[] }>("/userInfo"),
+
+    roots: () => json<{ roots: LinkRoot[] }>("/admin/roots"),
+
+    requestRoot: (path: string) =>
+      json<{ challenge: RootChallenge }>("/admin/roots", { method: "POST", body: JSON.stringify({ path }) }),
+
+    confirmRoot: (nonce: string, signature: string, label?: string) =>
+      json<{ roots: LinkRoot[] }>("/admin/roots/confirm", {
+        method: "POST",
+        body: JSON.stringify({ nonce, signature, label }),
+      }),
+
+    removeRoot: (id: number) => json<{ roots: LinkRoot[] }>(`/admin/roots/${id}`, { method: "DELETE" }),
+
+    browse: (path: string) => json<BrowseResult>(`/admin/browse?path=${encodeURIComponent(path)}`),
+
+    link: (paths: string[], folder: string) =>
+      json<{ linked: string[]; errors: { path: string; error: string }[] }>("/admin/link", {
+        method: "POST",
+        body: JSON.stringify({ paths, folder }),
+      }),
+
+    updateShare: (update: ShareUpdate) =>
+      json<{ file: SecureFile }>("/files/share", { method: "PATCH", body: JSON.stringify(update) }),
+
+    remove: (ids: number[]) =>
+      json<{ removed: number[]; errors: { id: number; error: string }[] }>("/remove", {
+        method: "POST",
+        body: JSON.stringify({ ids }),
+      }),
+
+    /** Hand the download to the browser so it streams to disk (native progress + resume, no memory limit). */
+    download(ids: number[]): void {
+      const a = document.createElement("a");
+      a.href = `${root}/download?ids=${ids.join(",")}`;
+      a.rel = "noopener";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    },
+
+    upload(file: File, relPath: string, onProgress?: (fraction: number) => void): Promise<void> {
+      return new Promise((resolve, reject) => {
+        const form = new FormData();
+        form.append("file", file);
+        form.append("rel_path", relPath);
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", `${root}/upload`);
+        xhr.withCredentials = true;
+        xhr.upload.onprogress = (e) => {
+          if (e.lengthComputable) onProgress?.(e.loaded / e.total);
+        };
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) return resolve();
+          let message = `Upload failed (${xhr.status})`;
+          try {
+            message = JSON.parse(xhr.responseText)?.message || message;
+          } catch {
+            /* non-JSON */
+          }
+          if (xhr.status === 401) message = "Please log in to use Secure Files.";
+          reject(new ApiError(message, xhr.status));
+        };
+        xhr.onerror = () => reject(new ApiError("Network error during upload", 0));
+        xhr.send(form);
+      });
+    },
+  };
+}
+
+export type SecureFilesApi = ReturnType<typeof createApi>;

package/src/index.ts

@@ -1,8 +1,4 @@
-export { FileRow, ShareModal, FileTable, Upload } from './FileHandlers';
-export { useFiles } from './hooks';
-export * from './file_utils';
-export * from './hooks';
-export * from './UI';
-export * from './types';
-export * from './styles';
-export { SecureFiles } from './App'
+export { default as SecureFiles } from "./SecureFiles";
+export { createApi, DEFAULT_API_BASE, ApiError } from "./api";
+export type { SecureFilesApi } from "./api";
+export type { SecureFile, ShareUpdate, SecureFilesProps, LinkRoot, RootChallenge, BrowseResult } from "./types";