chakra-ui-file-picker's Introduction

Chakra UI File Picker

Since there is no default file picker for Chakra-UI, I've developed my own for usage in one of my personal projects.

Allows to:

Retrieve the files from a callback
Filter the files by file type/extension
Reset programmatically by using a ref
Provide styling to the Input and InputGroup

Usage

<FilePicker
    onFileChange={(fileList) => { // do stuff here }}
    placeholder="placeholder"
    clearButtonLabel="label"
    multipleFiles={true}
    accept="application/json"
    hideClearButton={false}
    ref={myRef}
/>

Prop name	Type	Optional	Description	Default
placeholder	string	No	Sets the placeholder on the input field	N/A
onFileChange	(fileList: Array<File>) => void	No	Is triggered every time that the file list changes	N/A
clearButtonLabel	string	Yes	Sets the label that will be shown on the clear button.	'Clear'
multipleFiles	boolean	Yes	Sets if the input can allow for one of many files at a time	False
accept	string	Yes	Allows to filter the files by type/extension.	undefined
hideClearButton	boolean	Yes	Hides or shows the clear button.	False
ref	React.RefObject	Yes	Provides a reference to the `FilePicker`	undefined

TODO

Maybe have a FormControl base with this component?

Contributions

Are of course accepted, but please try to follow this rules:

Write some description around your idea so I can follow your train of thought.
Please do write accompanying unit tests for the functionality (unless it's really impossible to do so). This will allow us to improve and deploy this component with more confidence that it does what it's supposed to. I chose to use React Testing Library, you can find additional info here on how to write tests in this fashion.

Recommend Projects