File uploader beta item preview example (#5339)

documentation-site/examples/file-uploader-beta/item-preview.tsx

@@ -0,0 +1,36 @@
+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: "success",
+        };
+        resolve({ errorMessage: null, fileInfo });
+      }, 2000);
+    });
+  };
+
+  return (
+    <FileUploaderBeta
+      fileRows={fileRows}
+      hint={
+        "Try uploading a file to see the item preview. Image files will show a thumbnail."
+      }
+      itemPreview
+      processFileOnDrop={processFileOnDrop}
+      setFileRows={setFileRows}
+    />
+  );
+}

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 FileUploaderBetaItemPreview from "examples/file-uploader-beta/item-preview.tsx";
 import FileUploaderBetaUploadRestrictions from "examples/file-uploader-beta/upload-restrictions.tsx";
 
 import * as FileUploaderBetaExports from "baseui/file-uploader-beta";
@@ -45,6 +46,10 @@ To learn more, read the corresponding [OWASP article on file uploads](https://ww
   <FileUploaderBetaBasic />
 </Example>
 
+<Example title="Item preview" path="file-uploader-beta/item-preview.tsx">
+  <FileUploaderBetaItemPreview />
+</Example>
+
 <Example
   title="Upload restrictions"
   path="file-uploader-beta/upload-restrictions.tsx"