feat(cloudpage) - wip - view and download feat added, upload ui size info added

apps/Frontend/src/components/cloud-storage/file-preview-modal.tsx

@@ -0,0 +1,216 @@
+import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { apiRequest } from "@/lib/queryClient";
+import { toast } from "@/hooks/use-toast";
+import { Download, Maximize2, Minimize2, X } from "lucide-react";
+
+type Props = {
+  fileId: number | null;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export default function FilePreviewModal({ fileId, isOpen, onClose }: Props) {
+  const [loading, setLoading] = useState(false);
+  const [meta, setMeta] = useState<any | null>(null);
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen || !fileId) return;
+
+    let cancelled = false;
+    let createdUrl: string | null = null;
+
+    async function load() {
+      setLoading(true);
+      setError(null);
+      setMeta(null);
+      setBlobUrl(null);
+
+      try {
+        const metaRes = await apiRequest(
+          "GET",
+          `/api/cloud-storage/files/${fileId}`
+        );
+        const metaJson = await metaRes.json();
+        if (!metaRes.ok) {
+          throw new Error(metaJson?.message || "Failed to load file metadata");
+        }
+        if (cancelled) return;
+        setMeta(metaJson.data);
+
+        const contentRes = await apiRequest(
+          "GET",
+          `/api/cloud-storage/files/${fileId}/content`
+        );
+        if (!contentRes.ok) {
+          let msg = `Preview request failed (${contentRes.status})`;
+          try {
+            const j = await contentRes.json();
+            msg = j?.message ?? msg;
+          } catch (e) {}
+          throw new Error(msg);
+        }
+        const blob = await contentRes.blob();
+        if (cancelled) return;
+        createdUrl = URL.createObjectURL(blob);
+        setBlobUrl(createdUrl);
+      } catch (err: any) {
+        if (!cancelled) setError(err?.message ?? String(err));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    load();
+
+    return () => {
+      cancelled = true;
+      if (createdUrl) {
+        URL.revokeObjectURL(createdUrl);
+      }
+    };
+  }, [isOpen, fileId]);
+
+  if (!isOpen) return null;
+
+  const mime = meta?.mimeType ?? "";
+
+  async function handleDownload() {
+    if (!fileId) return;
+    try {
+      const res = await apiRequest(
+        "GET",
+        `/api/cloud-storage/files/${fileId}/download`
+      );
+      if (!res.ok) {
+        const j = await res.json().catch(() => ({}));
+        throw new Error(j?.message || `Download failed (${res.status})`);
+      }
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = meta?.name ?? `file-${fileId}`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 5000);
+    } catch (err: any) {
+      toast({
+        title: "Download failed",
+        description: err?.message ?? String(err),
+        variant: "destructive",
+      });
+    }
+  }
+
+  // container sizing classes
+  const containerBase =
+    "bg-white rounded-md p-3 flex flex-col overflow-hidden shadow-xl";
+  const sizeClass = isFullscreen
+    ? "w-[95vw] h-[95vh]"
+    : "w-[min(1200px,95vw)] h-[85vh]";
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 p-4">
+      <div className={`${containerBase} ${sizeClass} max-w-full max-h-full`}>
+        {/* header */}
+
+        <div className="flex items-start justify-between gap-3 pb-2 border-b">
+          <div className="min-w-0">
+            <h3 className="text-lg font-semibold truncate">
+              {meta?.name ?? "Preview"}
+            </h3>
+            <div className="text-sm text-gray-500 truncate">
+              {meta?.mimeType ?? ""}
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <button
+              onClick={() => setIsFullscreen((s) => !s)}
+              title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+              className="p-2 rounded hover:bg-gray-100"
+              aria-label="Toggle fullscreen"
+            >
+              {isFullscreen ? (
+                <Minimize2 className="w-4 h-4" />
+              ) : (
+                <Maximize2 className="w-4 h-4" />
+              )}
+            </button>
+            <Button variant="ghost" onClick={handleDownload}>
+              <Download className="w-4 h-4" />
+            </Button>
+            <Button onClick={onClose}>
+              {" "}
+              <X className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+
+        {/* body */}
+        <div className="flex-1 overflow-auto mt-3">
+          {/* loading / error */}
+          {loading && (
+            <div className="w-full h-full flex items-center justify-center">
+              Loading preview…
+            </div>
+          )}
+          {error && <div className="text-red-600">{error}</div>}
+
+          {/* image */}
+          {!loading && !error && blobUrl && mime.startsWith("image/") && (
+            <div className="flex items-center justify-center w-full h-full">
+              <img
+                src={blobUrl}
+                alt={meta?.name}
+                className="max-w-full max-h-full object-contain"
+                style={{ maxHeight: "calc(100vh - 200px)" }}
+              />
+            </div>
+          )}
+
+          {/* pdf */}
+          {!loading &&
+            !error &&
+            blobUrl &&
+            (mime === "application/pdf" || mime.endsWith("/pdf")) && (
+              <div className="w-full h-full">
+                <iframe
+                  src={blobUrl}
+                  title={meta?.name}
+                  className="w-full h-full border-0"
+                  style={{ minHeight: 400 }}
+                />
+              </div>
+            )}
+
+          {/* fallback */}
+          {!loading &&
+            !error &&
+            blobUrl &&
+            !mime.startsWith("image/") &&
+            !mime.includes("pdf") && (
+              <div className="p-4">
+                <p>Preview not available for this file type.</p>
+                <p className="mt-2">
+                  <a
+                    href={blobUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                  >
+                    Open raw
+                  </a>
+                </p>
+              </div>
+            )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/Frontend/src/components/cloud-storage/files-section.tsx

@@ -35,7 +35,7 @@ import {
 import { getPageNumbers } from "@/utils/pageNumberGenerator";
 import { NewFolderModal } from "./new-folder-modal";
 import { toast } from "@/hooks/use-toast";
-import { Description } from "@radix-ui/react-toast";
+import FilePreviewModal from "./file-preview-modal";
 
 export type FilesSectionProps = {
   parentId: number | null;
@@ -45,6 +45,8 @@ export type FilesSectionProps = {
 };
 
 const FILES_LIMIT_DEFAULT = 20;
+const MAX_FILE_MB = 10;
+const MAX_FILE_BYTES = MAX_FILE_MB * 1024 * 1024;
 
 function fileIcon(mime?: string) {
   if (!mime) return <FileIcon className="h-6 w-6" />;
@@ -70,6 +72,7 @@ export default function FilesSection({
   const [isLoading, setIsLoading] = useState(false);
 
   // upload modal and ref
+  const [uploading, setUploading] = useState(false);
   const [isUploadOpen, setIsUploadOpen] = useState(false);
   const uploadRef = useRef<any>(null);
 
@@ -78,9 +81,14 @@ export default function FilesSection({
   const [renameTargetId, setRenameTargetId] = useState<number | null>(null);
   const [renameInitial, setRenameInitial] = useState("");
 
+  // delete dialog
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<CloudFile | null>(null);
 
+  // preview modal
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const [previewFileId, setPreviewFileId] = useState<number | null>(null);
+
   useEffect(() => {
     loadPage(currentPage);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -198,20 +206,74 @@ export default function FilesSection({
     }
   }
 
-  // download
-  function handleDownload(file: CloudFile) {
-    // Open download endpoint in new tab so the browser handles attachment headers
-    const url = `/api/cloud-storage/files/${file.id}/download`;
-    window.open(url, "_blank");
-    contextMenu.hideAll();
+  // download (context menu) - (fetch bytes from backend host via wrapper)
+  async function handleDownload(file: CloudFile) {
+    try {
+      const res = await apiRequest(
+        "GET",
+        `/api/cloud-storage/files/${file.id}/download`
+      );
+      if (!res.ok) {
+        const j = await res.json().catch(() => ({}));
+        throw new Error(j?.message || `Download failed (${res.status})`);
+      }
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = file.name ?? `file-${file.id}`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+
+      // revoke after a bit
+      setTimeout(() => URL.revokeObjectURL(url), 5000);
+      contextMenu.hideAll();
+    } catch (err: any) {
+      toast({
+        title: "Download failed",
+        description: err?.message ?? String(err),
+        variant: "destructive",
+      });
+    }
   }
 
   // upload: get files from MultipleFileUploadZone (imperative handle)
   async function handleUploadSubmit() {
     const files: File[] = uploadRef.current?.getFiles?.() ?? [];
-    if (!files.length) return;
+    if (!files.length) {
+      toast({
+        title: "No files selected",
+        description: "Please choose files to upload before clicking Upload.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setUploading(true);
+
+    // pre-check all files and show errors / skip too-large files
+    const oversized = files.filter((f) => f.size > MAX_FILE_BYTES);
+    if (oversized.length) {
+      oversized.slice(0, 5).forEach((f) =>
+        toast({
+          title: "File too large",
+          description: `${f.name} is ${Math.round(f.size / 1024 / 1024)} MB — max ${MAX_FILE_MB} MB allowed.`,
+          variant: "destructive",
+        })
+      );
+      // Remove oversized files from the upload list (upload the rest)
+    }
+
+    const toUpload = files.filter((f) => f.size <= MAX_FILE_BYTES);
+    if (toUpload.length === 0) {
+      // nothing to upload
+      return;
+    }
+
     try {
-      for (const f of files) {
+      for (const f of toUpload) {
         const fid = parentId === null ? "null" : String(parentId);
         const initRes = await apiRequest(
           "POST",
@@ -254,13 +316,23 @@ export default function FilesSection({
         description: err?.message ?? String(err),
         variant: "destructive",
       });
+    } finally {
+      setUploading(false);
     }
   }
 
+  // Pagination
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const startItem = total === 0 ? 0 : (currentPage - 1) * pageSize + 1;
   const endItem = Math.min(total, currentPage * pageSize);
 
+  // open preview (single click)
+  function openPreview(file: CloudFile) {
+    setPreviewFileId(Number(file.id));
+    setIsPreviewOpen(true);
+    contextMenu.hideAll();
+  }
+
   return (
     <Card className={className}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0">
@@ -290,7 +362,7 @@ export default function FilesSection({
                   key={file.id}
                   className="p-3 rounded border hover:bg-gray-50 cursor-pointer"
                   onContextMenu={(e) => showMenu(e, file)}
-                  onDoubleClick={() => onFileOpen?.(Number(file.id))}
+                  onClick={() => openPreview(file)}
                 >
                   <div className="flex flex-col items-center">
                     <div className="h-10 w-10 text-gray-500 mb-2 flex items-center justify-center">
@@ -405,12 +477,21 @@ export default function FilesSection({
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
           <div className="bg-white p-6 rounded-md w-[90%] max-w-2xl">
             <h3 className="text-lg font-semibold mb-4">Upload files</h3>
-            <MultipleFileUploadZone ref={uploadRef} />
+            <MultipleFileUploadZone
+              ref={uploadRef}
+              acceptedFileTypes="application/pdf,image/*"
+              maxFiles={10}
+              maxFileSizeMB={10}
+              maxFileSizeByType={{ "application/pdf": 10, "image/*": 5 }}
+              isUploading={uploading}
+            />
             <div className="mt-4 flex justify-end gap-2">
               <Button variant="ghost" onClick={() => setIsUploadOpen(false)}>
                 Cancel
               </Button>
-              <Button onClick={handleUploadSubmit}>Upload</Button>
+              <Button onClick={handleUploadSubmit} disabled={uploading}>
+                {uploading ? "Uploading..." : "Upload"}
+              </Button>
             </div>
           </div>
         </div>
@@ -429,6 +510,15 @@ export default function FilesSection({
         onSubmit={submitRename}
       />
 
+      {/* FIle Preview Modal */}
+      <FilePreviewModal
+        fileId={previewFileId}
+        isOpen={isPreviewOpen}
+        onClose={() => {
+          setIsPreviewOpen(false);
+          setPreviewFileId(null);
+        }}
+      />
       {/* delete confirm */}
       <DeleteConfirmationDialog
         isOpen={isDeleteOpen}