File

[ux-fran]

We willen graag meer leren over de File component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

File

Doel

Een File toont een bestand. Een bestand kan meerdere states hebben zoals: download, bekijk, verwijder, load en invalid.

Gerelateerde componenten

File Input

Onderzoek

Rapport Generieke Services 2023 - Gemeente Den Haag (PDF, 9 MB)
Uit dit gebruikersonderzoek is er één inzicht over de documenten die op een zaakpagina staan:

Een respondent verwachtte de zojuist geüploade informatie of foto’s terug te vinden onder ‘Documenten’. Het kan nuttig zijn om duidelijker te communiceren wie de afzender van de documenten is, aangezien deze sectie ook bestanden kan bevatten die door de gemeente zijn geüpload.

Vraag toegankelijkheid en focus - Slack
Rozerin stelde de vraag waar de de focus moet komen te liggen bij de File component. Moet deze komen bij de gehele component, enkel op de Link of zelfs op meerdere elementen die niet zijn benoemd? De community antwoordt op deze vraag in de thread.

Conclusie: bij de gemeente Den Haag is besloten de focus te leggen op de gehele component in plaats van alleen de link, omdat het gehele element aanklikbaar is en niet alleen de link.

Should “Download” components be buttons or links? - Accessible Web
Vraag of een download component een Button of een Link moet zijn op het gebied van toegankelijkheid. De aanbeveling is: een Link.

File uploader - Carbon Design System
Carbon Design biedt functionaliteit voor het downloaden, bekijken en verwijderen van bestanden. Voorvertoning van bestanden is beschikbaar voordat ze worden gedownload.

File List - Ant Design
Ant Design heeft een bestandslijstcomponent waarmee gebruikers bestanden kunnen vooraf bekijken, downloaden en verwijderen via acties in een gepresenteerde lijst.

Files - Lightning Design System
Salesforce biedt een component voor het beheren van bestanden waarmee gebruikers deze kunnen downloaden, bekijken en verwijderen, ontworpen voor consistentie en toegankelijkheid.

File-upload - The Component Gallery
Een groot overzicht van alle File (input/upload) componenten van verschillende design systems.

[ux-fran]

Research nov 2024

• Gekeken in diverse files van Amsterdam (ik heb geen toegang tot de Figma), DSO, RVO en Utrecht en daar verder iets vergelijkbaars gevonden.

Heb ik wat gemist of weet jij (de lezer) misschien nog een organisatie of andere gemeente met een vergelijkbaar component, vul gerust aan!

[ux-fran]

Den Haag

• Storybook
• Figma - Huidig
• GitHub

---

Screenshots / Varianten

Storybook

Default

Hover

Focus

Button

List

Responsive gedrag

Figma

Als file-uploader

---

Notities

• Bestaat uit de classes left en right. In left staat het icoon dat het bestandstype aanduidt, en in right bevinden zich het label en de link.
• Het gehele element is aanklikbaar.
• Bij hover verandert alleen de styling van de link mee.
• Label bestaat uit 'name' en 'description'. De description bevat het bestandstype, de bestandsgrootte en de datum van upload of beschikbaarheid.
• Kan als een lijst worden getoond, waarbij de bestanden onder elkaar worden gestapeld.
• Responsive gedrag: Link wordt op een volgende regel geplaatst.
• In Figma is de File component ook zichtbaar wanneer deze wordt geüpload via een File-uploader component. Het bestand kan desgewenst worden verwijderd.
• Richtlijnen beschikbaar.

[ux-fran]

DUO

Documentatie website

---

Screenshots / Varianten

Default

File
Om bijvoorbeeld te gebruiken in een tabel.

Downloadbaar bestand
Gebruik bij een bestand wat te downloaden is.

Responsive gedrag

---

Notities

• Wordt gebruikt wanneer de gebruiker één of meerdere bestanden wil uploaden of moet downloaden.
• Bevat standaard een icoon van een bestand.
• Type default: bevat een Link (verwijderen). Alleen deze is aanklikbaar. Het gehele element is dus niet aanklikbaar.
• Type file: bevat geen Link.
• Type downloadbaar bestand: bestandsnaam is een Link.
• Filename bestaat uit 'title' en 'size'. De title geeft de naam van het bestand aan. En de size geeft de bestandsextensie en bestandsgrootte aan.
• Bestandsgrootte wordt aangegeven in KB's en MB's.
• Kan als een lijst worden getoond, waarbij de bestanden onder elkaar worden gestapeld.
• Responsive gedrag: filename en Link worden onder elkaar geplaatst.
• Richtlijnen beschikbaar.

[ux-fran]

Open Formulieren

Storybook

---

Screenshots / Varianten

Happy flow

One allowed file type

Multiple allowed file types

Error flow

Responsive gedrag

---

Notities

• Er is geen afzonderlijk ‘File’ component beschikbaar; voorbeelden maken deel uit van de ‘File-upload’ component.
• Wordt weergegeven wanneer de gebruiker één of meerdere bestanden heeft geüpload.
• Bevat een bestandsnaam, een verwijdericoon, de bestandsgrootte en, bij fouten (unhappy flows), een foutmelding.
• Interactie verwijdericoon: geüploade bestand wordt direct verwijderd uit het overzicht.
• In de happy flow is de bestandsnaam een klikbare link.
• Bestandsgrootte wordt aangegeven in kB's.
• Het voorbeeld ondersteunt het uploaden van maximaal één bestand.
• Responsive gedrag: de layout blijft consistent, ongeacht het schermformaat.

[ux-fran]

Open Gemeenten

Patternlab

---

Screenshots / Varianten

---

Notities

• Onder de naam: Uploads.
• Is in zijn geheel een Link.
• Bestaat uit een icoon, het soort bestand, bestandsextensie en bestandsgrootte.
• Icoon geeft bestandstype aan. Er zijn verschillende iconen beschikbaar.
• Bestandsgrootte wordt aangegeven in MB's.
• Kan als een lijst worden getoond, waarbij de bestanden onder elkaar worden gestapeld.
• Responsive gedrag: de layout blijft consistent, ongeacht het schermformaat.

[ux-fran]

Rotterdam

Figma

---

Screenshots / Varianten

Responsive gedrag

---

Notities

• Er is geen afzonderlijk ‘File’ component beschikbaar; voorbeelden maken deel uit van de ‘Modal file upload’ component.
• Wordt weergegeven wanneer de gebruiker één of meerdere bestanden heeft geüpload.
• Bevat een icoon, bestandsnaam, de bestandsgrootte en een kruisicoon.
• Bestandsgrootte wordt aangegeven in KB's.
• Bij meerdere geüploade bestanden worden deze onder elkaar gestapeld.
• Responsive gedrag: de layout blijft consistent, ongeacht het schermformaat. Geen voorbeeld uitgewerkt bij langere bestandsnamen.