File Viewer

Typesafe component to view files in the browser.

import { FileViewer } from "@inspectra/ui/file-viewer"
 
function MyComponent() {
  return (
    <FileViewer
      src="/sample.pdf" // or public url
      type="application/pdf"
    />
  )
}

Usage

The component allows the use of a wide variety of formats. You only need to indicate the type of the file to be displayed and the src which can be a public url or the path to the file inside the app (for example, inside the assets of the public folder).

Typescript support offers all the necessary props according to the type.

Images

The supported types are image/png, image/jpeg, image/gif, image/bmp, image/tiff.

Controls

The image viewer allows you to do some control actions: rotate, zoom, and reset. Set controls to true to enable it.

Zoom

The image viewer allows you to zoom in and out in several ways:

with the mouse wheel.
by double-clicking
with mobile gestures

Zoom will automatically be enabled if you set controls to true. To disable it, you need to explicitly set zoom to false.

Also, if the image is very large, you can move and drag the image to see the parts that are not visible.

Video

The supported types are video/mp4, video/quicktime, video/x-msvideo, video/x-matroska, video/webm.

If you want to play a video from youtube, you can use the url and the type youtube.

Text

The supported types are text/csv, text/plain and text/html.

The following is an example with a local csv file from the public folder:

PDF

Uses the browser's native renderer to display the PDF. The type is application/pdf

Docs files

In order to render documents we use the Google renderer. This File Viewer accepts files uploaded to a public url as well as shared google drive file links that allow to be visible to anyone who has the link (if this link is private, then it will not be possible to view it)

The Google renderer accepts the following formats from both public urls and Google Drive files:

Image files (.JPEG, .PNG, .GIF, .TIFF, .BMP)
Video files (.WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV)
Text files (.TXT)
Markup/Code (.CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS)
Microsoft Word (.DOC and .DOCX)
Microsoft Excel (.XLS and .XLSX)
Microsoft PowerPoint (.PPT and .PPTX)
Adobe Portable Document Format (.PDF)
Apple Pages (.PAGES)
Adobe Illustrator (.AI)
Adobe Photoshop (.PSD)
Tagged Image File Format (.TIFF)
Autodesk AutoCad (.DXF)
Scalable Vector Graphics (.SVG)
PostScript (.EPS, .PS)
TrueType (.TTF)
XML Paper Specification (.XPS)
Archive file types (.ZIP and .RAR)

To insert a url of a Google Drive file, the following structure should be used, setting the type to doc-file:

import { FileViewer } from "@inspectra/ui/file-viewer"
 
function MyComponent() {
  return (
    <FileViewer
      src="http://ieee802.org/secmail/docIZSEwEqHFr.doc"
      type="doc-file"
    />
  )
}

💡

There is also Microsoft's renderer, but it is not as complete as Google's and it does not allow us to render Google Drive files either.

💡

Only files under 25 MB can be previewed with the Google Drive viewer.

Public URL

Google Docs link

Google Sheets link

Google Slides link

3D files

We use React three fiber (opens in a new tab) to display files in .obj, .glb and .gltf format.

This viewer allows to zoom and rotate the model (with the possibility of automatic rotation through the checkbox).

Example using a carousel

Using on modal

API Reference

Prop	Type	Default
`src*`	`string`	`-`
`type*`	`enum`	`-`

File Uploader Tag Picker