@putkoff/abstract-securefiles 0.0.47 → 0.0.48

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

@@ -14,12 +14,49 @@ import {
 } from './../imports';
 import type { QueuedFile, UploadProps } from './../imports';
 
+// ── helpers ─────────────────────────────────────────────────────────────────
+
+/** Strip filename from a webkitRelativePath, keep the trailing slash. */
+function deriveRelPath(f: File): string {
+  const wrp = (f as any).webkitRelativePath as string | undefined;
+  if (!wrp) return '';
+  const idx = wrp.lastIndexOf('/');
+  return idx >= 0 ? wrp.slice(0, idx + 1) : '';
+}
+
+/**
+ * Drain a DirectoryReader completely. The browser only returns ~100 entries
+ * per readEntries() call; you must call it repeatedly until it returns [].
+ */
+function readAllEntries(reader: any): Promise<any[]> {
+  return new Promise((resolve, reject) => {
+    const all: any[] = [];
+    const pump = () => {
+      reader.readEntries(
+        (batch: any[]) => {
+          if (batch.length === 0) resolve(all);
+          else { all.push(...batch); pump(); }
+        },
+        reject,
+      );
+    };
+    pump();
+  });
+}
+
+// ── component ───────────────────────────────────────────────────────────────
+
 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);
+
+  // Two refs: one for plain file picking, one for folder picking.
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const dirInputRef = useRef<HTMLInputElement>(null);
+  const [pickMode, setPickMode] = useState<'files' | 'folder'>('files');
+
   const [dirs, setDirs] = useState<string[]>([]);
 
   // — existing files → directory list —
@@ -43,61 +80,95 @@ export default function Upload({ onUploaded }: UploadProps) {
   const [newDirName, setNewDirName] = useState('');
 
   // — queue logic —
-  const enqueue = useCallback((files: QueuedFile[]) => {
+  const enqueue = useCallback((incoming: 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));
+      incoming.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 items = Array.from(dt.items ?? []);
+      const hasEntryApi =
+        items.length > 0 &&
+        typeof (items[0] as any).webkitGetAsEntry === 'function';
+
+      // Fallback: no entry API → flat files only, no folder traversal.
+      if (!hasEntryApi) {
+        return Array.from(dt.files ?? []).map(file => ({
+          file,
+          relPath: '',
+          progress: 0,
+        }));
+      }
+
       const out: QueuedFile[] = [];
-      const walk = async (entry: any, path = "") => {
+
+      const walk = async (entry: any, path = ''): Promise<void> => {
         if (!entry) return;
         if (entry.isFile) {
-          const file: File = await new Promise(res => entry.file(res));
+          const file: File = await new Promise((res, rej) =>
+            entry.file(res, rej),
+          );
           out.push({ file, relPath: path, progress: 0 });
-        } else if (entry.isDirectory) {
+          return;
+        }
+        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}/`)));
+          const entries = await readAllEntries(reader);
+          await Promise.all(
+            entries.map(e => walk(e, `${path}${entry.name}/`)),
+          );
         }
       };
-      await Promise.all(Array.from(dt.items).map(i => walk(i.webkitGetAsEntry())));
+
+      await Promise.all(
+        items.map(i => walk((i as any).webkitGetAsEntry?.())),
+      );
       return out;
     },
     []
   );
 
   const handleSelect = (e: ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || []);
-    const queued: any = files.map(f => ({
+    const picked = Array.from(e.target.files ?? []);
+    const queued: QueuedFile[] = picked.map(f => ({
       file: f,
-      relPath: (f as any).webkitRelativePath.replace(/[^/]*$/, ""),
+      relPath: deriveRelPath(f),
       progress: 0,
     }));
     enqueue(queued);
-    e.target.value = "";
+    e.target.value = '';
   };
 
   const handleDrop = async (e: React.DragEvent) => {
     e.preventDefault();
-    const files = await extractFromDataTransfer(e.dataTransfer);
-    enqueue(files.length ? files : []);
+    e.stopPropagation();
+    const dropped = await extractFromDataTransfer(e.dataTransfer);
+    if (dropped.length) enqueue(dropped);
     setDrag(false);
   };
 
+  const openPicker = (e: React.MouseEvent) => {
+    // Only fire when the dropzone background itself is clicked, not children.
+    if (e.target !== e.currentTarget && !(e.target as HTMLElement).closest('[data-dz-passthrough]')) {
+      // children opt in via data-dz-passthrough if they should still open the picker
+    }
+    const ref = pickMode === 'folder' ? dirInputRef : fileInputRef;
+    ref.current?.click();
+  };
+
   const handleUploadAll = async () => {
     if (!queue.length) {
-      setMessage("No files queued.");
+      setMessage('No files queued.');
       return;
     }
     setBusy(true);
     setMessage(null);
     const targetDir = creatingNew
-      ? (newDirName.trim().replace(/^\/+|\/+$/g, "") + "/")
+      ? (newDirName.trim().replace(/^\/+|\/+$/g, '') + '/')
       : uploadDir;
     try {
       for (const { file, relPath } of queue) {
@@ -109,11 +180,11 @@ export default function Upload({ onUploaded }: UploadProps) {
         );
       }
       setQueue([]);
-      await onUploaded();
-      setMessage("Upload complete");
-      load();
+      await onUploaded();           // SecureFiles passes filesHook.load here
+      setMessage('Upload complete');
+      // (removed the duplicate load() — onUploaded already does it)
     } catch {
-      setMessage("Upload failed");
+      setMessage('Upload failed');
     } finally {
       setBusy(false);
     }
@@ -122,25 +193,22 @@ export default function Upload({ onUploaded }: UploadProps) {
   // — directory selector handlers —
   const handleDirChange = (e: ChangeEvent<HTMLSelectElement>) => {
     const v = e.target.value;
-    if (v === "__new__") {
+    if (v === '__new__') {
       setCreatingNew(true);
-      setNewDirName("");
+      setNewDirName('');
     } else {
       setCreatingNew(false);
       setUploadDir(v);
     }
   };
   const acceptNewDir = () => {
-    // normalize like before
     const cleanName = newDirName.trim().replace(/^\/+|\/+$/g, '');
+    if (!cleanName) {
+      setCreatingNew(false);
+      return;
+    }
     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>
+    setDirs(prev => prev.includes(normalized) ? prev : [...prev, normalized].sort());
     setUploadDir(normalized);
     setCreatingNew(false);
     setNewDirName('');
@@ -148,14 +216,39 @@ export default function Upload({ onUploaded }: UploadProps) {
 
   return (
     <div className="form-container max-w-2xl mx-auto">
+      {/* pick-mode toggle */}
+      <div className="flex gap-4 text-xs text-gray-700 mb-1">
+        <label className="flex items-center gap-1">
+          <input
+            type="radio"
+            name="pick-mode"
+            checked={pickMode === 'files'}
+            onChange={() => setPickMode('files')}
+          />
+          Files
+        </label>
+        <label className="flex items-center gap-1">
+          <input
+            type="radio"
+            name="pick-mode"
+            checked={pickMode === 'folder'}
+            onChange={() => setPickMode('folder')}
+          />
+          Folder
+        </label>
+        <span className="text-gray-400">
+          (drag-and-drop accepts either)
+        </span>
+      </div>
+
       {/* 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)}
+        onClick={openPicker}
+        onDragEnter={e => { e.preventDefault(); e.stopPropagation(); setDrag(true); }}
+        onDragOver={e => { e.preventDefault(); e.stopPropagation(); }}
+        onDragLeave={e => { e.preventDefault(); e.stopPropagation(); setDrag(false); }}
         onDrop={handleDrop}
         role="region"
         aria-label="File upload area"
@@ -169,6 +262,9 @@ export default function Upload({ onUploaded }: UploadProps) {
           <p className="text-base font-semibold text-gray-700">
             Drag & drop files or folders here
           </p>
+          <p className="text-xs text-gray-500 mt-1">
+            Click to {pickMode === 'folder' ? 'choose a folder' : 'choose files'}
+          </p>
           {queue.length > 0 && (
             <p className="mt-1 text-sm text-gray-600">
               {queue.length} item{queue.length > 1 && 's'} queued
@@ -177,19 +273,28 @@ export default function Upload({ onUploaded }: UploadProps) {
         </div>
       </div>
 
-      {/* hidden file input */}
+      {/* hidden file input — plain multi-file pick, works everywhere */}
       <input
-        ref={inputRef}
+        ref={fileInputRef}
         type="file"
         multiple
         className="hidden"
-        {...({ webkitdirectory: true, directory: '' } as any)}
+        onChange={handleSelect}
+      />
+
+      {/* hidden directory input — Chromium, Safari 11.1+, Firefox 50+ */}
+      <input
+        ref={dirInputRef}
+        type="file"
+        multiple
+        className="hidden"
+        // non-standard attributes; both forms keep older Firefox happy
+        {...({ webkitdirectory: '', 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
@@ -220,7 +325,6 @@ export default function Upload({ onUploaded }: UploadProps) {
           )}
         </div>
 
-        {/* upload button */}
         <Button
           color="blue"
           variant="primary"
@@ -233,15 +337,13 @@ export default function Upload({ onUploaded }: UploadProps) {
 
       {message && (
         <p
-          className={`text-center text-sm ${message.includes('failed') ? 'text-red-600' : 'text-gray-600'
-            }`}
+          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>
@@ -264,4 +366,4 @@ export default function Upload({ onUploaded }: UploadProps) {
       )}
     </div>
   );
-}
+}