Rasterex APINPM Package/docs/components/files/info

File Info

Access detailed metadata for the active document, synchronized in real-time with the canvas state.

Overview

File Info allows your application to retrieve technical metadata about the document currently being viewed. This includes physical dimensions, modification dates, and original source URLs.

By listening to metadata events, you can build custom UI elements such as details panels, breadcrumbs, or audit logs that adapt to the active file's properties.

  • Real-Time Updates: Metadata is emitted automatically on load and during active file switches.
  • Physical Dimensions: Access logical width and height attributes of CAD and PDF drawings.
  • Source Tracking: Track original URL domains to correlate with external databases.

Quick Examples

Subscribe to metadata changes and inspect the file information:

Listen for fileInfo updates

const unsubscribe = viewer.documents.on("fileInfo", (event) => {
  console.log("Active Document Name:", event.fileInfo?.name);
  console.log("Original Source URL:", event.fileInfo?.url);
});

Control Flow

Metadata broadcast follows a stable state event flow:

Canvas Emits

1. Canvas Emits metadata

The canvas broadcasts the fileInfo event after parsing a file or switching tabs.

typescript
// Event payload shape
type CanvasFileInfoPayload = {
  activeId: string;
  activeIndex?: number;
  fileInfo: {
    url?: string;
    name?: string;
    width?: unknown;
    height?: unknown;
    date?: unknown;
  } | null;
};
Host Sends

2. Host Renders Properties

The host application processes dimensions and formats timestamps for user presentation.

typescript
const width = typeof info?.width === "number" ? info.width : 0;
const name = info?.name ?? "Untitled";

Handling Metadata Values

Safely compile property listings and resolve null cases:

  • `activeId` vs Labels: Always match documents using the unique activeId parameter, not name or title display strings.
  • Open Result Callback: viewer.documents.open(...) resolves directly with the first parsed file metadata snapshot, allowing immediate extraction.
  • Type Guarding Dimensions: The width, height, and date properties are typed as unknown since they vary by file type. Verify their type (e.g., typeof value === "number") before computing sizes.

Vanilla Integration

Copy these project setup files to configure mounting, event subscriptions, and details panel rendering:

import { createViewer } from "@rasterex/viewer";
import "./style.css";

const viewer = createViewer({
  container: "#viewer"
});

const nameEl = document.querySelector("[data-file-name]");
const urlEl = document.querySelector("[data-file-url]");
const sizeEl = document.querySelector("[data-file-size]");

function renderFileInfo(event) {
  const info = event.fileInfo;
  if (!info) {
    if (nameEl) nameEl.textContent = "No active file";
    return;
  }

  if (nameEl) nameEl.textContent = info.name || "Untitled";
  if (urlEl) urlEl.textContent = info.url || "-";

  const width = typeof info.width === "number" ? info.width : "-";
  const height = typeof info.height === "number" ? info.height : "-";
  if (sizeEl) sizeEl.textContent = width !== "-" ? `${width} x ${height}` : "-";
}

async function startViewer() {
  await viewer.mount();
  await viewer.ready();

  viewer.documents.on("fileInfo", renderFileInfo);

  await viewer.documents.open({
    url: "https://pdfobject.com/pdf/sample.pdf",
    displayName: "sample.pdf"
  });
}

startViewer().catch(console.error);
Vanilla Integration

React Integration

Subscribe to metadata changes and render custom labels inside a React component:

import { useEffect, useRef, useState } from "react";
import { createViewer, type CanvasFileInfoPayload, type RasterexViewer } from "@rasterex/viewer";
import "./style.css";

export function FileInfoExample() {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const viewerRef = useRef<RasterexViewer | null>(null);
  const [fileName, setFileName] = useState("No active file");

  useEffect(() => {
    if (!containerRef.current) return undefined;

    const viewer = createViewer({ container: containerRef.current });
    viewerRef.current = viewer;

    const unsubscribe = viewer.documents.on("fileInfo", (event) => {
      setFileName(event.fileInfo?.name ?? "No active file");
    });

    async function start(): Promise<void> {
      await viewer.mount();
      await viewer.ready();
      
      await viewer.documents.open({
        url: "https://pdfobject.com/pdf/sample.pdf",
        displayName: "sample.pdf"
      });
    }

    void start().catch(console.error);

    return () => {
      unsubscribe();
      viewer.destroy();
      viewerRef.current = null;
    };
  }, []);

  return (
    <div>
      <p>Active File: <strong>{fileName}</strong></p>
      <div ref={containerRef} style={{ height: 600 }} />
    </div>
  );
}
React Integration

Vue Integration

Subscribe to metadata changes and render details in a Vue Composition template:

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
import { createViewer, type RasterexViewer } from "@rasterex/viewer";
import "./style.css";

const containerRef = ref<HTMLElement | null>(null);
const viewerRef = shallowRef<RasterexViewer | null>(null);
const fileName = ref("No active file");

let unsubscribe: (() => void) | undefined;

onMounted(async () => {
  if (!containerRef.value) return;

  const viewer = createViewer({ container: containerRef.value });
  viewerRef.value = viewer;

  unsubscribe = viewer.documents.on("fileInfo", (event) => {
    fileName.value = event.fileInfo?.name ?? "No active file";
  });

  try {
    await viewer.mount();
    await viewer.ready();

    await viewer.documents.open({
      url: "https://pdfobject.com/pdf/sample.pdf",
      displayName: "sample.pdf"
    });
  } catch (error) {
    console.error(error);
  }
});

onBeforeUnmount(() => {
  unsubscribe?.();
  viewerRef.value?.destroy();
  viewerRef.value = null;
});
</script>

<template>
  <div>
    <p>Active File: <strong>{{ fileName }}</strong></p>
    <div ref={containerRef} style="height: 600px" />
  </div>
</template>
Vue Integration

Angular Integration

Subscribe to metadata changes and render details in an Angular component structure:

import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  ViewChild
} from "@angular/core";
import { createViewer, type RasterexViewer } from "@rasterex/viewer";

@Component({
  selector: "app-file-info",
  templateUrl: "./file-info.component.html"
})
export class FileInfoComponent implements AfterViewInit, OnDestroy {
  @ViewChild("viewerContainer", { static: true })
  viewerContainer!: ElementRef<HTMLElement>;

  fileName = "No active file";
  private viewer: RasterexViewer | null = null;
  private unsubscribe?: () => void;

  async ngAfterViewInit(): Promise<void> {
    const viewer = createViewer({
      container: this.viewerContainer.nativeElement
    });

    this.viewer = viewer;

    this.unsubscribe = viewer.documents.on("fileInfo", (event) => {
      this.fileName = event.fileInfo?.name ?? "No active file";
    });

    try {
      await viewer.mount();
      await viewer.ready();

      await viewer.documents.open({
        url: "https://pdfobject.com/pdf/sample.pdf",
        displayName: "sample.pdf"
      });
    } catch (error) {
      console.error(error);
    }
  }

  ngOnDestroy(): void {
    this.unsubscribe?.();
    this.viewer?.destroy();
  }
}
Angular Integration

Live Preview

Use the interactive preview below to inspect the real-time payload emitted when you switch or open files.

Interactive Workbench

File info preview

Track the active file metadata emitted by the Canvas in real time.

Additional Resources

Keep metadata workflows aligned with file APIs.