# File
> Source: https://design.nanatec.co.ke/components/file/
> One file — an attachment, an upload, a document on a record — with what it is, how big it is, and what can be done with it. A photograph shows itself; anything else shows a page marked with its kind and extension.
> Status: beta
> Since: v0.0.37
It follows an upload through: a bar while it goes, the reason and a retry
when it fails, the size and a download once it lands. A long name is cut in
the middle, so the extension stays in view.
Selecting the name fires `nana-file-open`; pair it with `nana-file-viewer`
to preview the file in place.
## Preview
```html
```
## States
```html
```
| Status | Shows | Offers |
|---|---|---|
| `uploading` | A bar at `progress`, or a moving one while it is unknown | Cancel, as `nana-file-remove` |
| `error` | `error` in red | Retry, as `nana-file-retry` |
| `ready` | The size and `meta` | Download when there is a `src`, and remove with `removable` |
## Kinds
A photograph shows itself — from `thumbnail` if you have a small one, or
`src`. Anything else is a page marked with its extension and coloured by kind:
PDF red, spreadsheets green, documents blue, presentations orange, audio and
video purple, archives amber.
```html
```
`variant="card"` suits a grid of photographs and documents; the default row
suits a list of attachments.
## Opening a file
The name is a button that fires `nana-file-open` with the file's `name`,
`src` and `type`. Hand those to a [File Viewer](/components/file-viewer/) to
preview it without leaving the page:
```js
const viewer = document.querySelector("nana-file-viewer[modal]");
const files = [...document.querySelectorAll("nana-file")];
document.addEventListener("nana-file-open", (e) => {
viewer.files = files.map(({ name, src, type, size }) => ({ name, src, type, size }));
viewer.show(files.indexOf(e.target));
});
```
## Installation
```bash
npm install @nana-tec/ui-components
```
Or copy the source in and own it:
```bash
npx @nana-tec/ui add file
```
## Usage
```js
import "@nana-tec/ui-components/file";
```
```html
```
```js
const el = document.querySelector("nana-file");
el.addEventListener("nana-file-open", (e) => console.log(e.detail));
el.addEventListener("nana-file-remove", (e) => console.log(e.detail));
el.addEventListener("nana-file-retry", (e) => console.log(e.detail));
```
## API
## Storybook
See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-file--docs