diff --git a/documentation-site/examples/file-uploader-beta/overrides.tsx b/documentation-site/examples/file-uploader-beta/overrides.tsx new file mode 100644 index 0000000000..7f1b6466c4 --- /dev/null +++ b/documentation-site/examples/file-uploader-beta/overrides.tsx @@ -0,0 +1,58 @@ +import * as React from "react"; +import { FileUploaderBeta, type FileRow } from "baseui/file-uploader-beta"; +import { useStyletron } from "baseui"; + +export default function Example() { + const [fileRows, setFileRows] = React.useState>([ + { + file: new File(["test file 1"], "file-1.txt"), + status: "processed", + errorMessage: null, + }, + { + file: new File(["test file 2"], "file-2.txt"), + status: "error", + errorMessage: "Failed to upload", + }, + ]); + const [, theme] = useStyletron(); + return ( + + ); +} diff --git a/documentation-site/pages/components/file-uploader-beta.mdx b/documentation-site/pages/components/file-uploader-beta.mdx index 687f18a338..31f7d58f12 100644 --- a/documentation-site/pages/components/file-uploader-beta.mdx +++ b/documentation-site/pages/components/file-uploader-beta.mdx @@ -6,6 +6,7 @@ import FileUploaderBetaBasic from "examples/file-uploader-beta/basic.tsx"; import FileUploaderBetaItemPreview from "examples/file-uploader-beta/item-preview.tsx"; import FileUploaderBetaLabelHint from "examples/file-uploader-beta/label-hint.tsx"; import FileUploaderBetaUploadRestrictions from "examples/file-uploader-beta/upload-restrictions.tsx"; +import FileUploaderBetaOverrides from "examples/file-uploader-beta/overrides.tsx"; import * as FileUploaderBetaExports from "baseui/file-uploader-beta"; @@ -34,6 +35,7 @@ Creates a dropzone for file uploads with file row state binding, props to contro - Enable file(s) upload through drag and drop or the system _Browse files_ dialog. - Leverage `accept`, `maxFiles`, `maxSize`, and `minSize` for built in error handling. - Leverage `processFileOnDrop` for custom error handling and upload capabilities. Should take a `file: File` and input and return `Promise<{ errorMessage: string | null; fileInfo?: any }>` where `errorMessage` determines if an error is shown. +- Component will be `disabled` while files are uploading. This prevents invalid state while React re-renders via `useState` hook. ## Security considerations @@ -62,6 +64,10 @@ To learn more, read the corresponding [OWASP article on file uploads](https://ww + + + +