Biofarma | Bind UI

Upload

An input which allows users to upload a file from their device

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Label

Select or drag document

jpg, png or pdf (max 5 mb)

Helper text

Usage

import { Upload } from 'bio-bind-ui';

<Upload
  errorText='Error text'
  helperText='Helper text'
  id='single'
  infoLabel='Select or drag document'
  infoSublabel='jpg, png or pdf (max 5 mb)'
  label='Label'
  labelSelectDocument='SELECT DOCUMENT'
  mode='light'
  onRemoveFile={() => {}}
  onUploadChange={() => {}}
  selectedFiles={null}
  size='sm'
/>

Examples

Size

Set the size prop to sm , md, or lg.

Upload lg size

Select or drag document

jpg, png or pdf (max 5 mb)

Helper text

Multiple Upload

Set the isMultiple prop to true or false.

Multi Upload

Helper text

Mode (optional)

Use mode to use dark or light

Label

Select or drag document

jpg, png or pdf (max 5 mb)

Helper text

Props

Props	Required	Default	Type	description
label	false	-	`string`	The label text for the upload.
style	false	-	`CSSProperties`	Custom styles for the upload component.
mode	false	`light`	`light` `dark`	The theme mode of the upload (`light` or `dark`).
size	false	`sm`	`sm` `md` `lg`	The size of upload.
infoLabel	false	-	`string`	A label text give information context about upload.
infoSublabel	false	-	`string`	A sub label text give information context about upload.
required	false	`false`	`true` `false`	If true, the upload cannot be empty (required)
helperText	false	-	`string`	A helper text below the upload
errorText	false	-	`string`	Error text if upload is error
isError	false	`false`	`true` `false`	If true, upload will be set to error state
isMultiple	false	`false`	`true` `false`	If true, it will able to multiple upload
disabled	false	`false`	`true` `false`	If true, upload will be set to disabled state
id	false	-	`string`	A unique identifier for the upload
onCapture	false	-	`function`	A callback function upload for capture
onRemoveFile	false	-	`function`	A callback funtion to remove uploaded file
onUploadChange	false	-	`function`	A callback function if upload has changes
selectedFiles	false	-	`FileList`	The selected files state of the upload
labelSelectDocument	false	-	`string`	A label text on button for choosing file to upload
labelUpload	false	-	`string`	A label text on upload button for multi upload
labelCapture	false	-	`string`	A label text on capture button for multi upload

Time Picker Map