allow skipping upload if file is provided

src/components/CSVImporter/CSVImporter.stories.tsx

@@ -52,7 +52,18 @@ const Template: Story<typeof ImporterComponent> = (args: CSVImporterProps) => {
 
   return (
     <div>
-      {args.isModal && <button onClick={() => setIsOpen(true)}>Import</button>}
+      {args.isModal && (
+        <>
+          <button onClick={() => setIsOpen(true)}>Import</button>
+          <input
+            type="file"
+            onChange={(e) => {
+              args.file = e.target.files?.[0];
+              setIsOpen(true);
+            }}
+          />
+        </>
+      )}
       <ImporterComponent key={props.isModal?.toString()} {...props} />
     </div>
   );

src/importer/components/UploaderWrapper/UploaderWrapper.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
-import { UploaderWrapperProps } from "./types";
 import { useDropzone } from "react-dropzone";
-import { Box, Text } from "@chakra-ui/react";
 import { Button } from "@chakra-ui/button";
-import { PiArrowCounterClockwise, PiFile } from "react-icons/pi";
+import { Box, Text } from "@chakra-ui/react";
 import useThemeStore from "../../stores/theme";
+import { UploaderWrapperProps } from "./types";
+import { PiArrowCounterClockwise, PiFile } from "react-icons/pi";
 
 export default function UploaderWrapper({ onSuccess, setDataError, ...props }: UploaderWrapperProps) {
   const [loading, setLoading] = useState(false);
@@ -34,24 +34,19 @@ export default function UploaderWrapper({ onSuccess, setDataError, ...props }: U
   });
 
   return (
-    <Box
-      padding="15px"
-      border="1px solid var(--color-border)"
-      borderRadius="var(--border-radius-2)"
-    >
-      <Box 
-        {...getRootProps()} 
-        width="100%" 
+    <Box padding="15px" border="1px solid var(--color-border)" borderRadius="var(--border-radius-2)">
+      <Box
+        {...getRootProps()}
+        width="100%"
         height="100%"
-        display="flex" 
-        justifyContent="center" 
-        alignItems="center" 
-        flexDirection="column" 
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        flexDirection="column"
         flex={1}
         border="2px dashed var(--color-border)"
-        borderRadius="var(--border-radius-2)"
-      >
-        <input {...getInputProps()}/>
+        borderRadius="var(--border-radius-2)">
+        <input {...getInputProps()} />
         {isDragActive ? (
           <Text>Drop your file here</Text>
         ) : loading ? (
@@ -60,17 +55,20 @@ export default function UploaderWrapper({ onSuccess, setDataError, ...props }: U
           <>
             <Text>Drop your file here</Text>
             <Text>or</Text>
-            <Button 
-              leftIcon={<PiFile />} 
-              onClick={open} 
-              mt="6px" 
-              colorScheme={"secondary"} 
+            <Button
+              leftIcon={<PiFile />}
+              onClick={open}
+              mt="6px"
+              colorScheme={"secondary"}
               variant={theme === "light" ? "outline" : "solid"}
-              _hover={theme === "light" ? {
-                background: "var(--color-border)",
-                color: "var(--color-text)"
-              } : undefined}
-            >
+              _hover={
+                theme === "light"
+                  ? {
+                      background: "var(--color-border)",
+                      color: "var(--color-text)",
+                    }
+                  : undefined
+              }>
               Browse files
             </Button>
           </>

src/importer/features/main/index.tsx

@@ -28,6 +28,7 @@ export default function Main(props: CSVImporterProps) {
     customStyles,
     showDownloadTemplateButton,
     skipHeaderRowSelection,
+    file,
   } = props;
   const skipHeader = skipHeaderRowSelection ?? false;
 
@@ -80,6 +81,10 @@ export default function Main(props: CSVImporterProps) {
     }
   }, [data]);
 
+  useEffect(() => {
+    if (file) processFile(file);
+  }, [file]);
+
   // Actions
   const reload = () => {
     setData(emptyData);
@@ -107,6 +112,64 @@ export default function Main(props: CSVImporterProps) {
     );
   }
 
+  const processFile = async (file: File) => {
+    setDataError(null);
+    const fileType = file.name.slice(file.name.lastIndexOf(".") + 1);
+    if (!["csv", "xls", "xlsx"].includes(fileType)) {
+      setDataError("Only CSV, XLS, and XLSX files can be uploaded");
+      return;
+    }
+    const reader = new FileReader();
+    const isNotBlankRow = (row: string[]) => row.some((cell) => cell.toString().trim() !== "");
+    reader.onload = async (e) => {
+      const bstr = e?.target?.result;
+      if (!bstr) {
+        return;
+      }
+      switch (fileType) {
+        case "csv":
+          Papa.parse(bstr.toString(), {
+            complete: function (results) {
+              const csvData = results.data as Array<Array<string>>;
+              const rows: FileRow[] = csvData.filter(isNotBlankRow).map((row: string[], index: number) => ({ index, values: row }));
+              setData({
+                fileName: file.name,
+                rows: rows,
+                sheetList: [],
+                errors: results.errors.map((error) => error.message),
+              });
+              goNext();
+            },
+          });
+          break;
+        case "xlsx":
+        case "xls":
+          const workbook = XLSX.read(bstr as string, { type: "binary" });
+          const sheetList = workbook.SheetNames;
+          const data = XLSX.utils.sheet_to_json(workbook.Sheets[sheetList[0]], { header: 1 }) as Array<Array<string>>;
+          const rows: FileRow[] = data.filter(isNotBlankRow).map((row: string[], index: number) => ({ index, values: row }));
+          setData({
+            fileName: file.name,
+            rows: rows,
+            sheetList: sheetList,
+            errors: [], // TODO: Handle any parsing errors
+          });
+          goNext();
+          break;
+      }
+    };
+
+    switch (fileType) {
+      case "csv":
+        reader.readAsText(file, "utf-8");
+        break;
+      case "xlsx":
+      case "xls":
+        reader.readAsBinaryString(file);
+        break;
+    }
+  };
+
   const renderContent = () => {
     switch (currentStep) {
       case StepEnum.Upload:
@@ -116,63 +179,7 @@ export default function Main(props: CSVImporterProps) {
             skipHeaderRowSelection={skipHeader || false}
             showDownloadTemplateButton={showDownloadTemplateButton}
             setDataError={setDataError}
-            onSuccess={async (file: File) => {
-              setDataError(null);
-              const fileType = file.name.slice(file.name.lastIndexOf(".") + 1);
-              if (!["csv", "xls", "xlsx"].includes(fileType)) {
-                setDataError("Only CSV, XLS, and XLSX files can be uploaded");
-                return;
-              }
-              const reader = new FileReader();
-              const isNotBlankRow = (row: string[]) => row.some((cell) => cell.toString().trim() !== "");
-              reader.onload = async (e) => {
-                const bstr = e?.target?.result;
-                if (!bstr) {
-                  return;
-                }
-                switch (fileType) {
-                  case "csv":
-                    Papa.parse(bstr.toString(), {
-                      complete: function (results) {
-                        const csvData = results.data as Array<Array<string>>;
-                        const rows: FileRow[] = csvData.filter(isNotBlankRow).map((row: string[], index: number) => ({ index, values: row }));
-                        setData({
-                          fileName: file.name,
-                          rows: rows,
-                          sheetList: [],
-                          errors: results.errors.map((error) => error.message),
-                        });
-                        goNext();
-                      },
-                    });
-                    break;
-                  case "xlsx":
-                  case "xls":
-                    const workbook = XLSX.read(bstr as string, { type: "binary" });
-                    const sheetList = workbook.SheetNames;
-                    const data = XLSX.utils.sheet_to_json(workbook.Sheets[sheetList[0]], { header: 1 }) as Array<Array<string>>;
-                    const rows: FileRow[] = data.filter(isNotBlankRow).map((row: string[], index: number) => ({ index, values: row }));
-                    setData({
-                      fileName: file.name,
-                      rows: rows,
-                      sheetList: sheetList,
-                      errors: [], // TODO: Handle any parsing errors
-                    });
-                    goNext();
-                    break;
-                }
-              };
-
-              switch (fileType) {
-                case "csv":
-                  reader.readAsText(file, "utf-8");
-                  break;
-                case "xlsx":
-                case "xls":
-                  reader.readAsBinaryString(file);
-                  break;
-              }
-            }}
+            onSuccess={processFile}
           />
         );
       case StepEnum.RowSelection:

src/types/index.ts

@@ -17,4 +17,5 @@ export type CSVImporterProps = (HTMLAttributes<HTMLDialogElement> & HTMLAttribut
   customStyles?: Record<string, string> | string;
   showDownloadTemplateButton?: boolean;
   skipHeaderRowSelection?: boolean;
+  file?: File;
 } & ModalParams;