# File Viewer
> Source: https://design.nanatec.co.ke/components/file-viewer/
> Looks at a file without leaving the page: a photograph to zoom into, a PDF in the browser's own reader, a video or a recording to play, a text file to read. A file the browser cannot draw — a Word document, a spreadsheet — says so plainly and offers the download instead of an empty frame.
> Status: beta
> Since: v0.0.37
Give it several files and it steps between them, with a strip of thumbnails
underneath. It sits in the page by default; `modal` lifts it into a dialog
over the page, opened and closed with `open`.
Arrow keys move between files. On a photograph `+` and `-` zoom, `0`
resets, and once zoomed the arrows look around; Ctrl and the wheel, a pinch
or a double click zoom too.
## Preview
```html
```
## What it shows
| File | Shown as |
|---|---|
| Photographs — JPEG, PNG, GIF, WebP, AVIF, SVG | Zoomable, with the arrows and drag to look around |
| PDF | The browser's own PDF reader |
| Video and audio | The browser's player |
| Text — TXT, JSON, Markdown, logs | The contents, up to 200 kB |
| Anything else — Word, Excel and CSV, HEIC, archives | The file's kind, a plain reason, and the download |
```html
```
## In a dialog
`modal` puts the viewer in a native dialog over the page: focus stays inside,
Escape closes it, and the page behind cannot be scrolled. Open it with
`show(index)` or the `open` attribute; closing fires `nana-viewer-close`.
```js
const viewer = document.querySelector("nana-file-viewer[modal]");
viewer.files = attachments;
viewer.show(2);
```
On a phone the dialog fills the screen.
## Keyboard
Left and Right move between files. On a photograph, `+` and `-` zoom and `0`
resets; once zoomed in, the arrows look around instead. Ctrl and the wheel, a
pinch, or a double click zoom too. Inside a video or a PDF the keys belong to
the player.
Photographs on this page are from [Pexels](https://www.pexels.com).
## Installation
```bash
npm install @nana-tec/ui-components
```
Or copy the source in and own it:
```bash
npx @nana-tec/ui add file-viewer
```
## Usage
```js
import "@nana-tec/ui-components/file-viewer";
```
```html
```
```js
const el = document.querySelector("nana-file-viewer");
el.addEventListener("nana-viewer-change", (e) => console.log(e.detail));
el.addEventListener("nana-viewer-close", (e) => console.log(e.detail));
```
## API
## Storybook
See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-file-viewer--docs