@nocobase/plugin-file-manager 2.1.0-beta.36 → 2.1.0-beta.38

package/dist/shared/previewer/filePreviewTypes.js

@@ -44,9 +44,11 @@ __export(filePreviewTypes_exports, {
   getFileExt: () => getFileExt,
   getFileName: () => getFileName,
   getFileUrl: () => getFileUrl,
+  getPdfPreviewErrorCode: () => getPdfPreviewErrorCode,
   getPreviewFileUrl: () => getPreviewFileUrl,
   getPreviewThumbnailUrl: () => getPreviewThumbnailUrl,
   isActiveContentFile: () => isActiveContentFile,
+  isPdfFile: () => isPdfFile,
   matchMimetype: () => matchMimetype,
   normalizePreviewFile: () => normalizePreviewFile,
   wrapWithModalPreviewer: () => wrapWithModalPreviewer
@@ -58,6 +60,7 @@ var import_antd = require("antd");
 var import_mime_match = __toESM(require("mime-match"));
 var import_react_i18next = require("react-i18next");
 var import_locale = require("../locale");
+const import_meta = {};
 class FilePreviewTypes {
   types = [];
   add(type) {
@@ -125,8 +128,8 @@ const FALLBACK_ICON_MAP = {
   svg: "/file-placeholder/svg-200-200.png",
   default: "/file-placeholder/unknown-200-200.png"
 };
-const ACTIVE_CONTENT_MIMETYPES = /* @__PURE__ */ new Set(["application/xhtml+xml", "image/svg+xml", "text/html"]);
-const ACTIVE_CONTENT_EXTENSIONS = /* @__PURE__ */ new Set(["htm", "html", "svg", "svgz", "xhtml"]);
+const ACTIVE_CONTENT_MIMETYPES = /* @__PURE__ */ new Set(["application/pdf", "application/xhtml+xml", "image/svg+xml", "text/html"]);
+const ACTIVE_CONTENT_EXTENSIONS = /* @__PURE__ */ new Set(["htm", "html", "pdf", "svg", "svgz", "xhtml"]);
 const stripQueryAndHash = (url) => url.split("?")[0].split("#")[0];
 const getExtFromName = (value) => {
   if (!value) {
@@ -187,7 +190,12 @@ const getNameFromUrl = (url) => {
   }
   const clean = stripQueryAndHash(url);
   const index = clean.lastIndexOf("/");
-  return index !== -1 ? clean.slice(index + 1) : clean;
+  const name = index !== -1 ? clean.slice(index + 1) : clean;
+  try {
+    return decodeURIComponent(name);
+  } catch (error) {
+    return name;
+  }
 };
 const getFileExt = (file, url) => {
   if (file && typeof file === "object") {
@@ -209,8 +217,15 @@ const isActiveContentFile = (file, url) => {
   const ext = getFileExt(file, url);
   return ACTIVE_CONTENT_EXTENSIONS.has(ext);
 };
+const isPdfFile = (file, url) => {
+  const mimetype = (file == null ? void 0 : file.mimetype) || (file == null ? void 0 : file.type);
+  if (typeof mimetype === "string" && mimetype.toLowerCase() === "application/pdf") {
+    return true;
+  }
+  return getFileExt(file, url) === "pdf";
+};
 const getFileName = (file, url) => {
-  const nameFromUrl = getNameFromUrl(url);
+  const nameFromUrl = getNameFromUrl(url || getFileUrl(file));
   if (!file || typeof file === "string") {
     return nameFromUrl;
   }
@@ -359,6 +374,276 @@ const IframePreviewer = ({ file }) => {
   }
   return /* @__PURE__ */ import_react.default.createElement("iframe", { src, width: "100%", height: "100%", style: { border: "none" } });
 };
+let pdfjsPromise = null;
+class PdfPreviewError extends Error {
+  code;
+  cause;
+  constructor(code, message, cause) {
+    super(message);
+    this.name = "PdfPreviewError";
+    this.code = code;
+    this.cause = cause;
+  }
+}
+const getPdfPreviewErrorCode = (error) => {
+  if (error instanceof PdfPreviewError) {
+    return error.code;
+  }
+  return "document";
+};
+const loadPdfJs = async () => {
+  if (!pdfjsPromise) {
+    pdfjsPromise = import("pdfjs-dist/build/pdf.mjs");
+  }
+  return pdfjsPromise;
+};
+const PDF_SCALE = 1.4;
+const PDF_PREVIEW_ERROR_MESSAGES = {
+  resources: "PDF preview resources failed to load. Please refresh the page and check whether plugin static files are deployed correctly.",
+  file: "PDF preview failed to load the file. If the file is stored on another domain, configure CORS for the external storage to allow this site to read the file.",
+  document: "PDF preview failed. Please download the file to preview it."
+};
+const PdfPreviewer = ({ file }) => {
+  const { t } = (0, import_react_i18next.useTranslation)(import_locale.NAMESPACE);
+  const src = getFileUrl(file);
+  const pageElsRef = import_react.default.useRef(/* @__PURE__ */ new Map());
+  const sessionRef = import_react.default.useRef(null);
+  const [meta, setMeta] = import_react.default.useState(null);
+  const [errorCode, setErrorCode] = import_react.default.useState(null);
+  import_react.default.useEffect(() => {
+    if (!src) {
+      return;
+    }
+    const session = {
+      cancelled: false,
+      abortController: new AbortController(),
+      rendered: /* @__PURE__ */ new Set(),
+      inFlight: /* @__PURE__ */ new Set(),
+      loadingTasks: [],
+      renderTasks: []
+    };
+    sessionRef.current = session;
+    setMeta(null);
+    setErrorCode(null);
+    const init = async () => {
+      let pdfjs;
+      try {
+        pdfjs = await loadPdfJs();
+      } catch (error) {
+        throw new PdfPreviewError("resources", "Failed to load PDF.js resources.", error);
+      }
+      if (session.cancelled) {
+        return;
+      }
+      session.pdfjs = pdfjs;
+      let url;
+      try {
+        url = new URL(src, location.href);
+      } catch (error) {
+        throw new PdfPreviewError("file", "Invalid PDF file URL.", error);
+      }
+      let response;
+      try {
+        response = await fetch(url, {
+          credentials: url.origin === location.origin ? "include" : "omit",
+          signal: session.abortController.signal
+        });
+      } catch (error) {
+        throw new PdfPreviewError("file", "Failed to fetch PDF file.", error);
+      }
+      if (!response.ok) {
+        throw new PdfPreviewError("file", `Failed to fetch PDF file: ${response.status}`);
+      }
+      let data;
+      try {
+        data = new Uint8Array(await response.arrayBuffer());
+      } catch (error) {
+        throw new PdfPreviewError("file", "Failed to read PDF file response.", error);
+      }
+      if (session.cancelled) {
+        return;
+      }
+      session.data = data;
+      try {
+        pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+          "pdfjs-dist/build/pdf.worker.min.mjs",
+          import_meta.url
+        ).toString();
+        session.worker = pdfjs.PDFWorker.create({});
+      } catch (error) {
+        throw new PdfPreviewError("resources", "Failed to load PDF.js worker.", error);
+      }
+      const metaTask = pdfjs.getDocument({
+        data: data.slice(0),
+        isEvalSupported: false,
+        enableXfa: false,
+        useWasm: false,
+        worker: session.worker
+      });
+      session.loadingTasks.push(metaTask);
+      let metaPdf;
+      try {
+        metaPdf = await metaTask.promise;
+      } catch (error) {
+        throw new PdfPreviewError("document", "Failed to parse PDF file.", error);
+      }
+      if (session.cancelled) {
+        return;
+      }
+      session.metaPdf = metaPdf;
+      const viewport = (await metaPdf.getPage(1)).getViewport({ scale: PDF_SCALE });
+      if (session.cancelled) {
+        return;
+      }
+      setMeta({ numPages: metaPdf.numPages, width: viewport.width, height: viewport.height });
+    };
+    init().catch((error) => {
+      if (!session.cancelled) {
+        const code = getPdfPreviewErrorCode(error);
+        console.warn("[file-manager] PDF preview failed", {
+          code,
+          src,
+          error
+        });
+        setErrorCode(code);
+      }
+    });
+    return () => {
+      var _a, _b, _c;
+      session.cancelled = true;
+      session.abortController.abort();
+      (_a = session.observer) == null ? void 0 : _a.disconnect();
+      session.renderTasks.forEach((task) => {
+        var _a2;
+        return (_a2 = task.cancel) == null ? void 0 : _a2.call(task);
+      });
+      session.loadingTasks.forEach((task) => {
+        var _a2;
+        return (_a2 = task.destroy) == null ? void 0 : _a2.call(task);
+      });
+      (_c = (_b = session.worker) == null ? void 0 : _b.destroy) == null ? void 0 : _c.call(_b);
+    };
+  }, [src]);
+  import_react.default.useEffect(() => {
+    const session = sessionRef.current;
+    if (!meta || !(session == null ? void 0 : session.pdfjs) || !session.metaPdf) {
+      return;
+    }
+    const { pdfjs, metaPdf } = session;
+    const renderPage = async (pageNumber) => {
+      var _a;
+      if (session.cancelled || session.rendered.has(pageNumber) || session.inFlight.has(pageNumber)) {
+        return;
+      }
+      const wrapper = pageElsRef.current.get(pageNumber);
+      if (!wrapper) {
+        return;
+      }
+      session.inFlight.add(pageNumber);
+      let task;
+      try {
+        let pdf;
+        if (pageNumber === 1 || !session.data) {
+          pdf = metaPdf;
+        } else {
+          task = pdfjs.getDocument({
+            data: session.data.slice(0),
+            isEvalSupported: false,
+            enableXfa: false,
+            useWasm: false,
+            worker: session.worker
+          });
+          session.loadingTasks.push(task);
+          pdf = await task.promise;
+        }
+        if (session.cancelled) {
+          return;
+        }
+        const page = await pdf.getPage(pageNumber);
+        const viewport = page.getViewport({ scale: PDF_SCALE });
+        const context = document.createElement("canvas").getContext("2d");
+        if (!context) {
+          return;
+        }
+        const canvas = context.canvas;
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        canvas.style.display = "block";
+        canvas.style.width = "100%";
+        canvas.style.height = "auto";
+        wrapper.style.aspectRatio = "";
+        wrapper.replaceChildren(canvas);
+        const renderTask = page.render({
+          canvas,
+          canvasContext: context,
+          viewport,
+          annotationMode: pdfjs.AnnotationMode.DISABLE
+        });
+        session.renderTasks.push(renderTask);
+        await renderTask.promise;
+        if (session.cancelled) {
+          return;
+        }
+        session.rendered.add(pageNumber);
+        (_a = session.observer) == null ? void 0 : _a.unobserve(wrapper);
+      } catch (renderError) {
+        if (!session.cancelled) {
+          console.warn("[file-manager] PDF page render failed", {
+            pageNumber,
+            src,
+            error: renderError
+          });
+        }
+      } finally {
+        task == null ? void 0 : task.destroy();
+        session.inFlight.delete(pageNumber);
+      }
+    };
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            renderPage(Number(entry.target.dataset.page));
+          }
+        }
+      },
+      { rootMargin: "300px 0px" }
+    );
+    session.observer = observer;
+    pageElsRef.current.forEach((el) => observer.observe(el));
+    return () => {
+      observer.disconnect();
+      if (session.observer === observer) {
+        session.observer = void 0;
+      }
+    };
+  }, [meta, src]);
+  if (!src) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", minHeight: "100%", padding: 16 } }, errorCode ? /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { type: "warning", showIcon: true, message: t(PDF_PREVIEW_ERROR_MESSAGES[errorCode]) }) : null, !meta && !errorCode ? /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", justifyContent: "center", padding: 48 } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, null)) : null, meta ? Array.from({ length: meta.numPages }, (_, index) => index + 1).map((pageNumber) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: pageNumber,
+      "data-page": pageNumber,
+      ref: (el) => {
+        if (el) {
+          pageElsRef.current.set(pageNumber, el);
+        } else {
+          pageElsRef.current.delete(pageNumber);
+        }
+      },
+      style: {
+        width: "100%",
+        maxWidth: meta.width,
+        margin: "0 auto 16px",
+        aspectRatio: `${meta.width} / ${meta.height}`,
+        background: "#fff",
+        border: "1px solid #f0f0f0"
+      }
+    }
+  )) : null);
+};
 const AudioPreviewer = ({ file }) => {
   const { t } = (0, import_react_i18next.useTranslation)();
   const src = getFileUrl(file);
@@ -376,7 +661,6 @@ const VideoPreviewer = ({ file }) => {
   return /* @__PURE__ */ import_react.default.createElement("video", { controls: true, width: "100%", height: "100%" }, /* @__PURE__ */ import_react.default.createElement("source", { src, type: (file == null ? void 0 : file.type) || (file == null ? void 0 : file.mimetype) }), t("Your browser does not support the video tag."));
 };
 const UnsupportedPreviewer = (props) => {
-  const { t } = (0, import_react_i18next.useTranslation)();
   const { file } = props;
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Alert,
@@ -407,7 +691,7 @@ filePreviewTypes.add({
 });
 filePreviewTypes.add({
   match(file) {
-    return ["text/plain", "application/pdf", "application/json"].some((type) => matchMimetype(file, type));
+    return ["text/plain", "application/json"].some((type) => matchMimetype(file, type));
   },
   Previewer: wrapWithModalPreviewer(IframePreviewer)
 });
@@ -429,6 +713,12 @@ filePreviewTypes.add({
   },
   Previewer: wrapWithModalPreviewer(UnsupportedPreviewer)
 });
+filePreviewTypes.add({
+  match(file) {
+    return isPdfFile(file, getFileUrl(file));
+  },
+  Previewer: wrapWithModalPreviewer(PdfPreviewer)
+});
 const FilePreviewRenderer = (props) => {
   const normalized = normalizePreviewFile(props.file);
   if (!normalized) {
@@ -450,9 +740,11 @@ const FilePreviewRenderer = (props) => {
   getFileExt,
   getFileName,
   getFileUrl,
+  getPdfPreviewErrorCode,
   getPreviewFileUrl,
   getPreviewThumbnailUrl,
   isActiveContentFile,
+  isPdfFile,
   matchMimetype,
   normalizePreviewFile,
   wrapWithModalPreviewer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/plugin-file-manager",
-  "version": "2.1.0-beta.36",
+  "version": "2.1.0-beta.38",
   "displayName": "File manager",
   "displayName.ru-RU": "Менеджер файлов",
   "displayName.zh-CN": "文件管理器",
@@ -34,6 +34,7 @@
     "multer": "^1.4.5-lts.2",
     "multer-s3": "^3.0.1",
     "multistream": "^4.1.0",
+    "pdfjs-dist": "^5.3.31",
     "react": "^18.2.0",
     "react-i18next": "^11.15.1",
     "supertest": "^6.1.6",
@@ -58,5 +59,5 @@
     "Collections",
     "Collection fields"
   ],
-  "gitHead": "397d45c744f6eb48b3a0cd785c87cbf1257c3513"
+  "gitHead": "d1c585108ff6e51c17b0b52bacb1a2d621d9c119"
 }