From 95af0f97d713c33ce8e860d5b253aea93e3bb023 Mon Sep 17 00:00:00 2001
From: Emerson Pfeiffer <epfeiffe@umich.edu>
Date: Fri, 28 Jun 2024 12:58:52 -0700
Subject: [PATCH] File uploader beta label hint example (#5340)

---
 .../file-uploader-beta/item-preview.tsx       | 20 -------------------
 .../file-uploader-beta/label-hint.tsx         | 14 +++++++++++++
 .../pages/components/file-uploader-beta.mdx   |  5 +++++
 3 files changed, 19 insertions(+), 20 deletions(-)
 create mode 100644 documentation-site/examples/file-uploader-beta/label-hint.tsx

diff --git a/documentation-site/examples/file-uploader-beta/item-preview.tsx b/documentation-site/examples/file-uploader-beta/item-preview.tsx
index 7bdd3b1b97..1fa085db25 100644
--- a/documentation-site/examples/file-uploader-beta/item-preview.tsx
+++ b/documentation-site/examples/file-uploader-beta/item-preview.tsx
@@ -3,25 +3,6 @@ import { FileUploaderBeta, type FileRow } from "baseui/file-uploader-beta";
 
 export default function Example() {
   const [fileRows, setFileRows] = React.useState<Array<FileRow>>([]);
-
-  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}
@@ -29,7 +10,6 @@ export default function Example() {
         "Try uploading a file to see the item preview. Image files will show a thumbnail."
       }
       itemPreview
-      processFileOnDrop={processFileOnDrop}
       setFileRows={setFileRows}
     />
   );
diff --git a/documentation-site/examples/file-uploader-beta/label-hint.tsx b/documentation-site/examples/file-uploader-beta/label-hint.tsx
new file mode 100644
index 0000000000..fcf5b0ba92
--- /dev/null
+++ b/documentation-site/examples/file-uploader-beta/label-hint.tsx
@@ -0,0 +1,14 @@
+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>>([]);
+  return (
+    <FileUploaderBeta
+      fileRows={fileRows}
+      hint={"Test hint"}
+      label={"Test label"}
+      setFileRows={setFileRows}
+    />
+  );
+}
diff --git a/documentation-site/pages/components/file-uploader-beta.mdx b/documentation-site/pages/components/file-uploader-beta.mdx
index 7e98ce21a2..687f18a338 100644
--- a/documentation-site/pages/components/file-uploader-beta.mdx
+++ b/documentation-site/pages/components/file-uploader-beta.mdx
@@ -4,6 +4,7 @@ import Exports from "../../components/exports";
 
 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 * as FileUploaderBetaExports from "baseui/file-uploader-beta";
@@ -50,6 +51,10 @@ To learn more, read the corresponding [OWASP article on file uploads](https://ww
   <FileUploaderBetaItemPreview />
 </Example>
 
+<Example title="Label and hint" path="file-uploader-beta/label-hint.tsx">
+  <FileUploaderBetaLabelHint />
+</Example>
+
 <Example
   title="Upload restrictions"
   path="file-uploader-beta/upload-restrictions.tsx"