FileList

Fillista, uppladdade filer

Storybook

Komponent för att visa en lista med uppladdade filer. Varje rad visar filnamn, valfri filstorlek och en knapp för att ta bort filen.

import { FileList, FileListItem } from '@midas-ds/components'

<FileList aria-label='Uppladdade filer'>
  <FileListItem
    fileName='CV_Anna_Svensson.pdf'
    fileSize='1.2 MB'
    onDelete={() => {}}
  />
</FileList>

• CV_Anna_Svensson.pdf

  ,

  1.2 MB

Utan filstorlek

fileSize är valfritt och kan utelämnas.

<FileList aria-label='Uppladdade filer'>
  <FileListItem fileName='CV_Anna_Svensson.pdf' onDelete={() => {}} />
</FileList>

• CV_Anna_Svensson.pdf

Utan borttagningsknapp

Utelämna onDelete för att visa en skrivskyddad lista. Kan en rad vara status='uploading', utelämna även onCancel, annars visas ändå en avbryt-knapp i det läget (se Ta bort eller avbryta).

<FileList aria-label='Bifogade filer'>
  <FileListItem fileName='Beslut.pdf' fileSize='512 KB' />
  <FileListItem fileName='Bilaga_1.pdf' fileSize='1.1 MB' />
</FileList>

• Beslut.pdf

  ,

  512 KB
• Bilaga_1.pdf

  ,

  1.1 MB

Uppladdning

status, progress och errorMessage på FileListItem visar var i uppladdningsflödet en fil befinner sig. Komponenten laddar inte upp något själv, det är din egen uppladdningskod som styr övergångarna, och den ser olika ut beroende på hur ni laddar upp (eget API, försignerad länk till molnlagring, eller annat). Ett exempel med XMLHttpRequest:

xhr.upload.onprogress = e => setProgress(Math.round((e.loaded / e.total) * 100))
xhr.onload = () => setStatus('success')
xhr.onerror = () => setStatus('error')

Under uppladdning

Sätt status='uploading' medan filen laddas upp. Ange progress (0–100) för ett bestämt förlopp, eller utelämna den för ett obestämt. Använd onCancel, inte onDelete, för knappen i detta läge, se Ta bort eller avbryta nedan för varför.

<FileListItem
  fileName='video.mp4'
  fileSize='128 MB'
  status='uploading'
  progress={40}
  onCancel={handleCancel}
/>

• video.mp4

  ,

  128 MB

Så visar du ett bestämt förlopp

progress är ett tal du själv räknar fram och skickar in, komponenten vet inget om hur uppladdningen sker. fetch kan inte rapportera uppladdningsförlopp alls; använd XMLHttpRequest (upload.onprogress) om du vill visa ett bestämt förlopp. Går det inte att räkna ut ett tal, utelämna progress för att visa ett obestämt förlopp istället.

Klar

<FileListItem
  fileName='resume.pdf'
  fileSize='1.2 MB'
  status='success'
  onDelete={handleDelete}
/>

• Upload complete

  resume.pdf

  ,

  1.2 MB
  Upload complete: resume.pdf

Fel

<FileListItem
  fileName='resume.pdf'
  fileSize='1.2 MB'
  status='error'
  errorMessage='Filen är för stor. Max filstorlek är 1 MB.'
  onDelete={handleDelete}
/>

• Upload failed

  resume.pdf

  ,

  1.2 MB
  Filen är för stor. Max filstorlek är 1 MB.
  resume.pdf: Filen är för stor. Max filstorlek är 1 MB.

Ta bort eller avbryta

onCancel och onDelete är callbacks: komponenten anropar dem när knappen trycks, men gör inget själv. Vad som faktiskt händer när de anropas är helt upp till dig. De är två olika åtgärder, inte samma knapp med olika etikett:

• onCancel: anropas när knappen trycks medan status='uploading' (knappen visas då som "Avbryt"). Kan användas för att avbryta den faktiska uppladdningen, till exempel med XMLHttpRequest.abort() eller AbortController.abort(), men FileList gör inget av det åt dig. Kopplas ingen sådan logik in kan en pågående uppladdning fortsätta i bakgrunden trots att raden försvunnit ur listan.
• onDelete: anropas när knappen trycks i alla andra lägen (visas som "Ta bort"). FileList vet inget om filen redan är sparad någonstans, är den det, till exempel efter status='success', kan onDelete användas för att även trigga en borttagning på serversidan. Även här: inget komponenten gör automatiskt, endast en callback du kan välja att använda.

Utelämnas onCancel faller knappen tillbaka på att anropa onDelete även under uppladdning.

I praktiken har samma FileListItem oftast båda: filen går ju igenom flera lägen över tid, och det är status som avgör vilken som faktiskt anropas när knappen trycks:

<FileListItem
  fileName='video.mp4'
  status={status}
  onCancel={handleCancel}
  onDelete={handleDelete}
/>

Tillgänglighet

FileList renderar en semantisk <ul>-lista där varje borttagningsknapp är direkt nåbar via tangentbordet.

Tangent	Åtgärd
Tab / Shift+Tab	Navigera mellan borttagningsknappar
Enter / Space	Aktivera borttagningsknappen

När en rad tas bort flyttas fokus automatiskt till en angränsande rads knapp, eller till listan själv, om det var den sista raden, annars skulle fokus falla igenom och gå förlorat. Detta sker bara när raden faktiskt försvinner ur DOM:en, aldrig i förväg, så det stör inte fokus du redan satt själv (till exempel om en borttagning misslyckas och raden ligger kvar).

aria-label på FileList är obligatoriskt och beskriver listans syfte för skärmläsare. Borttagningsknappen har ett automatiskt genererat aria-label baserat på filnamnet, t.ex. "Ta bort CV_Anna_Svensson.pdf".

API

FileList

FileListItem

Name	Type	Default	Description
fileName *	string	-
fileSize	string	-
status	"error" | "idle" | "success" | "uploading"	idle
progress	number	-	0-100. Only meaningful when status='uploading'; omit for indeterminate.
errorMessage	string	-	Shown below the row when status='error'.
className	string	-