FileInputButton API
API reference docs for the React FileInputButton component. Learn about the props and other APIs of this exported module.
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | ExtFile | [] | Just like any other input component. The value of the input element, required for a controlled component. |
| onChange | func | Probably one of the most important methods (callbacks). Returns as first parameter an array of `ExtFile` objects. This callback is fired every time the array of ExtFile changes. On validation, on delete, on drop, on select from file dialog or when upload proces changes the status of files. Signature: (files: ExtFile[]) => void | |
| accept | string | A comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. The default implementation of accept checks the file's mime type or extension against this list. More information can be found here. | |
| maxFiles | number | The max number of files to be accepted. | |
| maxFileSize | number | The max file size allowed in bytes. | |
| validator | func | Callback fired when the delete icon is clicked. If set, the delete icon will be shown. Signature: (f: File) => ValidateFileResponse | |
| autoClean | boolean | If true, the component will automatically remove non valid files when user drops files or selects them from file dialog. This flag will only work if validation is active. | |
| uploadConfig | The configuration needed for uploading the files. If not set or or uploadConfig.url is undefined the upload button will not be visible and uploadOnDrop prop flag will not work. | ||
| fakeUpload | boolean | If set, the component will simulate the upload operation by randomly setting the upload status and message on each uploadable ExtFile . It will also set a fake progress. Will also ignore the uploadConfig prop and will show the upload button | |
| onUploadStart | func | Callback fired when the upload process starts. Signature: (uploadAbleFiles: ExtFile[]) => void
| |
| onUploadFinish | func | Callback fired when the upload process ends. Signature: (uploadedFiles: ExtFile[]) => void
| |
| color | string | "#646c7f" | The main color for background, hover and borders. |
| style | React.CSSProperties | The in-line style object. | |
| textColor | string | "transparent | The color of the text. |
| className | string | The classname to override the css styles in .css or .sass file instead of using in-line styles. | |
| label | string | The text label for the button. | |
| localization | "EN-en" | "ES-es" | "FR-fr" | "IT-it" | "PT-pt" | "RU-ru" | "ZH-cn" | "ZH-hk" | "EN-en" | The language in which text labels are shown. |
| disableRipple | boolean | If true, will not show a ripple effect everytime the user clicks the components for selecting files. | |
| actionButtons | If set, buttons will be added before or after of the component. This buttons triggresthe common opertions of the component such as clean, upload, abort and delete all. | ||
| disabled | boolean | false | If true, the component is disabled. |
| behaviour | "add" | "replace" | "add" | The behaviour when new files are selected or dropped |
| children | React.ReactNode | The content of the component. |
