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

package/dist/node_modules/pdfjs-dist/web/pdf_viewer.d.mts

@@ -0,0 +1 @@
+export * from "../types/web/pdf_viewer.component.js";

package/dist/node_modules/url-join/package.json

@@ -1 +1 @@
-{"name":"url-join","version":"4.0.1","description":"Join urls and normalize as in path.join.","main":"lib/url-join.js","scripts":{"test":"mocha --require should"},"repository":{"type":"git","url":"git://github.com/jfromaniello/url-join.git"},"keywords":["url","join"],"author":"José F. Romaniello <jfromaniello@gmail.com> (http://joseoncode.com)","license":"MIT","devDependencies":{"conventional-changelog":"^1.1.10","mocha":"^3.2.0","should":"~1.2.1"},"_lastModified":"2026-05-21T16:55:16.409Z"}
+{"name":"url-join","version":"4.0.1","description":"Join urls and normalize as in path.join.","main":"lib/url-join.js","scripts":{"test":"mocha --require should"},"repository":{"type":"git","url":"git://github.com/jfromaniello/url-join.git"},"keywords":["url","join"],"author":"José F. Romaniello <jfromaniello@gmail.com> (http://joseoncode.com)","license":"MIT","devDependencies":{"conventional-changelog":"^1.1.10","mocha":"^3.2.0","should":"~1.2.1"},"_lastModified":"2026-05-26T00:45:18.931Z"}

package/dist/shared/previewer/filePreviewTypes.d.ts

@@ -34,6 +34,7 @@ export declare function getFileUrl(file: any): any;
 export declare function matchMimetype(file: any, type: string): any;
 export declare const getFileExt: (file: any, url?: string) => string;
 export declare const isActiveContentFile: (file: any, url?: string) => boolean;
+export declare const isPdfFile: (file: any, url?: string) => boolean;
 export declare const getFileName: (file: any, url?: string) => any;
 export declare const getDownloadFileName: (file: any, url?: string) => string;
 export declare const getFallbackIcon: (file: any, url?: string) => string;

package/dist/shared/previewer/filePreviewTypes.js

@@ -47,6 +47,7 @@ __export(filePreviewTypes_exports, {
   getPreviewFileUrl: () => getPreviewFileUrl,
   getPreviewThumbnailUrl: () => getPreviewThumbnailUrl,
   isActiveContentFile: () => isActiveContentFile,
+  isPdfFile: () => isPdfFile,
   matchMimetype: () => matchMimetype,
   normalizePreviewFile: () => normalizePreviewFile,
   wrapWithModalPreviewer: () => wrapWithModalPreviewer
@@ -58,6 +59,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 +127,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 +189,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 +216,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 +373,218 @@ const IframePreviewer = ({ file }) => {
   }
   return /* @__PURE__ */ import_react.default.createElement("iframe", { src, width: "100%", height: "100%", style: { border: "none" } });
 };
+let pdfjsPromise = null;
+const loadPdfJs = async () => {
+  if (!pdfjsPromise) {
+    pdfjsPromise = import("pdfjs-dist/build/pdf.mjs");
+  }
+  return pdfjsPromise;
+};
+const PDF_SCALE = 1.4;
+const PdfPreviewer = ({ file }) => {
+  const { t } = (0, import_react_i18next.useTranslation)();
+  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 [error, setError] = import_react.default.useState(false);
+  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);
+    setError(false);
+    const init = async () => {
+      const pdfjs = await loadPdfJs();
+      if (session.cancelled) {
+        return;
+      }
+      session.pdfjs = pdfjs;
+      const url = new URL(src, location.href);
+      const response = await fetch(url, {
+        credentials: url.origin === location.origin ? "include" : "omit",
+        signal: session.abortController.signal
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to load PDF: ${response.status}`);
+      }
+      const data = new Uint8Array(await response.arrayBuffer());
+      if (session.cancelled) {
+        return;
+      }
+      session.data = data;
+      session.worker = pdfjs.PDFWorker.create({
+        port: new Worker(new URL("pdfjs-dist/build/pdf.worker.min.mjs", import_meta.url), { type: "module" })
+      });
+      const metaTask = pdfjs.getDocument({
+        data: data.slice(0),
+        isEvalSupported: false,
+        enableXfa: false,
+        useWasm: false,
+        worker: session.worker
+      });
+      session.loadingTasks.push(metaTask);
+      const metaPdf = await metaTask.promise;
+      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(() => {
+      if (!session.cancelled) {
+        setError(true);
+      }
+    });
+    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) {
+      } 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]);
+  if (!src) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", minHeight: "100%", padding: 16 } }, error ? /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Alert,
+    {
+      type: "warning",
+      showIcon: true,
+      message: t("File type is not supported for previewing, please download it to preview.")
+    }
+  ) : null, !meta && !error ? /* @__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 +602,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 +632,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 +654,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) {
@@ -453,6 +684,7 @@ const FilePreviewRenderer = (props) => {
   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.37",
   "displayName": "File manager",
   "displayName.ru-RU": "Менеджер файлов",
   "displayName.zh-CN": "文件管理器",
@@ -27,6 +27,7 @@
     "antd": "5.x",
     "axios": "^1.7.0",
     "cos-nodejs-sdk-v5": "^2.11.14",
+    "file-type": "^21.0.0",
     "koa-static": "^5.0.0",
     "mime-match": "^1.0.2",
     "mime-types": "^3.0.1",
@@ -34,14 +35,12 @@
     "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",
     "url-join": "4.0.1"
   },
-  "dependencies": {
-    "file-type": "^21.0.0"
-  },
   "peerDependencies": {
     "@nocobase/actions": "2.x",
     "@nocobase/client": "2.x",
@@ -58,5 +57,5 @@
     "Collections",
     "Collection fields"
   ],
-  "gitHead": "397d45c744f6eb48b3a0cd785c87cbf1257c3513"
+  "gitHead": "7132e5b83ecc0e42b54715eaf1429c72bcef34ae"
 }