@teselagen/ui 0.6.6 → 0.7.1

package/src/FormComponents/Uploader.js

@@ -1,4 +1,10 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import {
   Button,
   Callout,
@@ -16,8 +22,6 @@ import classnames from "classnames";
 import { nanoid } from "nanoid";
 import papaparse, { unparse } from "papaparse";
 import downloadjs from "downloadjs";
-import { configure, makeObservable, observable } from "mobx";
-import { observer } from "mobx-react";
 import UploadCsvWizardDialog, {
   SimpleInsertDataDialog
 } from "../UploadCsvWizard";
@@ -30,7 +34,7 @@ import {
   removeExt
 } from "@teselagen/file-utils";
 import tryToMatchSchemas from "./tryToMatchSchemas";
-import { forEach, isArray, isFunction, isPlainObject, noop } from "lodash-es";
+import { isArray, isFunction, isPlainObject, noop } from "lodash-es";
 import { flatMap } from "lodash-es";
 import urljoin from "url-join";
 import popoverOverflowModifiers from "../utils/popoverOverflowModifiers";
@@ -38,14 +42,17 @@ import writeXlsxFile from "write-excel-file";
 import { startCase } from "lodash-es";
 import { getNewName } from "./getNewName";
 import { isObject } from "lodash-es";
-import { connect } from "react-redux";
-import { initialize } from "redux-form";
+import { change, touch, initialize } from "redux-form";
 import classNames from "classnames";
-import { compose } from "recompose";
 import convertSchema from "../DataTable/utils/convertSchema";
 import { LoadingDots } from "./LoadingDots";
+import { useDispatch } from "react-redux";
+import { flushSync } from "react-dom";
+import { useStableReference } from "../utils/hooks/useStableReference";
+
+const manualEnterMessage = "Build CSV File";
+const manualEnterSubMessage = "Paste or type data to build a CSV file";
 
-configure({ isolateGlobalState: true });
 const helperText = [
   `How to Use This Template to Upload New Data`,
   `1. Go to the first tab and delete the example data.`,
@@ -64,99 +71,298 @@ const helperSchema = [
   }
 ];
 
-class ValidateAgainstSchema {
-  fields = [];
-
-  constructor() {
-    makeObservable(this, {
-      fields: observable.shallow
-    });
+const setValidateAgainstSchema = newValidateAgainstSchema => {
+  if (!newValidateAgainstSchema) return;
+  const schema = convertSchema(newValidateAgainstSchema);
+  if (
+    schema.fields.some(f => {
+      if (f.path === "id") {
+        return true;
+      }
+      return false;
+    })
+  ) {
+    throw new Error(
+      `Uploader was passed a validateAgainstSchema with a fields array that contains a field with a path of "id". This is not allowed.`
+    );
   }
+  return schema;
+};
 
-  setValidateAgainstSchema(newValidateAgainstSchema) {
-    if (!newValidateAgainstSchema) {
-      this.fields = [];
-      return;
-    }
-    const schema = convertSchema(newValidateAgainstSchema);
-    if (
-      schema.fields.some(f => {
-        if (f.path === "id") {
-          return true;
-        }
-        return false;
-      })
-    ) {
-      throw new Error(
-        `Uploader was passed a validateAgainstSchema with a fields array that contains a field with a path of "id". This is not allowed.`
-      );
+const getFileDownloadAttr = exampleFile => {
+  const baseUrl = window?.frontEndConfig?.serverBasePath || "";
+  return isFunction(exampleFile)
+    ? { onClick: exampleFile }
+    : exampleFile && {
+        target: "_blank",
+        download: true,
+        href:
+          exampleFile.startsWith("https") || exampleFile.startsWith("www")
+            ? exampleFile
+            : baseUrl
+              ? urljoin(baseUrl, "exampleFiles", exampleFile)
+              : exampleFile
+      };
+};
+
+const stripId = (ents = []) =>
+  ents.map(ent => {
+    const { id, ...rest } = ent;
+    return rest;
+  });
+
+const getNewCsvFile = (ents, fileName) => {
+  const strippedEnts = stripId(ents);
+  return {
+    newFile: new File([papaparse.unparse(strippedEnts)], fileName),
+    cleanedEntities: strippedEnts
+  };
+};
+
+const trimFiles = (incomingFiles, fileLimit) => {
+  if (fileLimit) {
+    if (incomingFiles.length > fileLimit) {
+      window.toastr &&
+        window.toastr.warning(
+          `Detected additional files in your upload that we are ignoring. You can only upload ${fileLimit} file${
+            fileLimit > 1 ? "s" : ""
+          } at a time.`
+        );
     }
-    forEach(schema, (v, k) => {
-      this[k] = v;
-    });
+    return incomingFiles.slice(0, fileLimit);
   }
-}
-
-// autorun(() => {
-//   console.log(
-//     `validateAgainstSchemaStore?.fields:`,
-//     JSON.stringify(validateAgainstSchemaStore?.fields, null, 4)
-//   );
-// });
-// validateAgainstSchemaStore.fields = ["hahah"];
-// validateAgainstSchemaStore.fields.push("yaa");
+  return incomingFiles;
+};
 
-// const validateAgainstSchema = observable.shallow({
-//   fields: []
-// })
+const InnerDropZone = ({
+  getRootProps,
+  getInputProps,
+  isDragAccept,
+  isDragReject,
+  isDragActive,
+  className,
+  minimal,
+  dropzoneDisabled,
+  contentOverride,
+  simpleAccept,
+  innerIcon,
+  innerText,
+  validateAgainstSchema,
+  handleManuallyEnterData,
+  noBuildCsvOption,
+  showFilesCount,
+  fileList
+  // isDragActive
+  // isDragReject
+  // isDragAccept
+}) => (
+  <section>
+    <div
+      {...getRootProps()}
+      className={classnames("tg-dropzone", className, {
+        "tg-dropzone-minimal": minimal,
+        "tg-dropzone-active": isDragActive,
+        "tg-dropzone-reject": isDragReject, // tnr: the acceptClassName/rejectClassName doesn't work with file extensions (only mimetypes are supported when dragging). Thus we'll just always turn the drop area blue when dragging and let the filtering occur on drop. See https://github.com/react-dropzone/react-dropzone/issues/888#issuecomment-773938074
+        "tg-dropzone-accept": isDragAccept,
+        "tg-dropzone-disabled": dropzoneDisabled,
+        "bp3-disabled": dropzoneDisabled
+      })}
+    >
+      <input {...getInputProps()} />
+      {contentOverride || (
+        <div
+          title={
+            simpleAccept
+              ? "Accepts only the following file types: " + simpleAccept
+              : "Accepts any file input"
+          }
+          className="tg-upload-inner"
+        >
+          {innerIcon || <Icon icon="upload" iconSize={minimal ? 15 : 30} />}
+          {innerText || (minimal ? "Upload" : "Click or drag to upload")}
+          {validateAgainstSchema && !noBuildCsvOption && (
+            <div
+              style={{
+                textAlign: "center",
+                // fontSize: 18,
+                marginTop: 7,
+                marginBottom: 5
+              }}
+              onClick={handleManuallyEnterData}
+              className="link-button"
+            >
+              ...or {manualEnterMessage}
+              {/* <div
+                style={{
+                  fontSize: 11,
+                  color: Colors.GRAY3,
+                  fontStyle: "italic"
+                }}
+              >
+                {manualEnterSubMessage}
+              </div> */}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
 
-// validateAgainstSchema.fields = ["hahah"];
+    {showFilesCount ? (
+      <div className="tg-upload-file-list-counter">
+        Files: {fileList ? fileList.length : 0}
+      </div>
+    ) : null}
+  </section>
+);
 
-// wink wink
-const emptyPromise = Promise.resolve.bind(Promise);
+const onFileSuccessDefault = async () => {
+  return;
+};
 
-function UploaderInner({
+const Uploader = ({
   accept: __accept,
-  contentOverride: maybeContentOverride,
-  innerIcon,
-  innerText,
   action,
-  className = "",
-  minimal,
-  validateAgainstSchema: _validateAgainstSchema,
+  autoUnzip,
+  beforeUpload,
   callout: _callout,
+  className = "",
+  contentOverride: maybeContentOverride,
+  disabled,
+  dropzoneProps = {},
   fileLimit,
-  readBeforeUpload, //read the file using the browser's FileReader before passing it to onChange and/or uploading it
-  showUploadList = true,
-  beforeUpload,
   fileList, //list of files with options: {name, loading, error, url, originalName, downloadName}
-  onFileSuccess = emptyPromise, //called each time a file is finished and before the file.loading gets set to false, needs to return a promise!
+  innerIcon,
+  innerText,
+  meta: { form: formName } = {},
+  minimal,
+  name,
+  noBuildCsvOption,
+  noRedux = true,
+  onChange: _onChange = noop, //this is almost always getting passed by redux-form, no need to pass this handler manually
   onFieldSubmit = noop, //called when all files have successfully uploaded
-  // fileFinished = noop,
-  onRemove = noop, //called when a file has been selected to be removed
-  onChange = noop, //this is almost always getting passed by redux-form, no need to pass this handler manually
   onFileClick, // called when a file link in the filelist is clicked
-  dropzoneProps = {},
+  onFileSuccess = onFileSuccessDefault, //called each time a file is finished and before the file.loading gets set to false, needs to return a promise!
+  onPreviewClick,
+  onRemove = noop, //called when a file has been selected to be removed
   overflowList,
-  autoUnzip,
-  disabled: _disabled,
-  noBuildCsvOption,
-  initializeForm,
+  readBeforeUpload, //read the file using the browser's FileReader before passing it to onChange and/or uploading it
   showFilesCount,
+  showUploadList = true,
   threeDotMenuItems,
-  onPreviewClick
-}) {
-  let dropzoneDisabled = _disabled;
-  let _accept = __accept;
-  const validateAgainstSchemaStore = useRef(new ValidateAgainstSchema());
+  validateAgainstSchema: _validateAgainstSchema
+}) => {
+  const dispatch = useDispatch();
   const [acceptLoading, setAcceptLoading] = useState();
   const [resolvedAccept, setResolvedAccept] = useState();
-  if (resolvedAccept) {
-    _accept = resolvedAccept;
-  }
-  const isAcceptPromise =
-    __accept?.then ||
-    (Array.isArray(__accept) ? __accept.some(a => a?.then) : false);
+  const [loading, setLoading] = useState(false);
+  const filesToClean = useRef([]);
+
+  // We do this because we don't want functions influencing on the dependencies
+  const stableOnChange = useStableReference(_onChange);
+  const stableBeforeUpload = useStableReference(beforeUpload);
+  // onChange received from redux-form is not working anymore,
+  // so we need to overwrite it for redux to works.
+  const onChange = useCallback(
+    val => {
+      flushSync(() => {
+        if (noRedux) {
+          return stableOnChange.current(val);
+        }
+        dispatch(touch(formName, name));
+        dispatch(change(formName, name, val));
+      });
+    },
+    [dispatch, formName, name, noRedux, stableOnChange]
+  );
+
+  const handleSecondHalfOfUpload = useCallback(
+    async ({ acceptedFiles, cleanedFileList }) => {
+      // This onChange is not changing things, we need to check whether the error is here or later
+      onChange(cleanedFileList); //tnw: this line is necessary, if you want to clear the file list in the beforeUpload, call onChange([])
+      // beforeUpload is called, otherwise beforeUpload will not be able to truly cancel the upload
+      const keepGoing = stableBeforeUpload.current
+        ? await stableBeforeUpload.current(cleanedFileList, onChange)
+        : true;
+      if (!keepGoing) return;
+
+      if (action) {
+        const responses = [];
+        await Promise.all(
+          acceptedFiles.map(async fileToUpload => {
+            const data = new FormData();
+            data.append("file", fileToUpload);
+            try {
+              const res = await (window.serverApi
+                ? window.serverApi.post(action, data)
+                : fetch(action, {
+                    method: "POST",
+                    body: data
+                  }));
+              responses.push(res.data && res.data[0]);
+              onFileSuccess(res.data[0]).then(() => {
+                cleanedFileList = cleanedFileList.map(file => {
+                  const fileToReturn = {
+                    ...file,
+                    ...res.data[0]
+                  };
+                  if (fileToReturn.id === fileToUpload.id) {
+                    fileToReturn.loading = false;
+                  }
+                  return fileToReturn;
+                });
+                onChange(cleanedFileList);
+              });
+            } catch (err) {
+              console.error("Error uploading file:", err);
+              responses.push({
+                ...fileToUpload,
+                error: err && err.msg ? err.msg : err
+              });
+              cleanedFileList = cleanedFileList.map(file => {
+                const fileToReturn = { ...file };
+                if (fileToReturn.id === fileToUpload.id) {
+                  fileToReturn.loading = false;
+                  fileToReturn.error = true;
+                }
+                return fileToReturn;
+              });
+              onChange(cleanedFileList);
+            }
+          })
+        );
+        onFieldSubmit(responses);
+      } else {
+        onChange(
+          cleanedFileList.map(function (file) {
+            return {
+              ...file,
+              loading: false
+            };
+          })
+        );
+      }
+      setLoading(false);
+    },
+    [action, stableBeforeUpload, onChange, onFieldSubmit, onFileSuccess]
+  );
+
+  const isAcceptPromise = useMemo(
+    () =>
+      __accept?.then ||
+      (Array.isArray(__accept) ? __accept.some(acc => acc?.then) : false),
+    [__accept]
+  );
+
+  const _accept = useMemo(() => {
+    if (resolvedAccept) {
+      return resolvedAccept;
+    }
+    if (isAcceptPromise && !resolvedAccept) {
+      return [];
+    }
+    return __accept;
+  }, [__accept, isAcceptPromise, resolvedAccept]);
+
   useEffect(() => {
     if (isAcceptPromise) {
       setAcceptLoading(true);
@@ -169,35 +375,34 @@ function UploaderInner({
       );
     }
   }, [__accept, isAcceptPromise]);
-  if (isAcceptPromise && !resolvedAccept) {
-    _accept = [];
-  }
+
+  let dropzoneDisabled = disabled;
   if (acceptLoading) dropzoneDisabled = true;
-  const accept = !_accept
-    ? undefined
-    : isAcceptPromise && !resolvedAccept
-      ? []
-      : isPlainObject(_accept)
-        ? [_accept]
-        : isArray(_accept)
-          ? _accept
-          : _accept.split(",").map(a => ({ type: a }));
-  const callout = _callout || accept?.find?.(a => a?.callout)?.callout;
 
-  const validateAgainstSchemaToUse =
-    _validateAgainstSchema ||
-    accept?.find?.(a => a?.validateAgainstSchema)?.validateAgainstSchema;
+  const accept = useMemo(
+    () =>
+      !_accept
+        ? undefined
+        : isAcceptPromise && !resolvedAccept
+          ? []
+          : isPlainObject(_accept)
+            ? [_accept]
+            : isArray(_accept)
+              ? _accept
+              : _accept.split(",").map(acc => ({ type: acc })),
+    [_accept, isAcceptPromise, resolvedAccept]
+  );
 
-  useEffect(() => {
-    // validateAgainstSchema
-    validateAgainstSchemaStore.current.setValidateAgainstSchema(
-      validateAgainstSchemaToUse
-    );
-  }, [validateAgainstSchemaToUse]);
-  let validateAgainstSchema;
-  if (validateAgainstSchemaToUse) {
-    validateAgainstSchema = validateAgainstSchemaStore.current;
-  }
+  const callout = _callout || accept?.find?.(a => a?.callout)?.callout;
+
+  const validateAgainstSchema = useMemo(
+    () =>
+      setValidateAgainstSchema(
+        _validateAgainstSchema ||
+          accept?.find?.(a => a?.validateAgainstSchema)?.validateAgainstSchema
+      ),
+    [_validateAgainstSchema, accept]
+  );
 
   if (
     (validateAgainstSchema || autoUnzip) &&
@@ -209,13 +414,12 @@ function UploaderInner({
       description: "Any of the following types, just compressed"
     });
   }
-  const [loading, setLoading] = useState(false);
-  const filesToClean = useRef([]);
 
-  const { showDialogPromise: showUploadCsvWizardDialog, comp } = useDialog({
+  const { showDialogPromise: showUploadCsvWizardDialog, Comp } = useDialog({
     ModalComponent: UploadCsvWizardDialog
   });
-  const { showDialogPromise: showSimpleInsertDataDialog, comp: comp2 } =
+
+  const { showDialogPromise: showSimpleInsertDataDialog, Comp: Comp2 } =
     useDialog({
       ModalComponent: SimpleInsertDataDialog
     });
@@ -238,13 +442,13 @@ function UploaderInner({
   let advancedAccept;
 
   if (Array.isArray(accept)) {
-    if (accept.some(a => isPlainObject(a))) {
+    if (accept.some(acc => isPlainObject(acc))) {
       //advanced accept
       advancedAccept = accept;
-      simpleAccept = flatMap(accept, a => {
-        if (a.validateAgainstSchema) {
-          if (!a.type) {
-            a.type = [".csv", ".xlsx"];
+      simpleAccept = flatMap(accept, acc => {
+        if (acc.validateAgainstSchema) {
+          if (!acc.type) {
+            acc.type = [".csv", ".xlsx"];
           }
           handleManuallyEnterData = async e => {
             e.stopPropagation();
@@ -254,41 +458,38 @@ function UploaderInner({
                 validateAgainstSchema
               }
             );
-            if (!newEntities) {
-              return;
-            } else {
-              //check existing files to make sure the new file name gets incremented if necessary
-              // fileList
-              const newFileName = getNewName(fileListToUse, fileName);
-              const { newFile, cleanedEntities } = getNewCsvFile(
-                newEntities,
-                newFileName
-              );
+            if (!newEntities) return;
+            //check existing files to make sure the new file name gets incremented if necessary
+            // fileList
+            const newFileName = getNewName(fileListToUse, fileName);
+            const { newFile, cleanedEntities } = getNewCsvFile(
+              newEntities,
+              newFileName
+            );
 
-              const file = {
-                ...newFile,
-                parsedData: cleanedEntities,
-                meta: {
-                  fields: validateAgainstSchema.fields.map(({ path }) => path)
-                },
-                name: newFileName,
-                originFileObj: newFile,
-                originalFileObj: newFile,
-                id: nanoid(),
-                hasEditClick: true
-              };
+            const file = {
+              ...newFile,
+              parsedData: cleanedEntities,
+              meta: {
+                fields: validateAgainstSchema.fields.map(({ path }) => path)
+              },
+              name: newFileName,
+              originFileObj: newFile,
+              originalFileObj: newFile,
+              id: nanoid(),
+              hasEditClick: true
+            };
 
-              const cleanedFileList = [file, ...fileListToUse].slice(
-                0,
-                fileLimit ? fileLimit : undefined
-              );
-              handleSecondHalfOfUpload({
-                acceptedFiles: cleanedFileList,
-                cleanedFileList
-              });
+            const cleanedFileList = [file, ...fileListToUse].slice(
+              0,
+              fileLimit ? fileLimit : undefined
+            );
+            handleSecondHalfOfUpload({
+              acceptedFiles: cleanedFileList,
+              cleanedFileList
+            });
 
-              window.toastr.success(`File Added`);
-            }
+            window.toastr.success(`File Added`);
           };
 
           const nameToUse =
@@ -338,7 +539,7 @@ function UploaderInner({
                 }
               };
             });
-            const b = await writeXlsxFile(
+            const blobFile = await writeXlsxFile(
               [[mainExampleData], fieldsToUse, helperText],
               {
                 headerStyle: {
@@ -349,18 +550,18 @@ function UploaderInner({
                 filePath: "file.xlsx"
               }
             );
-            downloadjs(b, `${nameToUse}.xlsx`, "xlsx");
+            downloadjs(blobFile, `${nameToUse}.xlsx`, "xlsx");
           };
           // handleDownloadXlsxFile()
-          a.exampleFiles = [
+          acc.exampleFiles = [
             // ...(a.exampleFile ? [a.exampleFile] : []),
             {
               description: "Download Example CSV File",
               exampleFile: () => {
                 const rows = [];
                 const schemaToUse = [
-                  ...a.validateAgainstSchema.fields,
-                  ...(a.validateAgainstSchema.exampleDownloadFields ?? [])
+                  ...acc.validateAgainstSchema.fields,
+                  ...(acc.validateAgainstSchema.exampleDownloadFields ?? [])
                 ];
                 rows.push(
                   schemaToUse.map(f => {
@@ -394,10 +595,10 @@ function UploaderInner({
                   }
                 ])
           ];
-          delete a.exampleFile;
+          delete acc.exampleFile;
         }
-        if (a.type) return a.type;
-        return a;
+        if (acc.type) return acc.type;
+        return acc;
       });
       simpleAccept = simpleAccept.join(", ");
     } else {
@@ -409,73 +610,6 @@ function UploaderInner({
 
   const fileListToUse = fileList ? fileList : [];
 
-  async function handleSecondHalfOfUpload({ acceptedFiles, cleanedFileList }) {
-    onChange(cleanedFileList); //tnw: this line is necessary, if you want to clear the file list in the beforeUpload, call onChange([])
-    // beforeUpload is called, otherwise beforeUpload will not be able to truly cancel the upload
-    const keepGoing = beforeUpload
-      ? await beforeUpload(cleanedFileList, onChange)
-      : true;
-    if (!keepGoing) return;
-
-    if (action) {
-      const responses = [];
-      await Promise.all(
-        acceptedFiles.map(async fileToUpload => {
-          const data = new FormData();
-          data.append("file", fileToUpload);
-          try {
-            const res = await (window.serverApi
-              ? window.serverApi.post(action, data)
-              : fetch(action, {
-                  method: "POST",
-                  body: data
-                }));
-            responses.push(res.data && res.data[0]);
-            onFileSuccess(res.data[0]).then(() => {
-              cleanedFileList = cleanedFileList.map(file => {
-                const fileToReturn = {
-                  ...file,
-                  ...res.data[0]
-                };
-                if (fileToReturn.id === fileToUpload.id) {
-                  fileToReturn.loading = false;
-                }
-                return fileToReturn;
-              });
-              onChange(cleanedFileList);
-            });
-          } catch (err) {
-            console.error("Error uploading file:", err);
-            responses.push({
-              ...fileToUpload,
-              error: err && err.msg ? err.msg : err
-            });
-            cleanedFileList = cleanedFileList.map(file => {
-              const fileToReturn = { ...file };
-              if (fileToReturn.id === fileToUpload.id) {
-                fileToReturn.loading = false;
-                fileToReturn.error = true;
-              }
-              return fileToReturn;
-            });
-            onChange(cleanedFileList);
-          }
-        })
-      );
-      onFieldSubmit(responses);
-    } else {
-      onChange(
-        cleanedFileList.map(function (file) {
-          return {
-            ...file,
-            loading: false
-          };
-        })
-      );
-    }
-    setLoading(false);
-  }
-
   return (
     <>
       {callout && (
@@ -491,8 +625,8 @@ function UploaderInner({
           height: "fit-content"
         }}
       >
-        {comp}
-        {comp2}
+        <Comp />
+        <Comp2 />
         <div
           className="tg-uploader-inner"
           style={{ width: "100%", height: "fit-content", minWidth: 0 }}
@@ -503,17 +637,17 @@ function UploaderInner({
               style={{ fontSize: 11, marginBottom: 5 }}
             >
               {advancedAccept && !acceptLoading ? (
-                <div style={{}}>
+                <div>
                   Accepts &nbsp;
-                  <span style={{}}>
-                    {advancedAccept.map((a, i) => {
+                  <span>
+                    {advancedAccept.map((acc, i) => {
                       const disabled = !(
-                        a.description ||
-                        a.exampleFile ||
-                        a.exampleFiles
+                        acc.description ||
+                        acc.exampleFile ||
+                        acc.exampleFiles
                       );
-                      const PopOrTooltip = a.exampleFiles ? Popover : Tooltip;
-                      const hasDownload = a.exampleFile || a.exampleFiles;
+                      const PopOrTooltip = acc.exampleFiles ? Popover : Tooltip;
+                      const hasDownload = acc.exampleFile || acc.exampleFiles;
                       const CustomTag = !hasDownload ? "span" : "a";
                       return (
                         <PopOrTooltip
@@ -522,40 +656,38 @@ function UploaderInner({
                           disabled={disabled}
                           modifiers={popoverOverflowModifiers}
                           content={
-                            a.exampleFiles ? (
+                            acc.exampleFiles ? (
                               <Menu>
-                                {a.exampleFiles.map(
+                                {acc.exampleFiles.map(
                                   (
                                     { description, subtext, exampleFile, icon },
                                     i
-                                  ) => {
-                                    return (
-                                      <MenuItem
-                                        icon={icon || "download"}
-                                        intent="primary"
-                                        text={
-                                          subtext ? (
-                                            <div>
-                                              <div>{description}</div>
-                                              <div
-                                                style={{
-                                                  fontSize: 11,
-                                                  fontStyle: "italic",
-                                                  color: Colors.GRAY3
-                                                }}
-                                              >
-                                                {subtext}
-                                              </div>{" "}
-                                            </div>
-                                          ) : (
-                                            description
-                                          )
-                                        }
-                                        {...getFileDownloadAttr(exampleFile)}
-                                        key={i}
-                                      ></MenuItem>
-                                    );
-                                  }
+                                  ) => (
+                                    <MenuItem
+                                      icon={icon || "download"}
+                                      intent="primary"
+                                      text={
+                                        subtext ? (
+                                          <div>
+                                            <div>{description}</div>
+                                            <div
+                                              style={{
+                                                fontSize: 11,
+                                                fontStyle: "italic",
+                                                color: Colors.GRAY3
+                                              }}
+                                            >
+                                              {subtext}
+                                            </div>{" "}
+                                          </div>
+                                        ) : (
+                                          description
+                                        )
+                                      }
+                                      {...getFileDownloadAttr(exampleFile)}
+                                      key={i}
+                                    />
+                                  )
                                 )}
                               </Menu>
                             ) : (
@@ -565,20 +697,20 @@ function UploaderInner({
                                   wordBreak: "break-word"
                                 }}
                               >
-                                {a.description ? (
+                                {acc.description ? (
                                   <div
                                     style={{
                                       marginBottom: 4,
                                       fontStyle: "italic"
                                     }}
                                   >
-                                    {a.description}
+                                    {acc.description}
                                   </div>
                                 ) : (
                                   ""
                                 )}
-                                {a.exampleFile &&
-                                  (a.isTemplate
+                                {acc.exampleFile &&
+                                  (acc.isTemplate
                                     ? "Download Example Template"
                                     : "Download Example File")}
                               </div>
@@ -588,20 +720,20 @@ function UploaderInner({
                           <CustomTag
                             className="tgFileTypeDescriptor"
                             style={{ marginRight: 10, cursor: "pointer" }}
-                            {...getFileDownloadAttr(a.exampleFile)}
+                            {...getFileDownloadAttr(acc.exampleFile)}
                           >
-                            {(a.type
-                              ? isArray(a.type)
-                                ? a.type
-                                : [a.type]
-                              : [a]
+                            {(acc.type
+                              ? isArray(acc.type)
+                                ? acc.type
+                                : [acc.type]
+                              : [acc]
                             )
                               .map(t => {
                                 if (!t.startsWith) {
-                                  console.error(`Missing type here:`, a);
+                                  console.error(`Missing type here:`, acc);
                                   throw new Error(
                                     `Missing "type" here: ${JSON.stringify(
-                                      a,
+                                      acc,
                                       null,
                                       4
                                     )}`
@@ -619,7 +751,7 @@ function UploaderInner({
                                 }}
                                 size={10}
                                 icon="download"
-                              ></Icon>
+                              />
                             )}
                           </CustomTag>
                         </PopOrTooltip>
@@ -631,7 +763,8 @@ function UploaderInner({
                 // make the dots below "load"
 
                 <>
-                  Accept Loading<LoadingDots></LoadingDots>
+                  Accept Loading
+                  <LoadingDots />
                 </>
               ) : (
                 <>Accepts {simpleAccept}</>
@@ -646,139 +779,140 @@ function UploaderInner({
               simpleAccept
                 ? simpleAccept
                     .split(", ")
-                    .map(a => (a.startsWith(".") ? a : "." + a))
+                    .map(acc => (acc.startsWith(".") ? acc : "." + acc))
                     .join(", ")
                 : undefined
             }
-            {...{
-              onDrop: async (_acceptedFiles, rejectedFiles) => {
-                let acceptedFiles = [];
-                for (const file of _acceptedFiles) {
-                  if ((validateAgainstSchema || autoUnzip) && isZipFile(file)) {
-                    const files = await filterFilesInZip(
-                      file,
-                      simpleAccept
-                        ?.split(", ")
-                        ?.map(a => (a.startsWith(".") ? a : "." + a)) || []
-                    );
-                    acceptedFiles.push(...files.map(f => f.originFileObj));
-                  } else {
-                    acceptedFiles.push(file);
-                  }
-                }
-                cleanupFiles();
-                if (rejectedFiles.length) {
-                  let msg = "";
-                  rejectedFiles.forEach(file => {
-                    if (msg) msg += "\n";
-                    msg +=
-                      `${file.file.name}: ` +
-                      file.errors.map(err => err.message).join(", ");
-                  });
-                  window.toastr &&
-                    window.toastr.warning(
-                      <div className="preserve-newline">{msg}</div>
-                    );
+            onDrop={async (_acceptedFiles, rejectedFiles) => {
+              let acceptedFiles = [];
+              for (const file of _acceptedFiles) {
+                if ((validateAgainstSchema || autoUnzip) && isZipFile(file)) {
+                  const files = await filterFilesInZip(
+                    file,
+                    simpleAccept
+                      ?.split(", ")
+                      ?.map(acc => (acc.startsWith(".") ? acc : "." + acc)) ||
+                      []
+                  );
+                  acceptedFiles.push(...files.map(f => f.originFileObj));
+                } else {
+                  acceptedFiles.push(file);
                 }
-                if (!acceptedFiles.length) return;
-                setLoading(true);
-                acceptedFiles = trimFiles(acceptedFiles, fileLimit);
-
-                acceptedFiles.forEach(file => {
-                  file.preview = URL.createObjectURL(file);
-                  file.loading = true;
-                  if (!file.id) {
-                    file.id = nanoid();
-                  }
-                  filesToClean.current.push(file);
+              }
+              cleanupFiles();
+              if (rejectedFiles.length) {
+                let msg = "";
+                rejectedFiles.forEach(file => {
+                  if (msg) msg += "\n";
+                  msg +=
+                    `${file.file.name}: ` +
+                    file.errors.map(err => err.message).join(", ");
                 });
-
-                if (readBeforeUpload) {
-                  acceptedFiles = await Promise.all(
-                    acceptedFiles.map(file => {
-                      return new Promise((resolve, reject) => {
-                        const reader = new FileReader();
-                        reader.readAsText(file, "UTF-8");
-                        reader.onload = evt => {
-                          file.parsedString = evt.target.result;
-                          resolve(file);
-                        };
-                        reader.onerror = err => {
-                          console.error("err:", err);
-                          reject(err);
-                        };
-                      });
-                    })
+                window.toastr &&
+                  window.toastr.warning(
+                    <div className="preserve-newline">{msg}</div>
                   );
+              }
+              if (!acceptedFiles.length) return;
+              setLoading(true);
+              acceptedFiles = trimFiles(acceptedFiles, fileLimit);
+
+              acceptedFiles.forEach(file => {
+                file.preview = URL.createObjectURL(file);
+                file.loading = true;
+                if (!file.id) {
+                  file.id = nanoid();
                 }
-                const cleanedAccepted = acceptedFiles.map(file => {
-                  return {
-                    originFileObj: file,
-                    originalFileObj: file,
-                    id: file.id,
-                    lastModified: file.lastModified,
-                    lastModifiedDate: file.lastModifiedDate,
-                    loading: file.loading,
-                    name: file.name,
-                    preview: file.preview,
-                    size: file.size,
-                    type: file.type,
-                    ...(file.parsedString
-                      ? { parsedString: file.parsedString }
-                      : {})
-                  };
-                });
+                filesToClean.current.push(file);
+              });
 
-                const toKeep = [];
-                if (validateAgainstSchema) {
-                  const filesWIssues = [];
-                  const filesWOIssues = [];
-                  for (const [i, file] of cleanedAccepted.entries()) {
-                    if (isCsvOrExcelFile(file)) {
-                      let parsedF;
-                      try {
-                        parsedF = await parseCsvOrExcelFile(file, {
-                          csvParserOptions: isFunction(
-                            validateAgainstSchema.csvParserOptions
-                          )
-                            ? validateAgainstSchema.csvParserOptions({
-                                validateAgainstSchema
-                              })
-                            : validateAgainstSchema.csvParserOptions
-                        });
-                      } catch (error) {
-                        console.error("error:", error);
-                        window.toastr &&
-                          window.toastr.error(
-                            `There was an error parsing your file. Please try again. ${
-                              error.message || error
-                            }`
-                          );
-                        return;
-                      }
+              if (readBeforeUpload) {
+                acceptedFiles = await Promise.all(
+                  acceptedFiles.map(file => {
+                    return new Promise((resolve, reject) => {
+                      const reader = new FileReader();
+                      reader.readAsText(file, "UTF-8");
+                      reader.onload = evt => {
+                        file.parsedString = evt.target.result;
+                        resolve(file);
+                      };
+                      reader.onerror = err => {
+                        console.error("err:", err);
+                        reject(err);
+                      };
+                    });
+                  })
+                );
+              }
+              const cleanedAccepted = acceptedFiles.map(file => {
+                return {
+                  originFileObj: file,
+                  originalFileObj: file,
+                  id: file.id,
+                  lastModified: file.lastModified,
+                  lastModifiedDate: file.lastModifiedDate,
+                  loading: file.loading,
+                  name: file.name,
+                  preview: file.preview,
+                  size: file.size,
+                  type: file.type,
+                  ...(file.parsedString
+                    ? { parsedString: file.parsedString }
+                    : {})
+                };
+              });
 
-                      const {
-                        csvValidationIssue: _csvValidationIssue,
-                        matchedHeaders,
-                        userSchema,
-                        searchResults,
-                        ignoredHeadersMsg
-                      } = await tryToMatchSchemas({
-                        incomingData: parsedF.data,
-                        validateAgainstSchema
+              const toKeep = [];
+              if (validateAgainstSchema) {
+                const filesWIssues = [];
+                const filesWOIssues = [];
+                for (const [i, file] of cleanedAccepted.entries()) {
+                  if (isCsvOrExcelFile(file)) {
+                    let parsedF;
+                    try {
+                      parsedF = await parseCsvOrExcelFile(file, {
+                        csvParserOptions: isFunction(
+                          validateAgainstSchema.csvParserOptions
+                        )
+                          ? validateAgainstSchema.csvParserOptions({
+                              validateAgainstSchema
+                            })
+                          : validateAgainstSchema.csvParserOptions
                       });
-                      if (userSchema?.userData?.length === 0) {
-                        console.error(
-                          `userSchema, parsedF.data:`,
-                          userSchema,
-                          parsedF.data
+                    } catch (error) {
+                      console.error("error:", error);
+                      window.toastr &&
+                        window.toastr.error(
+                          `There was an error parsing your file. Please try again. ${
+                            error.message || error
+                          }`
                         );
-                      } else {
-                        toKeep.push(file);
-                        let csvValidationIssue = _csvValidationIssue;
-                        if (csvValidationIssue) {
-                          if (isObject(csvValidationIssue)) {
-                            initializeForm(
+                      return;
+                    }
+
+                    const {
+                      csvValidationIssue: _csvValidationIssue,
+                      matchedHeaders,
+                      userSchema,
+                      searchResults,
+                      ignoredHeadersMsg
+                    } = await tryToMatchSchemas({
+                      incomingData: parsedF.data,
+                      validateAgainstSchema
+                    });
+                    if (userSchema?.userData?.length === 0) {
+                      console.error(
+                        `userSchema, parsedF.data:`,
+                        userSchema,
+                        parsedF.data
+                      );
+                    } else {
+                      toKeep.push(file);
+                      let csvValidationIssue = _csvValidationIssue;
+                      if (csvValidationIssue) {
+                        if (isObject(csvValidationIssue)) {
+                          dispatch(
+                            initialize(
                               `editableCellTable${
                                 cleanedAccepted.length > 1 ? `-${i}` : ""
                               }`,
@@ -790,149 +924,141 @@ function UploaderInner({
                                 keepValues: true,
                                 updateUnregisteredFields: true
                               }
+                            )
+                          );
+                          const err = Object.values(csvValidationIssue)[0];
+                          // csvValidationIssue = `It looks like there was an error with your data - \n\n${
+                          //   err && err.message ? err.message : err
+                          // }.\n\nPlease review your headers and then correct any errors on the next page.`; //pass just the first error as a string
+                          const errMsg = err && err.message ? err.message : err;
+                          if (isPlainObject(errMsg)) {
+                            throw new Error(
+                              `errMsg is an object ${JSON.stringify(
+                                errMsg,
+                                null,
+                                4
+                              )}`
                             );
-                            const err = Object.values(csvValidationIssue)[0];
-                            // csvValidationIssue = `It looks like there was an error with your data - \n\n${
-                            //   err && err.message ? err.message : err
-                            // }.\n\nPlease review your headers and then correct any errors on the next page.`; //pass just the first error as a string
-                            const errMsg =
-                              err && err.message ? err.message : err;
-                            if (isPlainObject(errMsg)) {
-                              throw new Error(
-                                `errMsg is an object ${JSON.stringify(
-                                  errMsg,
-                                  null,
-                                  4
-                                )}`
-                              );
-                            }
-                            csvValidationIssue = (
+                          }
+                          csvValidationIssue = (
+                            <div>
                               <div>
-                                <div>
-                                  It looks like there was an error with your
-                                  data (Correct on the Review Data page):
-                                </div>
-                                <div style={{ color: "red" }}>{errMsg}</div>
-                                <div>
-                                  Please review your headers and then correct
-                                  any errors on the next page.
-                                </div>
+                                It looks like there was an error with your data
+                                (Correct on the Review Data page):
                               </div>
-                            );
-                          }
-                          filesWIssues.push({
-                            file,
-                            csvValidationIssue,
-                            ignoredHeadersMsg,
-                            matchedHeaders,
-                            userSchema,
-                            searchResults
-                          });
-                        } else {
-                          filesWOIssues.push({
-                            file,
-                            csvValidationIssue,
-                            ignoredHeadersMsg,
-                            matchedHeaders,
-                            userSchema,
-                            searchResults
-                          });
-                          const newFileName = removeExt(file.name) + `.csv`;
-
-                          const { newFile, cleanedEntities } = getNewCsvFile(
-                            userSchema.userData,
-                            newFileName
+                              <div style={{ color: "red" }}>{errMsg}</div>
+                              <div>
+                                Please review your headers and then correct any
+                                errors on the next page.
+                              </div>
+                            </div>
                           );
-
-                          file.meta = parsedF.meta;
-                          file.hasEditClick = true;
-                          file.parsedData = cleanedEntities;
-                          file.name = newFileName;
-                          file.originFileObj = newFile;
-                          file.originalFileObj = newFile;
                         }
-                      }
-                    } else {
-                      toKeep.push(file);
-                    }
-                  }
-                  if (filesWIssues.length) {
-                    const { file } = filesWIssues[0];
-                    const allFiles = [...filesWIssues, ...filesWOIssues];
-                    const doAllFilesHaveSameHeaders = allFiles.every(f => {
-                      if (f.userSchema.fields && f.userSchema.fields.length) {
-                        return f.userSchema.fields.every((h, i) => {
-                          return (
-                            h.path === allFiles[0].userSchema.fields[i].path
-                          );
+                        filesWIssues.push({
+                          file,
+                          csvValidationIssue,
+                          ignoredHeadersMsg,
+                          matchedHeaders,
+                          userSchema,
+                          searchResults
                         });
-                      }
-                      return false;
-                    });
-                    const multipleFiles = allFiles.length > 1;
-                    const { res } = await showUploadCsvWizardDialog(
-                      "onUploadWizardFinish",
-                      {
-                        dialogProps: {
-                          title: `Fix Up File${multipleFiles ? "s" : ""} ${
-                            multipleFiles
-                              ? ""
-                              : file.name
-                                ? `"${file.name}"`
-                                : ""
-                          }`
-                        },
-                        doAllFilesHaveSameHeaders,
-                        filesWIssues: allFiles,
-                        validateAgainstSchema
-                      }
-                    );
+                      } else {
+                        filesWOIssues.push({
+                          file,
+                          csvValidationIssue,
+                          ignoredHeadersMsg,
+                          matchedHeaders,
+                          userSchema,
+                          searchResults
+                        });
+                        const newFileName = removeExt(file.name) + `.csv`;
 
-                    if (!res) {
-                      window.toastr.warning(`File Upload Aborted`);
-                      return;
-                    } else {
-                      allFiles.forEach(({ file }, i) => {
-                        const newEntities = res[i];
-                        // const newFileName = removeExt(file.name) + `_updated.csv`;
-                        //swap out file with a new csv file
                         const { newFile, cleanedEntities } = getNewCsvFile(
-                          newEntities,
-                          file.name
+                          userSchema.userData,
+                          newFileName
                         );
 
+                        file.meta = parsedF.meta;
                         file.hasEditClick = true;
                         file.parsedData = cleanedEntities;
-                        // file.name = newFileName;
+                        file.name = newFileName;
                         file.originFileObj = newFile;
                         file.originalFileObj = newFile;
-                      });
-                      setTimeout(() => {
-                        //inside a timeout for cypress purposes
-                        window.toastr.success(
-                          `Added Fixed Up File${
-                            allFiles.length > 1 ? "s" : ""
-                          } ${allFiles.map(({ file }) => file.name).join(", ")}`
-                        );
-                      }, 200);
+                      }
                     }
+                  } else {
+                    toKeep.push(file);
                   }
-                } else {
-                  toKeep.push(...cleanedAccepted);
                 }
+                if (filesWIssues.length) {
+                  const { file } = filesWIssues[0];
+                  const allFiles = [...filesWIssues, ...filesWOIssues];
+                  const doAllFilesHaveSameHeaders = allFiles.every(f => {
+                    if (f.userSchema.fields && f.userSchema.fields.length) {
+                      return f.userSchema.fields.every((h, i) => {
+                        return h.path === allFiles[0].userSchema.fields[i].path;
+                      });
+                    }
+                    return false;
+                  });
+                  const multipleFiles = allFiles.length > 1;
+                  const { res } = await showUploadCsvWizardDialog(
+                    "onUploadWizardFinish",
+                    {
+                      dialogProps: {
+                        title: `Fix Up File${multipleFiles ? "s" : ""} ${
+                          multipleFiles ? "" : file.name ? `"${file.name}"` : ""
+                        }`
+                      },
+                      doAllFilesHaveSameHeaders,
+                      filesWIssues: allFiles,
+                      validateAgainstSchema
+                    }
+                  );
 
-                if (toKeep.length === 0) {
-                  window.toastr &&
-                    window.toastr.error(
-                      `It looks like there wasn't any data in your file. Please add some data and try again`
-                    );
+                  if (!res) {
+                    window.toastr.warning(`File Upload Aborted`);
+                    return;
+                  } else {
+                    allFiles.forEach(({ file }, i) => {
+                      const newEntities = res[i];
+                      // const newFileName = removeExt(file.name) + `_updated.csv`;
+                      //swap out file with a new csv file
+                      const { newFile, cleanedEntities } = getNewCsvFile(
+                        newEntities,
+                        file.name
+                      );
+
+                      file.hasEditClick = true;
+                      file.parsedData = cleanedEntities;
+                      file.originFileObj = newFile;
+                      file.originalFileObj = newFile;
+                    });
+                    setTimeout(() => {
+                      //inside a timeout for cypress purposes
+                      window.toastr.success(
+                        `Added Fixed Up File${
+                          allFiles.length > 1 ? "s" : ""
+                        } ${allFiles.map(({ file }) => file.name).join(", ")}`
+                      );
+                    }, 200);
+                  }
                 }
-                const cleanedFileList = trimFiles(
-                  [...toKeep, ...fileListToUse],
-                  fileLimit
-                );
-                handleSecondHalfOfUpload({ acceptedFiles, cleanedFileList });
+              } else {
+                toKeep.push(...cleanedAccepted);
+              }
+
+              if (toKeep.length === 0) {
+                window.toastr &&
+                  window.toastr.error(
+                    `It looks like there wasn't any data in your file. Please add some data and try again`
+                  );
               }
+              const cleanedFileList = trimFiles(
+                [...toKeep, ...fileListToUse],
+                fileLimit
+              );
+              handleSecondHalfOfUpload({ acceptedFiles, cleanedFileList });
             }}
             {...dropzoneProps}
           >
@@ -942,71 +1068,26 @@ function UploaderInner({
               isDragAccept,
               isDragReject,
               isDragActive
-              // isDragActive
-              // isDragReject
-              // isDragAccept
             }) => (
-              <section>
-                <div
-                  {...getRootProps()}
-                  className={classnames("tg-dropzone", className, {
-                    "tg-dropzone-minimal": minimal,
-                    "tg-dropzone-active": isDragActive,
-                    "tg-dropzone-reject": isDragReject, // tnr: the acceptClassName/rejectClassName doesn't work with file extensions (only mimetypes are supported when dragging). Thus we'll just always turn the drop area blue when dragging and let the filtering occur on drop. See https://github.com/react-dropzone/react-dropzone/issues/888#issuecomment-773938074
-                    "tg-dropzone-accept": isDragAccept,
-                    "tg-dropzone-disabled": dropzoneDisabled,
-                    "bp3-disabled": dropzoneDisabled
-                  })}
-                >
-                  <input {...getInputProps()} />
-                  {contentOverride || (
-                    <div
-                      title={
-                        simpleAccept
-                          ? "Accepts only the following file types: " +
-                            simpleAccept
-                          : "Accepts any file input"
-                      }
-                      className="tg-upload-inner"
-                    >
-                      {innerIcon || (
-                        <Icon icon="upload" iconSize={minimal ? 15 : 30} />
-                      )}
-                      {innerText ||
-                        (minimal ? "Upload" : "Click or drag to upload")}
-                      {validateAgainstSchema && !noBuildCsvOption && (
-                        <div
-                          style={{
-                            textAlign: "center",
-                            // fontSize: 18,
-                            marginTop: 7,
-                            marginBottom: 5
-                          }}
-                          onClick={handleManuallyEnterData}
-                          className="link-button"
-                        >
-                          ...or {manualEnterMessage}
-                          {/* <div
-                            style={{
-                              fontSize: 11,
-                              color: Colors.GRAY3,
-                              fontStyle: "italic"
-                            }}
-                          >
-                            {manualEnterSubMessage}
-                          </div> */}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-
-                {showFilesCount ? (
-                  <div className="tg-upload-file-list-counter">
-                    Files: {fileList ? fileList.length : 0}
-                  </div>
-                ) : null}
-              </section>
+              <InnerDropZone
+                getRootProps={getRootProps}
+                getInputProps={getInputProps}
+                isDragAccept={isDragAccept}
+                isDragReject={isDragReject}
+                isDragActive={isDragActive}
+                className={className}
+                minimal={minimal}
+                dropzoneDisabled={dropzoneDisabled}
+                contentOverride={contentOverride}
+                simpleAccept={simpleAccept}
+                innerIcon={innerIcon}
+                innerText={innerText}
+                validateAgainstSchema={validateAgainstSchema}
+                handleManuallyEnterData={handleManuallyEnterData}
+                noBuildCsvOption={noBuildCsvOption}
+                showFilesCount={showFilesCount}
+                fileList={fileList}
+              />
             )}
           </Dropzone>
           {/* {validateAgainstSchema && <CsvWizardHelper bindToggle={{}} validateAgainstSchema={validateAgainstSchema}></CsvWizardHelper>} */}
@@ -1101,24 +1182,23 @@ function UploaderInner({
                                     userSchema
                                   }
                                 );
-
                               if (!newEntities) {
                                 return;
                               } else {
                                 const { newFile, cleanedEntities } =
                                   getNewCsvFile(newEntities, fileName);
-                                const zoink = Object.assign({}, file, {
+                                const tmpFile = Object.assign({}, file, {
                                   ...newFile,
                                   originFileObj: newFile,
                                   originalFileObj: newFile,
                                   parsedData: cleanedEntities
                                 });
-                                zoink.name = newFile.name;
-                                fileList = [...fileList];
-                                fileList[index] = zoink;
+                                tmpFile.name = newFile.name;
+                                const tmpFileList = [...fileList];
+                                tmpFileList[index] = tmpFile;
                                 handleSecondHalfOfUpload({
-                                  acceptedFiles: fileList,
-                                  cleanedFileList: fileList
+                                  acceptedFiles: tmpFileList,
+                                  cleanedFileList: tmpFileList
                                 });
                                 window.toastr.success(`File Updated`);
                               }
@@ -1188,61 +1268,6 @@ function UploaderInner({
       </div>
     </>
   );
-}
-
-const Uploader = compose(
-  connect(undefined, { initializeForm: initialize }),
-  observer
-)(UploaderInner);
+};
 
 export default Uploader;
-
-function getFileDownloadAttr(exampleFile) {
-  const baseUrl = window?.frontEndConfig?.serverBasePath || "";
-  return isFunction(exampleFile)
-    ? { onClick: exampleFile }
-    : exampleFile && {
-        target: "_blank",
-        download: true,
-        href:
-          exampleFile.startsWith("https") || exampleFile.startsWith("www")
-            ? exampleFile
-            : baseUrl
-              ? urljoin(baseUrl, "exampleFiles", exampleFile)
-              : exampleFile
-      };
-}
-
-function getNewCsvFile(ents, fileName) {
-  const strippedEnts = stripId(ents);
-
-  return {
-    newFile: new File([papaparse.unparse(strippedEnts)], fileName),
-    cleanedEntities: strippedEnts
-  };
-}
-
-function stripId(ents = []) {
-  return ents.map(ent => {
-    const { id, ...rest } = ent;
-    return rest;
-  });
-}
-
-const manualEnterMessage = "Build CSV File";
-const manualEnterSubMessage = "Paste or type data to build a CSV file";
-
-function trimFiles(incomingFiles, fileLimit) {
-  if (fileLimit) {
-    if (fileLimit && incomingFiles.length > fileLimit) {
-      window.toastr &&
-        window.toastr.warning(
-          `Detected additional files in your upload that we are ignoring. You can only upload ${fileLimit} file${
-            fileLimit > 1 ? "s" : ""
-          } at a time.`
-        );
-    }
-    return incomingFiles.slice(0, fileLimit);
-  }
-  return incomingFiles;
-}