components

1.7 KB

1. # File upload (one file)
3. A dashed drop zone with a "Choose a file" button. Drop or choose a file: its name, size and a progress bar show, then
4. "Uploaded", and the file is listed under "Uploaded". One file at a time (a drop of several takes the first; a file dropped
5. during an upload is ignored). Live demo: https://components.hybriel.worldapi.org/file-upload
7. ## Use it in an app
9. Copy the folder `components/file-upload/` (`file-upload.hl`; it carries its own `Style`, colours are semantic tokens with a
10. black/white/grey fallback, the one border is the drop zone's dashed one), compose it, and write the face that stores the file:
12. ```
13. import FileUpload from './file-upload.hl'
15. View { FileUpload { } }
17. on server saveFile(file) {
18. // file.name, file.type, file.size, file.bytes — store it where you want
19. writeFile('storage/uploads/' + name, file.bytes)
20. return { ok = true }
21. }
22. ```
24. - The component sends the file with `emit server saveFile(file)`; the framework carries it over HTTP in parts with progress
25. (hybriel#94). Pure Hybriel: no `.js`, no own network calls.
26. - The face decides where the file goes and how big it may be (`uploadMax` of the WebFramework). Answer anything but `null`
27. when it is stored; `null` (or an error) shows "Failed".
28. - Face names are global to the app (`saveFile`): one upload face per app.
29. - `dropText`, `chooseText`, `uploadedTitle` are the texts. One component per page (composed members are the page's state).
30. - Progress comes from `on client uploadProgress`, shown by the component itself.
32. ## Markup and states
34. `<file-upload>` holds `<drop-zone>` (class `over` while a file is dragged over) with `<upload-status>` (name, size,
35. `<progress>`, `<output class="state">`) and `<uploaded-list>` with `<ul class="uploaded">`. Classes on `<file-upload>`:
36. `busy`, `done`, `failed`, `shown`.