Hoppa till huvudinnehåll

FileUpload

Filuppladdning

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 install @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

NameTypeDefaultDescription
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.