file-input.md

FileInput

Source

Accepts specified file types via dialog or drag and drop.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { FileInput } from 'chayns-components';

// ...

<FileInput {...} />

Props

The FileInput-component takes the following props:

Name	Type	Default	Required
className	string
style	{ [key: string]: string | number }
stopPropagation	boolean	false
disabled	boolean	false
errorMessages	{ tooMuchFiles: string, fileTooBig: string, wrongFileType: string, permanentNoPermission: string, temporaryNoPermission: string }	{ tooMuchFiles: 'Du kannst nur ##NUMBER## Dateien hochladen.', fileTooBig: 'Es sind nur Dateien bis ##SIZE## erlaubt.', wrongFileType: 'Mindestens eine Datei hat das falsche Dateiformat.', permanentNoPermission: 'Bitte überprüfe die Einstellungen Deiner App und erlaube den Dateizugriff auf Deinem Gerät.', temporaryNoPermission: null, }
items	Array<{ types: Array<string>, maxFileSize: number, maxNumberOfFiles: number, directory: boolean, onClick: function, onChange: function, onError: function, className: string, style: { [key: string]: string | number }, disabled: boolean, content: { text: string, icon: string | object } | { children: ReactNode | Array<ReactNode> } }>	[ { types: [FileInput.types.ALL], maxFileSize: 4 * 1024 * 1024, // 4 MB maxNumberOfFiles: 0, // 0=infinity directory: false, onClick: null, onChange: null, onError: null, className: null, style: null, disabled: false, content: null, }, ]

className

className?: string

A classname string that is applied to the root element.

---

style

style?: { [key: string]: string | number }

A React style object that is applied to the root element.

---

stopPropagation

stopPropagation?: boolean

Wether to stop propagation of click events to parent elements.

---

disabled

disabled?: boolean

Disables any interaction with the component and renders it in a disabled style.

---

errorMessages

errorMessages?: { tooMuchFiles: string, fileTooBig: string, wrongFileType: string, permanentNoPermission: string, temporaryNoPermission: string }

Custom error messages for the component.

---

items

items?: Array<{ types: Array<string>, maxFileSize: number, maxNumberOfFiles: number, directory: boolean, onClick: function, onChange: function, onError: function, className: string, style: { [key: string]: string | number }, disabled: boolean, content: { text: string, icon: string | object } | { children: ReactNode | Array<ReactNode> } }>

The different fields that will be shown in the file input.