File-Attachment-Preview (PDF / Image / Audio / Video / DOCX / XLSX) #14

px_drutschmann commented 2026年01月05日 16:15:53 +01:00

The custom head loads the bundled JSZip, docx-preview, and SheetJS scripts inline, injects preview-specific styles, and runs a script that scans .page-content for links to /attachments/{id}. It looks up attachment names in #page-attachments, then replaces each inline link with a structured preview card (.attachment-preview) containing a header (file icon, filename link, extension badge, download action) and a body that renders the appropriate preview: PDF in a resizable <object>, DOCX via docx.renderAsync, XLSX via XLSX.utils.sheet_to_html, images/video/audio via native elements, or a fallback message if unsupported.

This change adds a self-contained install flow that builds a theme-like dist/ folder, copies required frontend assets into dist/public, and installs the custom head template into dist/layouts/parts. It also cleans up the temporary node_modules after copying and aligns the docs and metadata with the new output structure.

The custom head loads the bundled JSZip, docx-preview, and SheetJS scripts inline, injects preview-specific styles, and runs a script that scans `.page-content` for links to `/attachments/{id}`. It looks up attachment names in `#page-attachments`, then replaces each inline link with a structured preview card (`.attachment-preview`) containing a header (file icon, filename link, extension badge, download action) and a body that renders the appropriate preview: PDF in a resizable `<object>`, DOCX via `docx.renderAsync`, XLSX via `XLSX.utils.sheet_to_html`, images/video/audio via native elements, or a fallback message if unsupported. This change adds a self-contained install flow that builds a theme-like `dist/` folder, copies required frontend assets into `dist/public`, and installs the custom head template into `dist/layouts/parts`. It also cleans up the temporary `node_modules` after copying and aligns the docs and metadata with the new output structure.

danb commented 2026年01月05日 21:28:59 +01:00

Thanks for offering this @px_drutschmann, but the surface area of the hack is a bit too large for what I'd want to maintain as part of the official hacks. As per the repo readme I keep a fairly narrow scope for new hacks.

If you're able to host this elsewhere, we could maybe list in the readme and/or create a page on the hacks site for additional hacks created externally.

Thanks for offering this @px_drutschmann, but the surface area of the hack is a bit too large for what I'd want to maintain as part of the official hacks. As per the repo readme I keep a fairly narrow scope for new hacks. If you're able to host this elsewhere, we could maybe list in the readme and/or create a page on the hacks site for additional hacks created externally.

px_drutschmann commented 2026年01月06日 11:40:45 +01:00

Hey @danb

Thanks a lot for the quick reply and the detailed explanation.

We completely understand your desire to keep the scope of the official hacks fairly narrow, and that this one may be a bit too extensive for that.

We’re happy BookStack users and definitely plan to keep using it, which is why we’re interested in making our extension available for others as well. If it works for you, we’d be glad if you’d like to list it as an external hack or include it on a separate page for externally maintained hacks.

You can find the repository here:
https://github.com/pronomix-gmbh/bookstack_file_attachment_preview

Thanks again for the open and constructive exchange.

Best regards
Dirk

Hey @danb Thanks a lot for the quick reply and the detailed explanation. We completely understand your desire to keep the scope of the official hacks fairly narrow, and that this one may be a bit too extensive for that. We’re happy BookStack users and definitely plan to keep using it, which is why we’re interested in making our extension available for others as well. If it works for you, we’d be glad if you’d like to list it as an external hack or include it on a separate page for externally maintained hacks. You can find the repository here: https://github.com/pronomix-gmbh/bookstack_file_attachment_preview Thanks again for the open and constructive exchange. Best regards Dirk