File Info

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 property panels, breadcrumbs, or conditional toolbars that adapt to the active file's properties.

• Real-Time Updates: Metadata is emitted automatically on load and during file switches.
• Physical Dimensions: Access the logical width and height of CAD and PDF documents.
• Source Tracking: Maintain a direct link to the original file for auditing and export.

Listen for fileInfo and update your UI when metadata changes.

window.addEventListener('message', (event) => {
  if (event.data.type === 'fileInfo') {
    const info = event.data.payload.fileInfo;
    console.log('File:', info.name);
  }
});

The viewer acts as the source of truth for document properties. Whenever the session state stabilizes, the viewer broadcasts the comprehensive metadata object.

// Listen for metadata updates
window.addEventListener('message', (event) => {
  if (event.data.type === 'fileInfo') {
    const { name, date, width } = event.data.payload.fileInfo;
    console.log(`Metadata received for ${name}`);
  }
});

// Example: Updating a property panel
const updateProperties = (metadata) => {
  document.getElementById('file-name').textContent = metadata.name;
  document.getElementById('file-dim').textContent = `${metadata.width}x${metadata.height}`;
};

Capture metadata updates and bind them to a property panel.

function updateProperties(metadata) {
  document.getElementById('file-name').textContent = metadata.name;
  document.getElementById('file-dim').textContent = metadata.width + 'x' + metadata.height;
}

window.addEventListener('message', (event) => {
  if (event.data.type === 'fileInfo') {
    updateProperties(event.data.payload.fileInfo);
  }
});

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

Keep metadata workflows aligned with file APIs.

• Viewer Setup: Canvas Iframe Initialization
• File Management: File Management
• File API: API References