File uploader hard code file examples (#5342)

uber · Jun 28, 2024 · bdd41d4 · bdd41d4
1 parent c5fb0db
commit bdd41d4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/documentation-site/examples/file-uploader-beta/item-preview.tsx b/documentation-site/examples/file-uploader-beta/item-preview.tsx
@@ -2,7 +2,13 @@ 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 [fileRows, setFileRows] = React.useState<Array<FileRow>>([
+    {
+      file: new File(["test file"], "file.txt"),
+      status: "processed",
+      errorMessage: null,
+    },
+  ]);
   return (
     <FileUploaderBeta
       fileRows={fileRows}

diff --git a/documentation-site/examples/file-uploader-beta/upload-restrictions.tsx b/documentation-site/examples/file-uploader-beta/upload-restrictions.tsx
@@ -2,7 +2,30 @@ 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>>([]);
+  // Upload files to test restrictions. For demo purposes,
+  // artificially create an array of file rows with errors.
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
+    {
+      file: new File(["test file 1"], "unaccepted-file-type.jpeg"),
+      status: "error",
+      errorMessage: "file type of img/jpeg is not accepted",
+    },
+    {
+      file: new File(["test file 2"], "file-too-small.png"),
+      status: "error",
+      errorMessage: "file size must be greater than 20 KB",
+    },
+    {
+      file: new File(["test file 3"], "file-too-big.png"),
+      status: "error",
+      errorMessage: "file size must be less than 100 KB",
+    },
+    {
+      file: new File(["test file 4"], "file-count-too-many.png"),
+      status: "error",
+      errorMessage: "cannot process more than ${props.maxFiles} file(s)",
+    },
+  ]);
 
   const processFileOnDrop = (
     file: File,