Form

InputFile

Storybook

It is a file input component designed to allow users to select one or more files and upload them to a website. This component is designed to be easy to use and customizable, and can be easily integrated into any website or application.

Import

1import { InputFile } from 'dd360-ds'

1import InputFile from 'dd360-ds/InputFile'

Usage

1import { InputFile } from 'dd360-ds'
2
3<InputFile />

hintText

Used to provide additional information to users about the type of file they are expected to upload. By default, this attribute is "Upload in PDF format and signed by all parties (if applicable)."

1import { InputFile } from 'dd360-ds'
2
3<InputFile hintText='Upload in PDF' />

boxMessage

This prop is used to provide additional information to users about file upload requirements, such as the maximum weight allowed for a file. By default, this attribute is "PDF Maximum weight per file 20 MB".

1import { InputFile } from 'dd360-ds'
2
3<InputFile boxMessage='PDF Maximum weight per file 3 MB' />

dragMessage

This prop is used to provide information to users on how they can upload files, i.e. dragging and dropping. By default, this attribute is "Drop here".

1import { InputFile } from 'dd360-ds'
2
3<InputFile dragMessage='Drop here' />

label

This prop is used to provide a label to the InputFile component. By default, this attribute is "Drag & Drop your files or".

1import { InputFile } from 'dd360-ds'
2
3<InputFile label='Drag & Drop your files or' />

labelAction

This prop is used to provide a text that tells the user that he can click on the InputFile component to select a file. By default, this attribute is "browse from your device".

1import { InputFile } from 'dd360-ds'
2
3<InputFile labelAction='browse from your device' />

progressIndicator

This prop is used to show the progress of a file upload. The default value is 0.

1import { InputFile } from 'dd360-ds'
2
3<InputFile progressIndicator={50} />

error

This prop is used to display an error message to the user in case an error occurs when loading a file. The default value is a object of equal type what of the example

1import { InputFile } from 'dd360-ds'
2
3const newError = { show: false, message: <span>File type not allowed or exceeds the maximum weight</span> }
4
5<InputFile error={newError} />

API Reference