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.

<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

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

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

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
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	-	The children of the component.
acceptDirectory	boolean	-	Enables the selection of directories instead of individual files.