diff --git a/documentation-site/cheat-sheet.jsx b/documentation-site/cheat-sheet.jsx
index 540590ce3c..9851b650ee 100644
--- a/documentation-site/cheat-sheet.jsx
+++ b/documentation-site/cheat-sheet.jsx
@@ -1473,6 +1473,67 @@ const outlines = [
{ name: "DropFilesEventHandler", lineStart: 48, children: [] },
],
},
+ {
+ file: "src/file-uploader-beta/types.ts",
+ definitions: [
+ {
+ name: "StyleProps",
+ lineStart: 11,
+ children: [
+ { name: "$afterFileDrop", lineStart: 12 },
+ { name: "$alt", lineStart: 13 },
+ { name: "$color", lineStart: 14 },
+ { name: "$disabled", lineStart: 15 },
+ { name: "$isDragActive", lineStart: 16 },
+ { name: "$isDragAccept", lineStart: 17 },
+ { name: "$isDragReject", lineStart: 18 },
+ { name: "$isFocused", lineStart: 19 },
+ { name: "$src", lineStart: 20 },
+ ],
+ },
+ {
+ name: "FileUploaderBetaOverrides",
+ lineStart: 23,
+ children: [
+ { name: "AlertIcon", lineStart: 24 },
+ { name: "CircleCheckFilledIcon", lineStart: 25 },
+ { name: "FileRow", lineStart: 26 },
+ { name: "FileRowColumn", lineStart: 27 },
+ { name: "FileRowContent", lineStart: 28 },
+ { name: "FileRowFileName", lineStart: 29 },
+ { name: "FileRowText", lineStart: 30 },
+ { name: "FileRowUploadMessage", lineStart: 31 },
+ { name: "FileRowUploadText", lineStart: 32 },
+ { name: "FileRows", lineStart: 33 },
+ { name: "Hint", lineStart: 34 },
+ { name: "ImagePreviewThumbnail", lineStart: 35 },
+ { name: "ItemPreviewContainer", lineStart: 36 },
+ { name: "Label", lineStart: 37 },
+ { name: "PaperclipFilledIcon", lineStart: 38 },
+ { name: "ParentRoot", lineStart: 39 },
+ { name: "TrashCanFilledIcon", lineStart: 40 },
+ { name: "TrashCanFilledIconContainer", lineStart: 41 },
+ ],
+ },
+ { name: "FileRow", lineStart: 44, children: [
+ { name: "errorMessage", lineStart: 45 },
+ { name: "file", lineStart: 46 },
+ { name: "fileInfo", lineStart: 49 },
+ { name: "imagePreviewThumbnail", lineStart: 50 },
+ { name: "status", lineStart: 52 },
+ ] },
+ { name: "FileUploaderBetaProps", lineStart: 55, children: [
+ { name: "fileRows", lineStart: 59 },
+ { name: "hint", lineStart: 60 },
+ { name: "itemPreview", lineStart: 61 },
+ { name: "label", lineStart: 62 },
+ { name: "maxFiles", lineStart: 63 },
+ { name: "overrides", lineStart: 64 },
+ { name: "processFileOnDrop", lineStart: 66 },
+ { name: "setFileRows", lineStart: 67 },
+ ] },
+ ],
+ },
{
file: "src/flex-grid/types.ts",
definitions: [
diff --git a/documentation-site/components/gallery.jsx b/documentation-site/components/gallery.jsx
index 9689dec834..574c0bfc88 100644
--- a/documentation-site/components/gallery.jsx
+++ b/documentation-site/components/gallery.jsx
@@ -65,6 +65,10 @@ const COMPONENTS = {
href: "/components/file-uploader",
Component: thumbnails.SvgFileUploader,
},
+ {
+ href: "/components/file-uploader-beta",
+ Component: thumbnails.SvgFileUploaderBeta,
+ },
{
href: "/components/menu",
Component: thumbnails.SvgMenu,
diff --git a/documentation-site/components/thumbs/components/FileUploaderBeta.jsx b/documentation-site/components/thumbs/components/FileUploaderBeta.jsx
new file mode 100644
index 0000000000..d2db519356
--- /dev/null
+++ b/documentation-site/components/thumbs/components/FileUploaderBeta.jsx
@@ -0,0 +1,21 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* THIS FILE IS AUTO-GENERATED. DO NOT MODIFY. */
+
+import React from "react";
+
+export default function SvgFileUploaderBeta(props) {
+ return (
+
+ );
+}
diff --git a/documentation-site/components/thumbs/index.jsx b/documentation-site/components/thumbs/index.jsx
index 47241f78b1..db448b3d23 100644
--- a/documentation-site/components/thumbs/index.jsx
+++ b/documentation-site/components/thumbs/index.jsx
@@ -21,6 +21,7 @@ export { default as SvgTextarea } from "./components/Textarea.jsx";
// Pickers
export { default as SvgFileUploader } from "./components/FileUploader.jsx";
+export { default as SvgFileUploaderBeta } from "./components/FileUploader.jsx";
export { default as SvgMenu } from "./components/Menu.jsx";
export { default as SvgRating } from "./components/Rating.jsx";
export { default as SvgSelect } from "./components/Select.jsx";
diff --git a/documentation-site/components/yard/config/file-uploader-beta.ts b/documentation-site/components/yard/config/file-uploader-beta.ts
new file mode 100644
index 0000000000..f6804c887c
--- /dev/null
+++ b/documentation-site/components/yard/config/file-uploader-beta.ts
@@ -0,0 +1,133 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+import { FileUploaderBeta } from "baseui/file-uploader-beta";
+import { PropTypes } from "react-view";
+import type { TConfig } from "../types";
+import buttonConfig from "./button";
+
+const changeHandlers = [
+ "onClick",
+ "onFocus",
+ "onBlur",
+ "onKeyDown",
+ "onDragStart",
+ "onDragEnter",
+ "onDragOver",
+ "onDragLeave",
+ "onDrop",
+ "onDropAccepted",
+ "onDropRejected",
+ "onFileDialogCancel",
+ "onCancel",
+ "onRetry",
+];
+
+const FileUploaderBetaConfig: TConfig = {
+ componentName: "FileUploaderBeta",
+ imports: {
+ "baseui/file-uploader-beta": { named: ["FileUploaderBeta"] },
+ },
+ scope: {
+ FileUploaderBeta,
+ },
+ theme: [],
+ props: {
+ accept: {
+ value: "",
+ type: PropTypes.String,
+ description:
+ "Set accepted file types. See https://github.com/okonet/attr-accept for more information",
+ },
+ fileRows: {
+ value: "[]",
+ type: PropTypes.Array,
+ description: "Array of file objects.",
+ stateful: true,
+ },
+ setFileRows: {
+ value: "newFileRows => setFileRows(newFileRows)",
+ type: PropTypes.Function,
+ description: "Function to set file rows.",
+ },
+ maxSize: {
+ value: undefined,
+ type: PropTypes.Number,
+ description: "Maximum file size (in bytes).",
+ },
+ minSize: {
+ value: undefined,
+ type: PropTypes.Number,
+ description: "Minimum file size (in bytes).",
+ },
+ multiple: {
+ value: undefined,
+ type: PropTypes.Boolean,
+ description:
+ "Allow drag n drop (or selection from the file dialog) of multiple files",
+ },
+ disableClick: {
+ value: undefined,
+ type: PropTypes.Boolean,
+ description:
+ "Disallow clicking on the dropzone container to open file dialog.",
+ },
+ disabled: {
+ value: false,
+ type: PropTypes.Boolean,
+ description: "Renders component in disabled state.",
+ },
+ errorMessage: {
+ value: undefined,
+ type: PropTypes.String,
+ description: "Error message to be displayed.",
+ },
+ ...changeHandlers.reduce((acc, current) => {
+ //@ts-ignore
+ acc[current] = {
+ value: undefined,
+ type: PropTypes.Function,
+ description: `Called when the ${current} event is triggered.`,
+ hidden: true,
+ };
+ return acc;
+ }, {}),
+ name: {
+ value: undefined,
+ type: PropTypes.String,
+ description: "Name attribute.",
+ hidden: true,
+ },
+ ["aria-describedby"]: {
+ value: undefined,
+ type: PropTypes.String,
+ description: `Sets aria-describedby attribute.`,
+ hidden: true,
+ },
+ overrides: {
+ value: undefined,
+ type: PropTypes.Custom,
+ description: "Lets you customize all aspects of the component.",
+ custom: {
+ names: [
+ { ...buttonConfig, componentName: "ButtonComponent" },
+ { ...buttonConfig, componentName: "CancelButtonComponent" },
+ { ...buttonConfig, componentName: "RetryButtonComponent" },
+ "ContentMessage",
+ "ErrorMessage",
+ "FileDragAndDrop",
+ "HiddenInput",
+ "Spinner",
+ "ProgressBar",
+ ],
+ sharedProps: {},
+ },
+ },
+ },
+};
+
+export default FileUploaderBetaConfig;
diff --git a/documentation-site/pages/components/file-uploader-beta.mdx b/documentation-site/pages/components/file-uploader-beta.mdx
new file mode 100644
index 0000000000..abb1f73200
--- /dev/null
+++ b/documentation-site/pages/components/file-uploader-beta.mdx
@@ -0,0 +1,36 @@
+import Example from "../../components/example";
+import Layout from "../../components/layout";
+import Exports from "../../components/exports";
+
+import * as FileUploaderBetaExports from "baseui/file-uploader-beta";
+
+import Yard from "../../components/yard/index";
+import fileUploaderBetaYardConfig from "../../components/yard/config/file-uploader-beta";
+
+export default Layout;
+
+# File Uploader Beta
+
+
+
+Creates a dropzone for file uploads.
+
+## Accessibility
+
+- "Browse files" has `aria-controls="fileupload"` set.
+
+## When to use
+
+- Enable file(s) upload through drag and drop or the system _Browse files_ dialog.
+
+## Security considerations
+
+By default, the file uploader does not concern itself with validating and discarding potentially malicious files, as Base Web never runs any of the uploaded files. **It's the responsibility of the consuming application to do so.** To help with that, this component supports the `accept` property, which can limit the acceptable file extensions.
+
+To learn more, read the corresponding [OWASP article on file uploads](https://www.owasp.org/index.php/Unrestricted_File_Upload).
+
+
diff --git a/documentation-site/routes.jsx b/documentation-site/routes.jsx
index 0d9143d547..a17965090f 100644
--- a/documentation-site/routes.jsx
+++ b/documentation-site/routes.jsx
@@ -136,6 +136,10 @@ const routes = [
title: "File Uploader",
itemId: "/components/file-uploader",
},
+ {
+ title: "File Uploader Beta",
+ itemId: "/components/file-uploader-beta",
+ },
{
title: "Menu",
itemId: "/components/menu",