@putkoff/abstract-securefiles 0.0.18 → 0.0.21

package/src/FileHandlers/Upload/src/upload_utils.tsx

@@ -0,0 +1,267 @@
+import React, {
+  ChangeEvent,
+  useRef,
+  useState,
+  useCallback,
+  useEffect,
+} from 'react';
+import {
+  CloudArrowUpIcon,
+  Button,
+  uploadFiles,
+  useFiles,
+  currentUsername
+} from './../imports';
+import type { QueuedFile, UploadProps } from './../imports';
+
+export default function Upload({ onUploaded }: UploadProps) {
+  const [queue, setQueue] = useState<QueuedFile[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const [drag, setDrag] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dirs, setDirs] = useState<string[]>([]);
+
+  // — existing files → directory list —
+  const { files, load } = useFiles();
+
+  useEffect(() => {
+    const dirSet = new Set<string>();
+    files.forEach(f => {
+      const parts = f.filepath.split('/');
+      if (parts.length > 1) {
+        parts.pop();
+        dirSet.add(parts.join('/') + '/');
+      }
+    });
+    setDirs(Array.from(dirSet).sort());
+  }, [files]);
+
+  // — directory selection state —
+  const [uploadDir, setUploadDir] = useState<string>('');
+  const [creatingNew, setCreatingNew] = useState(false);
+  const [newDirName, setNewDirName] = useState('');
+
+  // — queue logic —
+  const enqueue = useCallback((files: QueuedFile[]) => {
+    setQueue(prev => {
+      const map = new Map(prev.map(q => [`${q.file.name}-${q.file.size}`, q]));
+      files.forEach(q => map.set(`${q.file.name}-${q.file.size}`, q));
+      return Array.from(map.values());
+    });
+  }, []);
+
+  const extractFromDataTransfer = useCallback(
+    async (dt: DataTransfer): Promise<QueuedFile[]> => {
+      const out: QueuedFile[] = [];
+      const walk = async (entry: any, path = "") => {
+        if (!entry) return;
+        if (entry.isFile) {
+          const file: File = await new Promise(res => entry.file(res));
+          out.push({ file, relPath: path, progress: 0 });
+        } else if (entry.isDirectory) {
+          const reader = entry.createReader();
+          const entries: any[] = await new Promise(r => reader.readEntries(r));
+          await Promise.all(entries.map(e => walk(e, `${path}${entry.name}/`)));
+        }
+      };
+      await Promise.all(Array.from(dt.items).map(i => walk(i.webkitGetAsEntry())));
+      return out;
+    },
+    []
+  );
+
+  const handleSelect = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    const queued: any = files.map(f => ({
+      file: f,
+      relPath: (f as any).webkitRelativePath.replace(/[^/]*$/, ""),
+      progress: 0,
+    }));
+    enqueue(queued);
+    e.target.value = "";
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    const files = await extractFromDataTransfer(e.dataTransfer);
+    enqueue(files.length ? files : []);
+    setDrag(false);
+  };
+
+  const handleUploadAll = async () => {
+    if (!queue.length) {
+      setMessage("No files queued.");
+      return;
+    }
+    setBusy(true);
+    setMessage(null);
+    const targetDir = creatingNew
+      ? (newDirName.trim().replace(/^\/+|\/+$/g, "") + "/")
+      : uploadDir;
+    try {
+      for (const { file, relPath } of queue) {
+        await uploadFiles(file, targetDir + relPath);
+        setQueue(cur =>
+          cur.map(item =>
+            item.file === file ? { ...item, progress: 100 } : item
+          )
+        );
+      }
+      setQueue([]);
+      await onUploaded();
+      setMessage("Upload complete");
+      load();
+    } catch {
+      setMessage("Upload failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // — directory selector handlers —
+  const handleDirChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const v = e.target.value;
+    if (v === "__new__") {
+      setCreatingNew(true);
+      setNewDirName("");
+    } else {
+      setCreatingNew(false);
+      setUploadDir(v);
+    }
+  };
+  const acceptNewDir = () => {
+    // normalize like before
+    const cleanName = newDirName.trim().replace(/^\/+|\/+$/g, '');
+    const normalized = `${uploadDir}${cleanName}/`;
+    // ① add it to our dirs list if it isn't there already
+    setDirs(prev => {
+      if (prev.includes(normalized)) return prev;
+      return [...prev, normalized].sort();
+    });
+
+    // ② select it & flip back to the <select>
+    setUploadDir(normalized);
+    setCreatingNew(false);
+    setNewDirName('');
+  };
+
+  return (
+    <div className="form-container max-w-2xl mx-auto">
+      {/* drop area */}
+      <div
+        className={`flex items-center border-2 border-dashed rounded-lg p-6 bg-white shadow-md space-x-4 transition-shadow duration-150
+          ${drag ? 'border-indigo-500 bg-indigo-50 shadow-lg' : 'border-gray-300 hover:shadow-lg'}`}
+        onClick={() => inputRef.current?.click()}
+        onDragEnter={e => { e.preventDefault(); setDrag(true); }}
+        onDragOver={e => e.preventDefault()}
+        onDragLeave={() => setDrag(false)}
+        onDrop={handleDrop}
+        role="region"
+        aria-label="File upload area"
+      >
+        <CloudArrowUpIcon
+          style={{ width: 300, height: 300 }}
+          className="text-gray-500 mb-3"
+          aria-hidden="true"
+        />
+        <div className="flex-1">
+          <p className="text-base font-semibold text-gray-700">
+            Drag & drop files or folders here
+          </p>
+          {queue.length > 0 && (
+            <p className="mt-1 text-sm text-gray-600">
+              {queue.length} item{queue.length > 1 && 's'} queued
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* hidden file input */}
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        className="hidden"
+        {...({ webkitdirectory: true, directory: '' } as any)}
+        onChange={handleSelect}
+      />
+
+      {/* bottom controls */}
+      <div className="flex items-center justify-between mt-4">
+        {/* directory selector / new dir input */}
+        <div className="flex-1 mr-4">
+          {!creatingNew ? (
+            <select
+              value={uploadDir}
+              onChange={handleDirChange}
+              className="form-select w-full"
+            >
+              {dirs.map(d => (
+                <option key={d} value={d}>{d}</option>
+              ))}
+              <option value="__new__">+ Create new directory…</option>
+            </select>
+          ) : (
+            <div className="flex">
+              <input
+                type="text"
+                value={newDirName}
+                placeholder="new-folder-name"
+                onChange={e => setNewDirName(e.target.value)}
+                onBlur={acceptNewDir}
+                onKeyDown={e => e.key === 'Enter' && acceptNewDir()}
+                className="form-input flex-1"
+              />
+              <Button onClick={acceptNewDir} className="ml-2">
+                OK
+              </Button>
+            </div>
+          )}
+        </div>
+
+        {/* upload button */}
+        <Button
+          color="blue"
+          variant="primary"
+          onClick={handleUploadAll}
+          disabled={busy || !queue.length}
+        >
+          {busy ? 'Uploading…' : `Upload ${queue.length}`}
+        </Button>
+      </div>
+
+      {message && (
+        <p
+          className={`text-center text-sm ${message.includes('failed') ? 'text-red-600' : 'text-gray-600'
+            }`}
+          role="alert"
+        >
+          {message}
+        </p>
+      )}
+
+      {/* queued list */}
+      {queue.length > 0 && (
+        <div className="wm-container mt-4">
+          <h3 className="mb-2 text-sm font-semibold text-gray-700">Queued Files</h3>
+          <ul className="max-h-64 space-y-4 overflow-y-auto">
+            {queue.map(({ file, relPath, progress }) => (
+              <li key={`${file.name}-${file.size}`} className="space-y-1">
+                <div className="flex justify-between items-center">
+                  <span className="truncate text-sm text-gray-800">
+                    {relPath}{file.name}
+                  </span>
+                  <span className="text-xs text-gray-500">{progress}%</span>
+                </div>
+                <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
+                  <div className="bg-indigo-600 h-2" style={{ width: `${progress}%` }} />
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/FileHandlers/imports.ts

@@ -0,0 +1,20 @@
+export type {QueuedFile, FileItem,FileTableProps,UploadProps,ShareModalProps,FileRowProps } from './../imports';
+export { 
+    CloudArrowUpIcon,
+    currentUsername,
+    fetchSharePatch,
+    Button, 
+    Checkbox, 
+    Input, 
+    Spinner,
+    useEffect, 
+    useRef, 
+    useState,
+    useCallback,
+    ClipboardIcon,
+    createPortal,
+    secureFetchIt,
+    
+    } from './../imports';
+export {useFiles} from './../hooks'
+export { downloadFile,uploadFiles} from './../file_utils'

package/src/FileHandlers/index.ts

@@ -0,0 +1,4 @@
+export {FileRow} from './FileRow';
+export {FileTable} from './FileTable';
+export {ShareModal} from './ShareModal';
+export {Upload} from './Upload';

package/src/UI/index.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+export type String = string | undefined | null; 
+export type Astring = any[] | string | undefined | null; 
+export type Trailing = React.ReactNode
+export type ImportElem = {
+ reaxlEle:React.InputHTMLAttributes<HTMLInputElement>;
+ label?: String;
+ trailing?:Trailing;
+ className?: String; 
+ classNames?:Astring;
+}
+
+// Utility to convert input to array
+function ensure_list(obj: Astring | null | undefined): string[] {
+  if (Array.isArray(obj)) return obj.filter(Boolean);
+  if (typeof obj === 'string') return obj.split(' ').filter(Boolean);
+  return [];
+}
+
+// Get list and length safely
+function getListAndLen(obj: Astring | null | undefined): { return_obj: string[]; ob_len: number } {
+  const return_obj = ensure_list(obj);
+  const ob_len = return_obj.length;
+  return { return_obj, ob_len };
+}
+
+// Combine class names with defaults
+function combineClassNames(classNames: Astring = [], defaultClasses: Astring = ['form-group', 'form-label', 'flex', 'gap-2']): string[] {
+  const { return_obj: inputClasses } = getListAndLen(classNames);
+  const { return_obj: defaultClassList } = getListAndLen(defaultClasses);
+  
+  // Combine and remove duplicates
+  const combined = [...new Set([...defaultClassList, ...inputClasses])];
+  
+  console.log(`Combined classes (length: ${combined.length}): ${combined.join(' ')}`);
+  return combined;
+}
+
+export function Button({
+  children,
+  color = 'gray',
+  variant = 'default',
+  className = '',
+  ...rest
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  color?: 'gray' | 'green' | 'blue';
+  variant?: 'default' | 'icon' | 'primary' | 'secondary';
+  className?: string;
+}) {
+  const variantClasses = {
+    default: 'btn',
+    icon: 'btn-icon',
+    primary: 'btn-primary',
+    secondary: 'btn-secondary',
+  };
+
+  const colorClasses = {
+    gray: '',
+    green: variant === 'primary' ? 'btn-success' : 'btn-secondary',
+    blue: variant === 'primary' ? 'btn-primary' : 'btn-secondary',
+  };
+
+  const classes = combineClassNames([variantClasses[variant], colorClasses[color], className]);
+  
+  return (
+    <button className={classes.join(' ')} {...rest}>
+      {children}
+    </button>
+  );
+}
+
+export function Checkbox({
+  label,
+  className = '',
+  classNames = [],
+  ...rest
+}: ImportElem) {
+  const classes = combineClassNames(classNames, ['checkbox', 'wm-checkbox']);
+  
+  return (
+    <label className={classes.join(' ')}>
+      <input type="checkbox" className="wm-checkbox" {...rest} />
+      {label && <span>{label}</span>}
+    </label>
+  );
+}
+
+export function Input({
+  label,
+  trailing,
+  className = '',
+  classNames = [],
+  ...rest
+}: ImportElem) {
+  const classes = combineClassNames(classNames, ['form-group', 'flex', 'gap-2']);
+  const inputClasses = combineClassNames(className, ['form-input']);
+  
+  return (
+    <label className={classes.join(' ')}>
+      {label && <span className="form-label">{label}</span>}
+      <div className="flex gap-2">
+        <input className={inputClasses.join(' ')} {...rest} />
+        {trailing}
+      </div>
+    </label>
+  );
+}
+
+export function Spinner() {
+  const classes = combineClassNames('animate-pulse');
+  return <p className={classes.join(' ')}>Loading…</p>;
+}

package/src/custom.d.ts

@@ -0,0 +1,7 @@
+// src/custom.d.ts
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly REACT_APP_API_BASE_URL: string;
+    // add more as needed...
+  }
+}

package/src/file_utils/imports.ts

@@ -0,0 +1,2 @@
+export { fetchSharePatch, requireToken, alertit, fetchIt, stripPrefixes, make_path, secureFetchIt } from "./../imports";
+export type { FileItem, ApiRow } from "./../types";

package/src/file_utils/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/src/file_utils/src/delete_utils/imports.ts

@@ -0,0 +1 @@
+export { secureFetchIt,requireToken,alertit } from "./../imports";

package/src/file_utils/src/delete_utils/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/src/file_utils/src/delete_utils/src/delete_row.ts

@@ -0,0 +1,11 @@
+
+import {removeFile} from './delete_select'
+import {alertit} from './../imports'
+/** Given a checkbox inside a table-row → download that row’s file. */
+export async function removeRow(cb: HTMLInputElement): Promise<void> {
+  const row = cb.closest("tr") as HTMLTableRowElement | null;
+  alertit(row)
+  if (row && row?.id) await removeFile(row);
+}
+
+

package/src/file_utils/src/delete_utils/src/delete_select.ts

@@ -0,0 +1,9 @@
+import {requireToken,secureFetchIt} from './../imports';
+
+export async function removeFile(item: any): Promise<void> {
+  const resp = await secureFetchIt( "remove", item, "POST", null, false,false,true) as any;
+  if (!resp || resp === false || resp?.result === false) {
+    throw new Error(`could not delete data: “${item.filename}”`);
+  }
+  
+}

package/src/file_utils/src/delete_utils/src/delete_selected.ts

@@ -0,0 +1,15 @@
+import {removeFile} from './delete_select';
+
+
+/** Bulk download: pass a NodeList or array of checkboxes. */
+export async function removeSelected(checkboxes: Iterable<HTMLInputElement>): Promise<void> {
+  const list = Array.from(checkboxes);
+  if (!list.length) {
+    alert("No files selected.");
+    return;
+  }
+  for (const cb of list) {
+    alert(cb);
+    await removeFile(cb);
+  }
+}

package/src/file_utils/src/delete_utils/src/index.ts

@@ -0,0 +1,3 @@
+export * from './delete_select';
+export * from './delete_selected';
+export * from './delete_row';

package/src/file_utils/src/download_utils/imports.ts

@@ -0,0 +1,3 @@
+
+export { secureFetchIt, requireToken } from './../imports'
+export type { FileItem } from './../imports'

package/src/file_utils/src/download_utils/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/src/file_utils/src/download_utils/src/direct_download.ts

@@ -0,0 +1,22 @@
+import {triggerDownload} from './trigger_download';
+import {FileItem} from './../imports';
+/** Non-React “direct download” used by some old links (kept for parity) */
+export async function directDownload(item: FileItem): Promise<void> {
+  const token = localStorage.getItem("token");
+  if (!token) throw new Error("No auth token found");
+
+  const res = await fetch("https://abstractendeavors.com/api/secure-files/secure-download/", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+      Accept: "application/octet-stream",
+    },
+
+    body: JSON.stringify(item),
+  });
+
+  if (!res.ok) throw new Error(`Download failed: ${res.status}`);
+  const blob = await res.blob();
+  triggerDownload(blob, item.filename);
+}

package/src/file_utils/src/download_utils/src/download_file.ts

@@ -0,0 +1,24 @@
+import { requireToken, secureFetchIt, FileItem } from './../imports';
+import { triggerDownload } from './trigger_download';
+export async function downloadFile(item: FileItem): Promise<void> {
+  const token = localStorage.getItem("token");
+  if (!token) throw new Error("No auth token found");
+
+  const res = await fetch("https://abstractendeavors.com/api/secure-files/secure-download/", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+      // Don’t over-constrain Accept; let server pick proper content-type
+      // Accept: "application/octet-stream",
+    },
+    body: JSON.stringify(item),
+  });
+
+  if (!res.ok) throw new Error(`Download failed: ${res.status}`);
+
+  // Stream-friendly: if your triggerDownload revokes URL immediately, wait a tick
+  const blob = await res.blob();
+  const name = item.filename || "download";
+  triggerDownload(blob, name); // ensure this waits ~0-100ms before URL.revokeObjectURL
+}

package/src/file_utils/src/download_utils/src/download_select.ts

@@ -0,0 +1,20 @@
+import {requireToken,secureFetchIt,FileItem} from './../imports';
+import {triggerDownload} from './trigger_download';
+export async function downloadSelect(item: FileItem): Promise<void> {
+  const token: string = requireToken();
+  const body = item
+  const headers = {
+    Authorization: `Bearer ${token}`,
+    Accept: "application/octet-stream",
+    "Content-Type": "application/json"
+  }
+  const blob = await secureFetchIt( "download", body, "POST", headers, true, true) as Blob;
+
+
+
+  if (!blob || blob.size === 0) {
+    throw new Error(`Received empty file data for “${item.filename}”`);
+  }
+
+  triggerDownload(blob, item.filename);
+}

package/src/file_utils/src/download_utils/src/index.ts

@@ -0,0 +1,5 @@
+export * from './direct_download'; 
+export * from './download_file'; 
+export * from './download_select'; 
+export * from './target_downloads'; 
+export * from './trigger_download';

package/src/file_utils/src/download_utils/src/target_downloads.ts

@@ -0,0 +1,21 @@
+import {downloadSelect} from './download_select';
+import type {FileItem} from './../imports'
+/** Given a checkbox inside a table-row → download that row’s file. */
+export async function downloadRow(cb: HTMLInputElement): Promise<void> {
+  const row = cb.closest("tr") as HTMLTableRowElement | null;
+  const filepath = cb.value;
+  const filename = row?.children[1]?.textContent?.trim() || "downloaded_file";
+  if (filepath) await downloadSelect({filepath,filename} as any);
+}
+
+/** Bulk download: pass a NodeList or array of checkboxes. */
+export async function downloadSelected(checkboxes: Iterable<HTMLInputElement>): Promise<void> {
+  const list = Array.from(checkboxes);
+  if (!list.length) {
+    alert("No files selected.");
+    return;
+  }
+  for (const cb of list) {
+    await downloadRow(cb);
+  }
+}

package/src/file_utils/src/download_utils/src/trigger_download.ts

@@ -0,0 +1,14 @@
+/** Helper function to trigger file download */
+export function triggerDownload(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = Object.assign(document.createElement("a"), {
+    href: url,
+    download: filename,
+  });
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+
+  console.log(`✅ Successfully downloaded: ${filename}`);
+}

package/src/file_utils/src/imports.ts

@@ -0,0 +1,3 @@
+export type { FileItem, ApiRow } from './../../types/src/types'
+export { alertit, requireToken, secureFetchIt, fetchSharePatch } from './../imports'
+

package/src/file_utils/src/index.ts

@@ -0,0 +1,6 @@
+export * from './download_utils';
+export * from './select_utils'; 
+export * from './upload_utils';
+export * from './delete_utils'; 
+export * from './list_utils';
+export * from './share_utils';

package/src/file_utils/src/list_utils/imports.ts

@@ -0,0 +1,2 @@
+export {secureFetchIt,fetchSharePatch} from './../imports';
+export type { FileItem,ApiRow } from './../imports';

package/src/file_utils/src/list_utils/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/src/file_utils/src/list_utils/src/index.ts

@@ -0,0 +1 @@
+export * from './list_utils';

package/src/file_utils/src/list_utils/src/list_utils.ts

@@ -0,0 +1,24 @@
+import { secureFetchIt } from './../imports';
+import type { ApiRow, FileItem } from './../imports';
+/** GET /secure-list */
+export async function listFiles(setFiles: any = null): Promise<any> {
+  /** ← your request already returns the raw array */
+  const apiRows = await secureFetchIt("/list", null, "GET", null, false, true) as ApiRow[]
+
+  /** map API → UI ------------------------------------------------ */
+  const rows: FileItem[] = apiRows.map((r: ApiRow) => ({
+    id: r.id,
+    filename: r.filename,
+    uploader_id: r.uploader_id,
+    filepath: r.filepath,
+    created_at: r.created_at,
+    download_count: r.download_count,
+    download_limit: r.download_limit,
+    shareable: Boolean(r.shareable),
+    needsPassword: !!r.share_password,
+    share_password: r.share_password,
+    password_str: r.password_str,
+  }));
+
+  setFiles(rows);
+}

package/src/file_utils/src/select_utils/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/src/file_utils/src/select_utils/src/index.ts

@@ -0,0 +1,3 @@
+export * from './init_select_all'; 
+export * from './sync_header_checkbox'; 
+export * from './toggle_checkboxes';