File Upload

Klassen settes på et vanlig <input type="file">. Knappen inni er nettleserens egen, og teksten på den kommer fra operativsystemets språk. Den kan ikke oversettes, så ledeteksten over feltet må si hva som skal lastes opp.

Slik tar du den i bruk

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/file-upload/file-upload.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/label/label.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/help-text/help-text.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<label class="fs-label" for="vedlegg">Last opp vedlegg</label>
<input class="fs-file-upload" type="file" id="vedlegg" multiple accept=".pdf,.jpg" aria-describedby="vedlegg-hjelp" />
<p class="fs-help-text" id="vedlegg-hjelp">PDF eller bilde, opptil 10 MB per fil.</p>

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/file-upload.css"
import "@fristil/designsystem/label.css"
import "@fristil/designsystem/help-text.css"

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<input {...fs.fileUpload()} id="vedlegg" accept=".pdf,.jpg" />

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

import { fs } from "@fristil/designsystem"

const felt = document.querySelector<HTMLInputElement>("#vedlegg")

fs.setAttributes(felt, fs.fileUpload({ multiple: true, accept: ".pdf" }))

fs.fileUpload.list gir klassen på lista. Se Typesikker bruk.

Attributt	Effekt
`multiple`	Flere filer kan velges
`accept`	Filtypene filvelgeren foreslår
`data-state="invalid"`	Rød ramme. Sett `aria-invalid="true"` i tillegg.

accept er en hjelp i filvelgeren, ikke en sperre. Brukeren kan velge «alle filer», så typen må sjekkes på serveren uansett.

Lista over valgte filer

Lista skriver du selv, siden bare du vet hva som skal skje når en fil fjernes.

Eksempel
Ren HTML

<label class="fs-label" for="vedlegg-2">Last opp vedlegg</label>
<input class="fs-file-upload" type="file" id="vedlegg-2" multiple />

<ul class="fs-file-upload-list">
<li>
  fodselsattest.pdf
  <button class="fs-button" data-variant="ghost" type="button">Fjern fodselsattest.pdf</button>
</li>
<li>
  leiekontrakt.pdf
  <button class="fs-button" data-variant="ghost" type="button">Fjern leiekontrakt.pdf</button>
</li>
</ul>

Knappeteksten skal si hvilken fil som fjernes. «Fjern» alene gir like knapper for den som hører siden.

Feltet husker bare det siste utvalget: velger brukeren to filer til, erstatter de forrige. Skal filene samles opp, og kunne fjernes én og én, må du holde lista selv:

const felt = document.getElementById("vedlegg")
let filer = []

felt.addEventListener("change", () => {
  filer = [...filer, ...felt.files]
  tegnListe()
  felt.value = ""
})

Klasser du kan style

Klasse	Hva det er
`.fs-file-upload`	Feltet. Tilstanden kommer fra `data-state`.
`.fs-file-upload-list`	Lista over filene som er valgt

Variabel	Standard
`--fs-file-upload-padding`	`var(--fs-spacing-2)`
`--fs-file-upload-radius`	`var(--fs-spacing-1)`

Knappen inne i feltet styles gjennom ::file-selector-button, som er den eneste veien inn til den.

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

Si hvilke filtyper og hvilken største størrelse som godtas, før brukeren prøver. En feilmelding etterpå er et dårligere alternativ.
Meld fra når en fil er lagt til eller fjernet, i et felt med role="status".
Dra-og-slipp kan komme i tillegg, aldri i stedet. Det finnes ikke for tastatur.
Under opplasting: vis fremdrift per fil, og la brukeren avbryte.