FileDisplay

The FileDisplay widget displays a variety of file types in a tabbed container. The supported file types include:

FileDisplay widget features

• Secure rendering using XSS protection for HTML/JSON/TXT/XML content.

• Handles unsupported file types gracefully.

• Optionally displays a text excerpt along with the file in separate tabs.

The widget does not currently support Excel (XLS, XLSX) or PowerPoint (PPT, PPTX) file types.

FileDisplay example rendering

FileDisplay example configuration

import { FileDisplay } from 'ml-fasttrack';
const obj = { first: "Mark", last: "Logic", type: "database" };
const jsonBlob = new Blob([JSON.stringify(obj)], { type: 'application/json' });
//...
<FileDisplay
  file={jsonBlob}
  extension="json"
  excerpt={"Mark"}
  style={{ height: 600 }}
  excerptLabel="Excerpt"
  documentLabel="Full Document"
  noPreviewMessage="No preview available."
/>

The file prop accepts the file to be rendered as a Blob (or File, which is based on Blob).

For more examples and information about the FileDisplay widget, see FastTrack Storybook.