From 9f7f6b694f300cce6952ecf83d50522084a42a73 Mon Sep 17 00:00:00 2001
From: Emerson Pfeiffer <epfeiffe@umich.edu>
Date: Fri, 28 Jun 2024 11:41:40 -0700
Subject: [PATCH] Add FileUploaderBeta Basic Example (#5337)

---
 .../examples/file-uploader-beta/basic.tsx     | 40 +++++++++++++++++++
 .../pages/components/file-uploader-beta.mdx   |  8 ++++
 2 files changed, 48 insertions(+)
 create mode 100644 documentation-site/examples/file-uploader-beta/basic.tsx

diff --git a/documentation-site/examples/file-uploader-beta/basic.tsx b/documentation-site/examples/file-uploader-beta/basic.tsx
new file mode 100644
index 0000000000..46987a3dc5
--- /dev/null
+++ b/documentation-site/examples/file-uploader-beta/basic.tsx
@@ -0,0 +1,40 @@
+import * as React from "react";
+import { FileUploaderBeta, type FileRow } from "baseui/file-uploader-beta";
+
+export default function Example() {
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
+    {
+      file: new File(["test file"], "file.txt"),
+      status: "processed",
+      errorMessage: null,
+    },
+  ]);
+
+  const processFileOnDrop = (
+    file: File,
+  ): Promise<{ errorMessage: string | null; fileInfo?: any }> => {
+    return new Promise((resolve) => {
+      // Fake an upload process for 2 seconds
+      // For a real-world scenario, replace this with application upload logic
+      setTimeout(() => {
+        let fileInfo = {
+          file,
+          objectID: "1234",
+          uploadID: "1234",
+          uploadStatus: "success",
+        };
+        resolve({ errorMessage: null, fileInfo });
+      }, 2000);
+    });
+  };
+
+  return (
+    <FileUploaderBeta
+      fileRows={fileRows}
+      itemPreview
+      maxFiles={5}
+      processFileOnDrop={processFileOnDrop}
+      setFileRows={setFileRows}
+    />
+  );
+}
diff --git a/documentation-site/pages/components/file-uploader-beta.mdx b/documentation-site/pages/components/file-uploader-beta.mdx
index 93cd769542..15e520f7f7 100644
--- a/documentation-site/pages/components/file-uploader-beta.mdx
+++ b/documentation-site/pages/components/file-uploader-beta.mdx
@@ -2,6 +2,8 @@ import Example from "../../components/example";
 import Layout from "../../components/layout";
 import Exports from "../../components/exports";
 
+import FileUploaderBetaBasic from "examples/file-uploader-beta/basic.tsx";
+
 import * as FileUploaderBetaExports from "baseui/file-uploader-beta";
 
 import Yard from "../../components/yard/index";
@@ -36,6 +38,12 @@ By default, the file uploader does not concern itself with validating and discar
 
 To learn more, read the corresponding [OWASP article on file uploads](https://www.owasp.org/index.php/Unrestricted_File_Upload).
 
+## Examples
+
+<Example title="Basic usage" path="file-uploader-beta/basic.tsx">
+  <FileUploaderBetaBasic />
+</Example>
+
 <Exports
   component={FileUploaderBetaExports}
   title="File uploader beta exports"