# File Upload
> A field for uploading files. A CSS component with two classes and no JavaScript.
The class goes on a plain ``. The button inside is the browser’s own, and its text comes from the operating system’s language. It cannot be translated, so the label above the field has to say what to upload.
## How to use it
**Plain HTML**
```html
```
```html
PDF or image, up to 10 MB per file.
```
**TypeScript**
```ts
import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/file-upload.css"
import "@lo-tek/interfaces/label.css"
import "@lo-tek/interfaces/help-text.css"
```
`lt` is used in two ways, and which one depends on whether you create the element or find it.
**If you create the markup,** spread the attributes in. That is the way in React, Astro and anything else that renders:
```tsx
import { lt } from "@lo-tek/interfaces/react"
```
The import is from `/react` here, since the block is JSX. From there the keys are `className` and `htmlFor`. In Astro and anything else without React, import `@lo-tek/interfaces` and you get `class` and `for`.
**If the element is already there,** set them on it. That is the way when you enhance HTML a server or a template has sent:
```ts
import { lt } from "@lo-tek/interfaces"
const field = document.querySelector("#attachments")
lt.setAttributes(field, lt.fileUpload({ multiple: true, accept: ".pdf" }))
```
`lt.fileUpload.list` gives the class for the list. See [Type-safe use](/type-safe-use.md).
| Attribute | Effect |
| - | - |
| `multiple` | Several files can be chosen |
| `accept` | The file types the file picker suggests |
| `data-state="invalid"` | Red border. Set `aria-invalid="true"` as well. |
| `data-state="success"` | Green border |
`accept` is a hint in the file picker, not a restriction. The user can choose “all files”, so the type has to be checked on the server anyway.
## The list of chosen files
You write the list yourself, since only you know what should happen when a file is removed.
**Plain HTML**
```html
birth-certificate.pdf
tenancy-agreement.pdf
```
The button text should say which file is removed. “Remove” alone gives identical buttons to someone listening to the page.
The field only remembers the latest selection: if the user picks two more files, they replace the previous ones. If the files should accumulate, and be removable one at a time, you have to keep the list yourself, and send it yourself:
```html
```
```js
const field = document.getElementById("attachments")
const form = field.form
let files = []
field.addEventListener("change", () => {
files = [...files, ...field.files]
// Draw the list of files here, with a "Remove" button per file.
field.value = ""
})
form.addEventListener("submit", async (event) => {
event.preventDefault()
const data = new FormData(form)
// The empty field would otherwise send an empty file under its own name.
data.delete(field.name)
for (const file of files) data.append(field.name, file)
await fetch(form.action, { method: "POST", body: data })
})
```
The field has to be inside a `