# File upload (one file)

A dashed drop zone with a "Choose a file" button. Drop or choose a file: its name, size and a progress bar show, then
"Uploaded", and the file is listed under "Uploaded". One file at a time (a drop of several takes the first; a file dropped
during an upload is ignored). Live demo: https://components.hybriel.worldapi.org/file-upload

## Use it in an app

Copy the folder `components/file-upload/` (`file-upload.hl`; it carries its own `Style`, colours are semantic tokens with a
black/white/grey fallback, the one border is the drop zone's dashed one), compose it, and write the face that stores the file:

```
import FileUpload from './file-upload.hl'

View { FileUpload { } }

on server saveFile(file) {
	// file.name, file.type, file.size, file.bytes — store it where you want
	writeFile('storage/uploads/' + name, file.bytes)
	return { ok = true }
}
```

- The component sends the file with `emit server saveFile(file)`; the framework carries it over HTTP in parts with progress
  (hybriel#94). Pure Hybriel: no `.js`, no own network calls.
- The face decides where the file goes and how big it may be (`uploadMax` of the WebFramework). Answer anything but `null`
  when it is stored; `null` (or an error) shows "Failed".
- Face names are global to the app (`saveFile`): one upload face per app.
- `dropText`, `chooseText`, `uploadedTitle` are the texts. One component per page (composed members are the page's state).
- Progress comes from `on client uploadProgress`, shown by the component itself.

## Markup and states

`<file-upload>` holds `<drop-zone>` (class `over` while a file is dragged over) with `<upload-status>` (name, size,
`<progress>`, `<output class="state">`) and `<uploaded-list>` with `<ul class="uploaded">`. Classes on `<file-upload>`:
`busy`, `done`, `failed`, `shown`.