Skip to content

Multi-Document Support (Technical Guide)

Deckly's multi-document engine extends beyond PDFs to support Microsoft Office (PPTX, DOCX, XLSX) and CSV files. This document outlines the technical implementation of the processing pipeline, display modes, and security gating.


Processing Pipeline

1. File Upload & Identification

When a user selects a file in ManageDeck.tsx, the system identifies the file type via extension:

  • Supported: .pdf, .pptx, .docx, .doc, .xlsx, .csv.
  • Logic: File selection happens in ManageDeck.tsx, while processing/conversion orchestration now lives in useManageDeckWorkflow.ts and workflows/deckProcessing.ts.

2. PDF "Interactive" Processing (Client-Side)

For PDFs, high-fidelity slide viewing and link preservation are handled entirely in the browser:

  • Technology: Uses pdfjs-dist (PDF.js) for rendering and metadata extraction.
  • Link Preservation:
    • The extractPdfLinkHotspots() utility scans the document's annotation layer.
    • It identifies Link subtypes and extracts their URLs and bounding boxes.
    • Coordinates are mapped to 0-1 percentages relative to the page viewport.
  • Workflow:
    1. Load: PDF is loaded into browser memory.
    2. Extract: Links are extracted and stored in the SlidePage.links array.
    3. Rasterize: Each page is rendered to a canvas and converted to a WebP blob.
    4. Upload: Images and metadata are uploaded through the shared deck processing/storage flow.

3. Office "Interactive" Conversion (Edge Function)

For Office files (PPTX, DOCX), conversion is handled by a Supabase Edge Function (document-processor):

  • Provider: Uses ConvertAPI for server-side image generation.
  • Current Limitation: Link preservation is currently restricted to native PDF uploads. Office-to-Image conversion produces static rasterized slides without hyperlink metadata.
  • Workflow:
    1. Download: The function downloads the raw file from Supabase Storage.
    2. Convert: ConvertAPI transforms the file into high-quality JPG images.
    3. Upload: The resulting images are stored in a unique folder.
    4. Metadata Update: The pages array in the decks table is updated with the image URLs.

Display Modes

1. Interactive Mode (display_mode: 'interactive')

Renders the document as a slide-by-slide web experience using ImageDeckViewer.tsx.

  • Data Shape: Deck.pages contains an array of image URLs.
  • Analytics: Supports slide-level engagement heartbeat tracking.
  • Requirement: Restricted to PRO users.

2. "Raw" View Mode (display_mode: 'raw')

Integrates the Microsoft Office Online viewer for native-fidelity rendering.

  • Implementation: Renders an <iframe> pointing to https://view.officeapps.live.com/op/embed.aspx.
  • Best For: Multi-sheet Excels or content-heavy Word docs where web-native navigation (PDF-style) isn't the priority.

Tier Enforcement & Gating

The tiered access logic is centralized in src/constants/tiers.ts.

  • Feature Flag: canUseOfficeSupport and canUseInteractiveMode.
  • UI Gating:
    • Upload: ManageDeck.tsx prevents uploading Office files for FREE users.
    • Interactive Toggle: Displays a "PRO" badge; clicking triggers the TierUpsellModal.
    • Server-Side: The Edge Function verifies the user's tier before processing, preventing API-level bypasses.

Security Hardening

To protect sensitive pitch data, the processing pipeline includes multiple security layers:

  1. JWT Verification: Processors require a valid Supabase access_token in the Authorization header.
  2. Ownership Check: The Edge Function queries the database to ensure auth.uid() === deck.user_id before touching any data.
  3. Error Shielding: Errors from ConvertAPI or Storage are caught and logged server-side. The client receives only a generic Internal Server Error to prevent leaking infrastructure details.
  4. Data Integrity: Conversion results are stored in isolated, user-specific paths (userId/deck-id/converted/).

Built with ❤️ for Founders