From f9b49b679b4a8f5a414276c10709dd71c1850568 Mon Sep 17 00:00:00 2001
From: Emerson Pfeiffer <epfeiffe@umich.edu>
Date: Fri, 28 Jun 2024 12:45:10 -0700
Subject: [PATCH] File uploader beta upload restrictions example (#5338)

---
 .../examples/file-uploader-beta/basic.tsx     |  2 -
 .../upload-restrictions.tsx                   | 39 +++++++++++++++++++
 .../pages/components/file-uploader-beta.mdx   |  8 ++++
 3 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 documentation-site/examples/file-uploader-beta/upload-restrictions.tsx

diff --git a/documentation-site/examples/file-uploader-beta/basic.tsx b/documentation-site/examples/file-uploader-beta/basic.tsx
index 46987a3dc5..4cfebdf28b 100644
--- a/documentation-site/examples/file-uploader-beta/basic.tsx
+++ b/documentation-site/examples/file-uploader-beta/basic.tsx
@@ -31,8 +31,6 @@ export default function Example() {
   return (
     <FileUploaderBeta
       fileRows={fileRows}
-      itemPreview
-      maxFiles={5}
       processFileOnDrop={processFileOnDrop}
       setFileRows={setFileRows}
     />
diff --git a/documentation-site/examples/file-uploader-beta/upload-restrictions.tsx b/documentation-site/examples/file-uploader-beta/upload-restrictions.tsx
new file mode 100644
index 0000000000..77652a7858
--- /dev/null
+++ b/documentation-site/examples/file-uploader-beta/upload-restrictions.tsx
@@ -0,0 +1,39 @@
+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>>([]);
+
+  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: "error",
+        };
+        resolve({ errorMessage: "Custom user error", fileInfo });
+      }, 2000);
+    });
+  };
+
+  return (
+    <FileUploaderBeta
+      accept={["image/png", "application/pdf"]}
+      fileRows={fileRows}
+      hint={
+        'Try uploading files that break these conditions: 1. accept set to ["image/png", "application/pdf"], 2. minSize set to 20000 bytes (20 KB), 3. maxSize set to 100000 bytes (100 KB), 4. maxFiles set to 3'
+      }
+      maxFiles={3}
+      maxSize={100000}
+      minSize={20000}
+      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 15e520f7f7..c69a9ae76e 100644
--- a/documentation-site/pages/components/file-uploader-beta.mdx
+++ b/documentation-site/pages/components/file-uploader-beta.mdx
@@ -3,6 +3,7 @@ import Layout from "../../components/layout";
 import Exports from "../../components/exports";
 
 import FileUploaderBetaBasic from "examples/file-uploader-beta/basic.tsx";
+import FileUploaderBetaUploadRestrictions from "examples/file-uploader-beta/upload-restrictions.tsx";
 
 import * as FileUploaderBetaExports from "baseui/file-uploader-beta";
 
@@ -44,6 +45,13 @@ To learn more, read the corresponding [OWASP article on file uploads](https://ww
   <FileUploaderBetaBasic />
 </Example>
 
+<Example
+  title="Upload restrictions"
+  path="file-uploader-beta/upload-restrictions.tsx"
+>
+  <FileUploaderBetaUploadRestrictions />
+</Example>
+
 <Exports
   component={FileUploaderBetaExports}
   title="File uploader beta exports"