FileUpload

Filuppladdning, filväljare

Storybook

React Aria

Komponent som används när användaren behöver ladda upp filer från det egna filsystemet.

import { FileUpload } from '@midas-ds/components'

<FileUpload
  label='Välj en fil att ladda upp'
  description='Du kan välja en fil'
/>

Välj en fil att ladda uppDu kan välja en fil

Varianter

Välj flera filer

För att tillåta användaren att ladda upp flera filer på samma gång, använd attributet allowsMultiple

<FileUpload
  allowsMultiple
  label='Välj filer att ladda upp'
  description='Du kan välja flera filer'
/>

Välj filer att ladda uppDu kan välja flera filer

Kontrollerat val av filer

Om du vill kontrollera vilka filer användaren laddar upp kan du använda useState

import React from 'react'

const [files, setFiles] = React.useState<string[]>([])

return (
  <FileUpload
    allowsMultiple
    label='Välj filer att ladda upp'
    description='Du kan välja flera filer'
    onSelect={e => {
      if (e) {
        const files = Array.from(e)
        const filenames = files.map(file => file.name)
        setFiles(filenames)
      }
    }}
  />
)

Välj filer att ladda uppDu kan välja flera filer

Valda filer:

API

Name	Type	Default	Description
label	string	-	Label for the file upload button
description	string	-	Additional description field
dropzone	boolean	-	Use DropZone version
popover	InfoPopoverProps	-	An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button.
acceptedFileTypes	string[]	-	Specifies what mime type of files are allowed.
allowsMultiple	boolean	-	Whether multiple files can be selected.
defaultCamera	"user" | "environment"	-	Specifies the use of a media capture mechanism to capture the media on the spot.
children	ReactNode | ((values: DisclosureGroupRenderProps & { defaultChildren: ReactNode; }) => ReactNode)	-	The children of the component. A function may be provided to alter the children based on component state.
acceptDirectory	boolean	-	Enables the selection of directories instead of individual files.