FileUpload
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'
/>
Du kan välja en fil
Installation
- npm
- Yarn
- pnpm
npm install @midas-ds/components
yarn add @midas-ds/components
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'
/>
Du 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)
}
}}
/>
)
Du 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. |