Add dynamic loading to file uploader documentation (#5357)

* Move file uploader basic stories to proper folder

* Update file uploader code

* Add file uploader stories

* Add dynamic loading to file uploader documentation

Author: epfeiffe

documentation-site/cheat-sheet.jsx

@@ -1479,17 +1479,19 @@ const outlines = [
         { name: "id", lineStart: 46 },
         { name: "fileInfo", lineStart: 49 },
         { name: "imagePreviewThumbnail", lineStart: 50 },
-        { name: "status", lineStart: 52 },
+        { name: "progressAmount", lineStart: 51 },
+        { name: "status", lineStart: 53 },
       ] },
-      { name: "FileUploaderProps", lineStart: 55, children: [
-        { name: "fileRows", lineStart: 59 },
-        { name: "hint", lineStart: 60 },
-        { name: "itemPreview", lineStart: 61 },
-        { name: "label", lineStart: 62 },
-        { name: "maxFiles", lineStart: 63 },
-        { name: "overrides", lineStart: 64 },
-        { name: "processFileOnDrop", lineStart: 66 },
-        { name: "setFileRows", lineStart: 67 },
+      { name: "FileUploaderProps", lineStart: 56, children: [
+        { name: "fileRows", lineStart: 60 },
+        { name: "hint", lineStart: 61 },
+        { name: "itemPreview", lineStart: 62 },
+        { name: "label", lineStart: 63 },
+        { name: "maxFiles", lineStart: 64 },
+        { name: "overrides", lineStart: 65 },
+        { name: "processFileOnDrop", lineStart: 67 },
+        { name: "progressAmountStartValue", lineStart: 72 },
+        { name: "setFileRows", lineStart: 73 },
       ] },
     ],
   },

documentation-site/components/yard/config/file-uploader.ts

@@ -135,6 +135,13 @@ const FileUploaderConfig: TConfig = {
       description: `Sets aria-describedby attribute.`,
       hidden: true,
     },
+    progressAmountStartValue: {
+      value: undefined,
+      type: PropTypes.Number,
+      description:
+        "Sets the progress amount the loading bar begins at. It is a number between 1 and 100. It is particularly useful for the 'Dynamic loading' example.",
+      hidden: true,
+    },
     overrides: {
       value: undefined,
       type: PropTypes.Custom,

documentation-site/examples/file-uploader/basic.tsx

@@ -4,10 +4,11 @@ import { FileUploader, type FileRow } from "baseui/file-uploader";
 export default function Example() {
   const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
     {
+      errorMessage: null,
       file: new File(["test file"], "file.txt"),
       id: "0",
+      progressAmount: 100,
       status: "processed",
-      errorMessage: null,
     },
   ]);
 

documentation-site/examples/file-uploader/dynamic-loading.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { FileUploader, type FileRow } from "baseui/file-uploader";
+
+export default function Example() {
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([]);
+
+  // Fake an upload process and mock the amount of time it takes each file to load
+  // For a real-world scenario, replace simulateFileProgressUpdates with application upload logic
+  const simulateFileProgressUpdates = (
+    fileToProcess: File,
+    fileToProcessId: string,
+    fileRows: FileRow[],
+    resolve: ({
+      errorMessage,
+      fileInfo,
+    }: {
+      errorMessage: string | null;
+      fileInfo?: any;
+    }) => void,
+  ) => {
+    const fileRowsCopy: FileRow[] = [...fileRows];
+    let indexOfFileToUpdate = fileRowsCopy.findIndex(
+      (fileRow: FileRow) => fileRow.id === fileToProcessId,
+    );
+    let numberOfMockedLoadingSteps = 5 - (indexOfFileToUpdate % 3);
+    let mockedTotalLoadingTime = indexOfFileToUpdate % 2 === 0 ? 10000 : 8000;
+    for (let i = 0; i <= numberOfMockedLoadingSteps; i++) {
+      if (i === numberOfMockedLoadingSteps) {
+        // Simulates an onSuccess event
+        setTimeout(() => {
+          resolve({ errorMessage: null });
+        }, mockedTotalLoadingTime);
+      } else {
+        // Simulates an onLoading event
+        setTimeout(
+          () => {
+            fileRowsCopy[indexOfFileToUpdate].progressAmount =
+              (i / numberOfMockedLoadingSteps) * 100;
+            setFileRows([...fileRowsCopy]);
+          },
+          (i / numberOfMockedLoadingSteps) * mockedTotalLoadingTime,
+        );
+      }
+    }
+  };
+
+  return (
+    <FileUploader
+      fileRows={fileRows}
+      hint={
+        "Try uploading multiple files at once to see the progress bar upload independently for each file"
+      }
+      processFileOnDrop={(fileToProcess, fileToProcessId, newFileRows) => {
+        return new Promise((resolve) => {
+          simulateFileProgressUpdates(
+            fileToProcess,
+            fileToProcessId,
+            newFileRows,
+            resolve,
+          );
+        });
+      }}
+      progressAmountStartValue={0}
+      setFileRows={setFileRows}
+    />
+  );
+}

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

@@ -4,10 +4,11 @@ import { FileUploader, type FileRow } from "baseui/file-uploader";
 export default function Example() {
   const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
     {
+      errorMessage: null,
       file: new File(["test file"], "file.txt"),
       id: "0",
+      progressAmount: 100,
       status: "processed",
-      errorMessage: null,
     },
   ]);
   return (

documentation-site/examples/file-uploader/overrides.tsx

@@ -5,16 +5,18 @@ import { useStyletron } from "baseui";
 export default function Example() {
   const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
     {
+      errorMessage: null,
       file: new File(["test file 1"], "file-1.txt"),
       id: "0",
+      progressAmount: 100,
       status: "processed",
-      errorMessage: null,
     },
     {
+      errorMessage: "Failed to upload",
       file: new File(["test file 2"], "file-2.txt"),
       id: "1",
+      progressAmount: 20,
       status: "error",
-      errorMessage: "Failed to upload",
     },
   ]);
   const [, theme] = useStyletron();

documentation-site/examples/file-uploader/upload-restrictions.tsx

@@ -6,28 +6,32 @@ export default function Example() {
   // artificially create an array of file rows with errors.
   const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
     {
+      errorMessage: "file type of img/jpeg is not accepted",
       file: new File(["test file 1"], "unaccepted-file-type.jpeg"),
       id: "0",
+      progressAmount: 20,
       status: "error",
-      errorMessage: "file type of img/jpeg is not accepted",
     },
     {
+      errorMessage: "file size must be greater than 20 KB",
       file: new File(["test file 2"], "file-too-small.png"),
       id: "1",
+      progressAmount: 20,
       status: "error",
-      errorMessage: "file size must be greater than 20 KB",
     },
     {
+      errorMessage: "file size must be less than 100 KB",
       file: new File(["test file 3"], "file-too-big.png"),
       id: "2",
+      progressAmount: 20,
       status: "error",
-      errorMessage: "file size must be less than 100 KB",
     },
     {
+      errorMessage: "cannot process more than 3 file(s)",
       file: new File(["test file 4"], "file-count-too-many.png"),
       id: "3",
+      progressAmount: 20,
       status: "error",
-      errorMessage: "cannot process more than 3 file(s)",
     },
   ]);
 

documentation-site/pages/components/file-uploader.mdx

@@ -6,6 +6,7 @@ import FileUploaderBasic from "examples/file-uploader/basic.tsx";
 import FileUploaderItemPreview from "examples/file-uploader/item-preview.tsx";
 import FileUploaderLabelHint from "examples/file-uploader/label-hint.tsx";
 import FileUploaderUploadRestrictions from "examples/file-uploader/upload-restrictions.tsx";
+import FileUploaderDynamicLoading from "examples/file-uploader/dynamic-loading.tsx";
 import FileUploaderOverrides from "examples/file-uploader/overrides.tsx";
 
 import * as FileUploaderExports from "baseui/file-uploader";
@@ -64,6 +65,10 @@ To learn more, read the corresponding [OWASP article on file uploads](https://ww
   <FileUploaderUploadRestrictions />
 </Example>
 
+<Example title="Dynamic loading" path="file-uploader/dynamic-loading.tsx">
+  <FileUploaderDynamicLoading />
+</Example>
+
 <Example title="Overrides" path="file-uploader/overrides.tsx">
   <FileUploaderOverrides />
 </Example>