This component allows users to upload files they've selected from the native file browser interface or dragged-and-dropped. The component automatically uploads the files to your web application.

You can customize the message in the file drop zone to suit your needs. We recommend passing a header to the component to indicate the expected action, such as "Drop files here". Communicate any requirements, such as maximum file size and type restrictions as validation text within the component.

Inform users when a file cannot be uploaded successfully. Error messages should provide feedback to guide the user resolve the issue.

When uploaded files fail to meet the validation criteria, change the state prop to "error" so the file drop zone will display the error state.

Inform users when files successfully upload. Success messages should reassure users that the action has been completed.

When files upload successfully, change the state prop to "success" so the file drop zone will display the success state.

You can disable the file drop zone component by passing the disabled prop, with no resultant action when users drop a file onto the component.