cloudmr-ux 1.0.6 → 1.0.7

package/dist/index.css

@@ -146,6 +146,32 @@
   margin-bottom: 4px;
 }
 
+/* src/CmrComponents/upload/Upload.css */
+.btn-info {
+  color: #ffffff;
+  --bs-btn-hover-color: #ffffff;
+  --bs-btn-color: #ffffff;
+}
+
+/* src/CmrComponents/label/Label.css */
+.cmr-label {
+  display: flex;
+  align-items: center;
+  font-style: normal;
+  font-weight: 400;
+  font-family:
+    "Inter",
+    "Roboto",
+    "Helvetica",
+    "Arial",
+    sans-serif;
+  padding-right: 10px;
+}
+.asterik {
+  color: red !important;
+  margin-left: 4px;
+}
+
 /* src/CmrTable/CmrTable.css */
 .css-1lymaxv-MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within,
 .css-1lymaxv-MuiDataGrid-root .MuiDataGrid-cell:focus-within {

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps } from '@mui/material';
+import { ButtonProps, SxProps, Theme } from '@mui/material';
 import React, { ChangeEvent, ReactNode, CSSProperties, FC } from 'react';
 import { SizeType } from 'antd/lib/config-provider/SizeContext';
 import { CollapsibleType } from 'antd/es/collapse/CollapsePanel';
 import { ExpandIconPosition } from 'antd/es/collapse/Collapse';
+import { AxiosRequestConfig, AxiosResponse } from 'axios';
 import { DataGridProps } from '@mui/x-data-grid';
 
 declare const CmrButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
@@ -83,6 +84,86 @@ interface CmrPanelProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const CmrPanel: (props: CmrPanelProps) => react_jsx_runtime.JSX.Element;
 
+interface LambdaFile {
+    "filename": string;
+    "filetype": string;
+    "filesize": string;
+    "filemd5": string;
+    "file": File;
+}
+/**
+ * Consists of general settings for upload component
+ * functionalities and call back methods evoked
+ * for specific interactions
+ */
+interface CMRUploadProps extends React.HTMLAttributes<HTMLDivElement> {
+    retains?: boolean;
+    maxCount: number;
+    changeNameAfterUpload?: boolean;
+    onRemove?: (removedFile: File) => void;
+    /**
+     * Allows access to file content prior to uploading.
+     * If returned value from the method is false,
+     * prevents the file upload process. Called before
+     * create payload.
+     * @param file
+     */
+    beforeUpload?: (file: File) => Promise<boolean>;
+    /**
+     * This or uploadHandler must be specified
+     * @param file
+     * @param fileAlias
+     * @param fileDatabase
+     */
+    createPayload?: (file: File, fileAlias: string, fileDatabase: string) => (Promise<{
+        destination: string;
+        lambdaFile: LambdaFile;
+        file: File;
+        config: AxiosRequestConfig;
+    } | undefined>);
+    onUploadProgressUpdate?: (loaded: number, total: number) => void | undefined;
+    onUploaded: (res: AxiosResponse, file: File) => Promise<void> | void;
+    sx?: SxProps<Theme> | undefined;
+    rest?: any;
+    fileExtension?: string;
+    uploadStarted?: () => void;
+    uploadEnded?: () => void;
+    uploadFailed?: () => void;
+    uploadProgressed?: (progress: number) => void;
+    /**
+     * Override this to replace the default behavior of uploading
+     * @param file
+     * @param fileAlias
+     * @param fileDatabase
+     * @param onProgress
+     * @param onUploaded
+     */
+    uploadHandler?: (file: File, fileAlias: string, fileDatabase: string, onProgress?: (progress: number) => void, onUploaded?: (res: AxiosResponse, file: File) => void) => Promise<number>;
+    fullWidth?: boolean;
+    style?: any;
+    /**
+     * Displays upload button instead of uploaded file after upload
+     * if set to reusable
+     */
+    reusable?: boolean;
+    uploadButtonName?: string;
+    /**
+     * Processes the uploaded file before performing the upload;
+     * @return file/undefined/statuscode undefined to fail the upload, return File
+     * to pass the processed file, return number to indicate error code
+     * and return to upload window.
+     * @param file
+     */
+    preprocess?: (file: File) => Promise<File | undefined | number>;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+}
+declare const CmrUpload: {
+    (props: CMRUploadProps): react_jsx_runtime.JSX.Element;
+    defaultProps: {
+        changeNameAfterUpload: boolean;
+    };
+};
+
 interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
     dataSource: any[];
     idAlias?: string;
@@ -93,4 +174,4 @@ interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
 
 declare const CmrTable: FC<CmrTableProps>;
 
-export { CmrButton, CmrCheckbox, CmrCollapse, CmrInput, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps };
+export { CmrUpload as CMRUpload, CmrButton, CmrCheckbox, CmrCollapse, CmrInput, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps, LambdaFile };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  CMRUpload: () => Upload_default,
   CmrButton: () => CmrButton,
   CmrCheckbox: () => CmrCheckbox,
   CmrCollapse: () => Collapse_default,
@@ -290,9 +291,476 @@ var CmrPanel = function(props) {
 };
 var Panel_default = CmrPanel;
 
+// src/CmrComponents/upload/Upload.tsx
+var import_react4 = __toESM(require("react"));
+var import_material7 = require("@mui/material");
+
+// src/CmrComponents/upload/UploadWindow.tsx
+var React4 = __toESM(require("react"));
+var import_Button = __toESM(require("@mui/material/Button"));
+var import_TextField = __toESM(require("@mui/material/TextField"));
+var import_Dialog = __toESM(require("@mui/material/Dialog"));
+var import_DialogActions = __toESM(require("@mui/material/DialogActions"));
+var import_DialogContent = __toESM(require("@mui/material/DialogContent"));
+var import_DialogContentText = __toESM(require("@mui/material/DialogContentText"));
+var import_DialogTitle = __toESM(require("@mui/material/DialogTitle"));
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_material6 = require("@mui/material");
+
+// src/CmrComponents/label/Label.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var CmrLabel = (props) => {
+  const { children, required = false } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "cmr-label", style: { fontSize: "16px", ...props.style }, children: [
+    children,
+    required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "asterik", children: "*" })
+  ] });
+};
+var Label_default = CmrLabel;
+
+// src/CmrComponents/upload/UploadWindow.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function UploadWindow({
+  upload,
+  open,
+  setOpen,
+  fileExtension,
+  template = { showFileName: true, showDatabase: true, showFileSize: true }
+  // default values
+}) {
+  const [fileOriginalName, setFileOriginalName] = React4.useState("");
+  const [fileAlias, setFileAlias] = React4.useState("/");
+  const [fileSize, setFileSize] = React4.useState("0 MB");
+  const [warningText, setWarningText] = React4.useState("Unknown Status");
+  const [infoOpen, setInfoOpen] = React4.useState(false);
+  const [locationSelection, setLocationSelection] = React4.useState("s3");
+  const [infoStyle, setInfoStyle] = React4.useState("info");
+  const [uploadedFiles, setUploaded] = React4.useState([]);
+  const [UpBtnDisabled, setUpBtnDisabled] = React4.useState(false);
+  const [UpBtnText, setUpBtnText] = React4.useState("Upload");
+  const [uploadBoxWarning, setUploadBoxWarning] = React4.useState(void 0);
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const getExtension = (fileName) => {
+    if (fileName == void 0)
+      return;
+    return fileName.split(".").pop();
+  };
+  const handleConfirm = () => {
+    if (uploadedFiles.length === 0) {
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("Must select files to upload!");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    if (fileAlias.length === 0) {
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("File name can't be empty");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    setOpen(false);
+    upload(uploadedFiles[0], fileAlias, locationSelection).then((response) => {
+      console.log(response);
+      if (response > 0) {
+        setInfoOpen(true);
+        if (response === 200) {
+          setInfoStyle("success");
+          setWarningText("Upload successful");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setOpen(false);
+          }, 1e3);
+          setUpBtnDisabled(false);
+          setUpBtnText("Upload");
+        } else if (response === 413) {
+          setInfoStyle("error");
+          setWarningText("File size limit exceeded");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 2e3);
+        } else if (response === 500) {
+          setInfoStyle("error");
+          setWarningText("Internal server error");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 1500);
+          setOpen(true);
+        } else if (response === 400) {
+          setInfoStyle("warning");
+          setWarningText("File upload cancelled");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 1e3);
+          setOpen(true);
+        } else {
+          setInfoStyle("warning");
+          setWarningText("Unknown status");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 2e3);
+          setOpen(true);
+        }
+      }
+    }).catch((error) => {
+      setUpBtnDisabled(false);
+      setUpBtnText("Upload");
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("Upload unsuccessful: " + error.message);
+      setTimeout(() => setInfoOpen(false), 2500);
+      console.error("Error:", error);
+    });
+    setUpBtnDisabled(true);
+    setUpBtnText("Uploading");
+  };
+  const changeFileName = (e) => {
+    setFileAlias(e.target.value);
+  };
+  function loadFiles(files) {
+    if (files.length == 0) {
+      setInfoOpen(true);
+      setInfoStyle("warning");
+      setWarningText("No file selected");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    if (files.length > 1) {
+      setInfoOpen(true);
+      setInfoStyle("warning");
+      setWarningText("Only accepts one file at a time");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    let file = files[0];
+    setUploaded([file]);
+    function readFile(file2) {
+      setFileOriginalName(file2.name);
+      setFileAlias(file2.name);
+      const units = [
+        "B",
+        "KB",
+        "MB",
+        "GB",
+        "TB",
+        "PB",
+        "EB",
+        "ZB",
+        "YB"
+      ];
+      let numberOfBytes = file2.size;
+      const exponent = Math.min(
+        Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
+        units.length - 1
+      );
+      const approx = numberOfBytes / 1024 ** exponent;
+      const output = exponent === 0 ? `${numberOfBytes} bytes` : `${approx.toFixed(3)} ${units[exponent]}`;
+      setFileSize(output);
+    }
+    readFile(file);
+  }
+  let initialized = false;
+  let fileInput = (inputRef) => {
+    if (initialized)
+      return;
+    inputRef.addEventListener("dragover", function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (e.dataTransfer.files) {
+        let draggedFiles = e.dataTransfer.files;
+        if (draggedFiles.length > 1) {
+          setUploadBoxWarning("Only one file can be uploaded at a time");
+        } else if (fileExtension != void 0 && draggedFiles.length != 0 && getExtension(draggedFiles[0].name) != fileExtension) {
+          setUploadBoxWarning(`Only accepting files with extension ${fileExtension}`);
+        }
+      }
+      e.dataTransfer.dropEffect = "copy";
+    });
+    inputRef.addEventListener("drop", function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setUploadBoxWarning(void 0);
+      let files = e.dataTransfer.files;
+      if (files.length > 1) {
+        setInfoOpen(true);
+        setInfoStyle("warning");
+        setWarningText("Only one file can be uploaded at a time");
+        setTimeout(() => setInfoOpen(false), 2500);
+        return;
+      } else if (fileExtension != void 0 && `.${getExtension(files[0].name)}` != fileExtension) {
+        setInfoOpen(true);
+        setInfoStyle("warning");
+        setWarningText(`Only accepting files with extension ${fileExtension}`);
+        setTimeout(() => setInfoOpen(false), 2500);
+        return;
+      }
+      loadFiles(files);
+    });
+    inputRef.addEventListener("dragleave", () => {
+      setUploadBoxWarning(void 0);
+    });
+    initialized = true;
+  };
+  const fileInputClick = (e) => {
+    const fileElem = document.getElementById("file-window");
+    e.preventDefault();
+    if (fileElem) {
+      fileElem.click();
+    }
+  };
+  const loadSelectedFiles = (e) => {
+    e.preventDefault();
+    const fileElem = document.getElementById("file-window");
+    loadFiles(fileElem.files);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_Dialog.default, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_DialogTitle.default, { children: "File Upload" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogContent.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_DialogContentText.default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogContent.default, { dividers: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_Box.default,
+          {
+            width: 500,
+            height: 250,
+            style: {
+              borderStyle: "dashed",
+              borderRadius: "5pt",
+              borderColor: uploadBoxWarning == void 0 ? "lightGray" : "#BA3C3C"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Typography.default, { component: "div", style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              import_Box.default,
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100%"
+                },
+                onClick: fileInputClick,
+                ref: fileInput,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_Typography.default, { variant: "body1", align: "center", style: { marginTop: "auto" }, children: [
+                    "Drag & Drop or Click to Upload Your File Here ",
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("sup", { children: "*" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Typography.default, { variant: "body2", align: "center", style: { marginTop: "auto", fontSize: "0.8rem", fontStyle: "italic" }, children: "* Warning: The file you are uploading may contain sensitive information protected under privacy laws. Please ensure all PHI is anonymized before proceeding.Before proceeding. The user is the sole responsible for data anonymization." })
+                ]
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "input",
+          {
+            type: "file",
+            id: "file-window",
+            multiple: true,
+            accept: fileExtension == void 0 ? "*" : fileExtension,
+            style: { display: "none" },
+            onChange: loadSelectedFiles
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_Box.default, { component: "form", sx: { "& .MuiTextField-root": { m: 2, width: "25ch", mb: 0 } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+            template.showFileName && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_TextField.default,
+              {
+                required: true,
+                style: { marginTop: "30px" },
+                label: `File Alias:`,
+                value: fileAlias,
+                variant: "standard",
+                onChange: changeFileName
+              }
+            ),
+            fileOriginalName != "" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label_default, { style: { marginLeft: "16px", fontSize: "9pt", color: "#267833" }, children: fileOriginalName }),
+            template.showDatabase && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_TextField.default,
+              {
+                select: true,
+                label: "Database:",
+                defaultValue: "s3",
+                helperText: "Upstream Storage Location",
+                variant: "standard",
+                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.MenuItem, { value: option.value, children: option.label }, option.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+            template.showFileSize && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_TextField.default,
+              {
+                label: "File Size:",
+                value: fileSize,
+                InputProps: {
+                  readOnly: true
+                },
+                variant: "standard"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Collapse, { in: infoOpen, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Alert, { severity: infoStyle, sx: { m: 1 }, children: warningText }) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogActions.default, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_Button.default,
+          {
+            color: "inherit",
+            sx: { color: "#333" },
+            disabled: UpBtnDisabled,
+            onClick: handleClose,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_Button.default,
+          {
+            variant: "contained",
+            disabled: UpBtnDisabled,
+            onClick: handleConfirm,
+            children: UpBtnText
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/CmrComponents/upload/Upload.tsx
+var import_axios = __toESM(require("axios"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var CmrUpload = (props) => {
+  let [open, setOpen] = (0, import_react4.useState)(false);
+  let [uploading, setUploading] = (0, import_react4.useState)(false);
+  let [progress, setProgress] = (0, import_react4.useState)(0);
+  let [uploadedFile, setUploadedFile] = (0, import_react4.useState)(void 0);
+  const upload = async (file, fileAlias, fileDatabase) => {
+    setUploading(true);
+    const onProgress = (progress2) => {
+      let percentage = progress2 * 99;
+      props.uploadProgressed && props.uploadProgressed(+percentage.toFixed(2));
+      setProgress(+percentage.toFixed(2));
+    };
+    if (props.uploadStarted)
+      props.uploadStarted();
+    let status = 0;
+    if (props.beforeUpload != void 0 && !await props.beforeUpload(file)) {
+      if (props.uploadEnded)
+        props.uploadEnded();
+      setUploading(false);
+      return 200;
+    }
+    if (props.preprocess) {
+      let processed = await props.preprocess(file);
+      if (processed == void 0)
+        return failUpload();
+      if (typeof processed == "number") {
+        setUploading(false);
+        return processed;
+      }
+      file = processed;
+    }
+    if (props.uploadHandler != void 0) {
+      status = await props.uploadHandler(file, fileAlias, fileDatabase, onProgress, props.onUploaded);
+      setUploadedFile(props.reusable ? void 0 : file.name);
+    } else if (props.createPayload) {
+      let payload = await props.createPayload(file, fileAlias, fileDatabase);
+      if (payload == void 0) {
+        return failUpload();
+      }
+      payload.config.onUploadProgress = (progressEvent) => {
+        if (progressEvent.total == void 0)
+          return;
+        onProgress(progressEvent.loaded / progressEvent.total);
+      };
+      const res = await import_axios.default.post(payload.destination, payload.lambdaFile, payload.config);
+      status = res.status;
+      if (status === 200) {
+        console.log(res.data);
+        await import_axios.default.put(res.data.upload_url, payload.file, {
+          headers: {
+            "Content-Type": payload.file.type
+          }
+        });
+        await props.onUploaded(res, payload.file);
+        setUploadedFile(props.reusable ? void 0 : payload.file.name);
+      }
+    } else {
+      return failUpload();
+    }
+    if (props.uploadEnded)
+      props.uploadEnded();
+    setUploading(false);
+    setProgress(0);
+    return status;
+  };
+  function failUpload() {
+    setUploading(false);
+    setProgress(0);
+    if (props.uploadFailed)
+      return props.uploadFailed();
+    return 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react4.default.Fragment, { children: [
+    !uploading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      import_material7.Button,
+      {
+        fullWidth: props.fullWidth,
+        style: props.style,
+        variant: uploadedFile == void 0 ? "contained" : "outlined",
+        onClick: () => {
+          setOpen(true);
+        },
+        color: props.color || "primary",
+        sx: props.sx,
+        children: [
+          props.changeNameAfterUpload ? uploadedFile === void 0 ? props.uploadButtonName ? props.uploadButtonName : "Upload" : uploadedFile : props.uploadButtonName ? props.uploadButtonName : "Upload",
+          "                "
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material7.Button, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
+      "Uploading ",
+      progress,
+      "%"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      UploadWindow,
+      {
+        open,
+        setOpen,
+        upload,
+        fileExtension: props.fileExtension,
+        template: { showFileName: true, showFileSize: true }
+      }
+    )
+  ] });
+};
+CmrUpload.defaultProps = {
+  changeNameAfterUpload: true
+};
+var Upload_default = CmrUpload;
+
 // src/CmrTable/CmrTable.tsx
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -304,7 +772,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_x_data_grid.DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -330,6 +798,7 @@ var CmrTable_default = CmrTable;
 var CmrTable2 = CmrTable_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CMRUpload,
   CmrButton,
   CmrCheckbox,
   CmrCollapse,

package/dist/index.mjs

@@ -253,9 +253,476 @@ var CmrPanel = function(props) {
 };
 var Panel_default = CmrPanel;
 
+// src/CmrComponents/upload/Upload.tsx
+import React5, { useState as useState4 } from "react";
+import { Button as Button3 } from "@mui/material";
+
+// src/CmrComponents/upload/UploadWindow.tsx
+import * as React4 from "react";
+import Button2 from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import { Alert, Collapse, MenuItem as MenuItem2 } from "@mui/material";
+
+// src/CmrComponents/label/Label.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var CmrLabel = (props) => {
+  const { children, required = false } = props;
+  return /* @__PURE__ */ jsxs4("label", { className: "cmr-label", style: { fontSize: "16px", ...props.style }, children: [
+    children,
+    required && /* @__PURE__ */ jsx8("span", { className: "asterik", children: "*" })
+  ] });
+};
+var Label_default = CmrLabel;
+
+// src/CmrComponents/upload/UploadWindow.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function UploadWindow({
+  upload,
+  open,
+  setOpen,
+  fileExtension,
+  template = { showFileName: true, showDatabase: true, showFileSize: true }
+  // default values
+}) {
+  const [fileOriginalName, setFileOriginalName] = React4.useState("");
+  const [fileAlias, setFileAlias] = React4.useState("/");
+  const [fileSize, setFileSize] = React4.useState("0 MB");
+  const [warningText, setWarningText] = React4.useState("Unknown Status");
+  const [infoOpen, setInfoOpen] = React4.useState(false);
+  const [locationSelection, setLocationSelection] = React4.useState("s3");
+  const [infoStyle, setInfoStyle] = React4.useState("info");
+  const [uploadedFiles, setUploaded] = React4.useState([]);
+  const [UpBtnDisabled, setUpBtnDisabled] = React4.useState(false);
+  const [UpBtnText, setUpBtnText] = React4.useState("Upload");
+  const [uploadBoxWarning, setUploadBoxWarning] = React4.useState(void 0);
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const getExtension = (fileName) => {
+    if (fileName == void 0)
+      return;
+    return fileName.split(".").pop();
+  };
+  const handleConfirm = () => {
+    if (uploadedFiles.length === 0) {
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("Must select files to upload!");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    if (fileAlias.length === 0) {
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("File name can't be empty");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    setOpen(false);
+    upload(uploadedFiles[0], fileAlias, locationSelection).then((response) => {
+      console.log(response);
+      if (response > 0) {
+        setInfoOpen(true);
+        if (response === 200) {
+          setInfoStyle("success");
+          setWarningText("Upload successful");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setOpen(false);
+          }, 1e3);
+          setUpBtnDisabled(false);
+          setUpBtnText("Upload");
+        } else if (response === 413) {
+          setInfoStyle("error");
+          setWarningText("File size limit exceeded");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 2e3);
+        } else if (response === 500) {
+          setInfoStyle("error");
+          setWarningText("Internal server error");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 1500);
+          setOpen(true);
+        } else if (response === 400) {
+          setInfoStyle("warning");
+          setWarningText("File upload cancelled");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 1e3);
+          setOpen(true);
+        } else {
+          setInfoStyle("warning");
+          setWarningText("Unknown status");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 2e3);
+          setOpen(true);
+        }
+      }
+    }).catch((error) => {
+      setUpBtnDisabled(false);
+      setUpBtnText("Upload");
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("Upload unsuccessful: " + error.message);
+      setTimeout(() => setInfoOpen(false), 2500);
+      console.error("Error:", error);
+    });
+    setUpBtnDisabled(true);
+    setUpBtnText("Uploading");
+  };
+  const changeFileName = (e) => {
+    setFileAlias(e.target.value);
+  };
+  function loadFiles(files) {
+    if (files.length == 0) {
+      setInfoOpen(true);
+      setInfoStyle("warning");
+      setWarningText("No file selected");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    if (files.length > 1) {
+      setInfoOpen(true);
+      setInfoStyle("warning");
+      setWarningText("Only accepts one file at a time");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    let file = files[0];
+    setUploaded([file]);
+    function readFile(file2) {
+      setFileOriginalName(file2.name);
+      setFileAlias(file2.name);
+      const units = [
+        "B",
+        "KB",
+        "MB",
+        "GB",
+        "TB",
+        "PB",
+        "EB",
+        "ZB",
+        "YB"
+      ];
+      let numberOfBytes = file2.size;
+      const exponent = Math.min(
+        Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
+        units.length - 1
+      );
+      const approx = numberOfBytes / 1024 ** exponent;
+      const output = exponent === 0 ? `${numberOfBytes} bytes` : `${approx.toFixed(3)} ${units[exponent]}`;
+      setFileSize(output);
+    }
+    readFile(file);
+  }
+  let initialized = false;
+  let fileInput = (inputRef) => {
+    if (initialized)
+      return;
+    inputRef.addEventListener("dragover", function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (e.dataTransfer.files) {
+        let draggedFiles = e.dataTransfer.files;
+        if (draggedFiles.length > 1) {
+          setUploadBoxWarning("Only one file can be uploaded at a time");
+        } else if (fileExtension != void 0 && draggedFiles.length != 0 && getExtension(draggedFiles[0].name) != fileExtension) {
+          setUploadBoxWarning(`Only accepting files with extension ${fileExtension}`);
+        }
+      }
+      e.dataTransfer.dropEffect = "copy";
+    });
+    inputRef.addEventListener("drop", function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setUploadBoxWarning(void 0);
+      let files = e.dataTransfer.files;
+      if (files.length > 1) {
+        setInfoOpen(true);
+        setInfoStyle("warning");
+        setWarningText("Only one file can be uploaded at a time");
+        setTimeout(() => setInfoOpen(false), 2500);
+        return;
+      } else if (fileExtension != void 0 && `.${getExtension(files[0].name)}` != fileExtension) {
+        setInfoOpen(true);
+        setInfoStyle("warning");
+        setWarningText(`Only accepting files with extension ${fileExtension}`);
+        setTimeout(() => setInfoOpen(false), 2500);
+        return;
+      }
+      loadFiles(files);
+    });
+    inputRef.addEventListener("dragleave", () => {
+      setUploadBoxWarning(void 0);
+    });
+    initialized = true;
+  };
+  const fileInputClick = (e) => {
+    const fileElem = document.getElementById("file-window");
+    e.preventDefault();
+    if (fileElem) {
+      fileElem.click();
+    }
+  };
+  const loadSelectedFiles = (e) => {
+    e.preventDefault();
+    const fileElem = document.getElementById("file-window");
+    loadFiles(fileElem.files);
+  };
+  return /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsxs5(Dialog, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ jsx9(DialogTitle, { children: "File Upload" }),
+    /* @__PURE__ */ jsxs5(DialogContent, { children: [
+      /* @__PURE__ */ jsx9(DialogContentText, {}),
+      /* @__PURE__ */ jsxs5(DialogContent, { dividers: true, children: [
+        /* @__PURE__ */ jsx9(
+          Box,
+          {
+            width: 500,
+            height: 250,
+            style: {
+              borderStyle: "dashed",
+              borderRadius: "5pt",
+              borderColor: uploadBoxWarning == void 0 ? "lightGray" : "#BA3C3C"
+            },
+            children: /* @__PURE__ */ jsx9(Typography, { component: "div", style: { height: "100%" }, children: /* @__PURE__ */ jsxs5(
+              Box,
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100%"
+                },
+                onClick: fileInputClick,
+                ref: fileInput,
+                children: [
+                  /* @__PURE__ */ jsxs5(Typography, { variant: "body1", align: "center", style: { marginTop: "auto" }, children: [
+                    "Drag & Drop or Click to Upload Your File Here ",
+                    /* @__PURE__ */ jsx9("sup", { children: "*" })
+                  ] }),
+                  /* @__PURE__ */ jsx9(Typography, { variant: "body2", align: "center", style: { marginTop: "auto", fontSize: "0.8rem", fontStyle: "italic" }, children: "* Warning: The file you are uploading may contain sensitive information protected under privacy laws. Please ensure all PHI is anonymized before proceeding.Before proceeding. The user is the sole responsible for data anonymization." })
+                ]
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            type: "file",
+            id: "file-window",
+            multiple: true,
+            accept: fileExtension == void 0 ? "*" : fileExtension,
+            style: { display: "none" },
+            onChange: loadSelectedFiles
+          }
+        ),
+        /* @__PURE__ */ jsxs5(Box, { component: "form", sx: { "& .MuiTextField-root": { m: 2, width: "25ch", mb: 0 } }, children: [
+          /* @__PURE__ */ jsxs5("div", { children: [
+            template.showFileName && /* @__PURE__ */ jsx9(
+              TextField,
+              {
+                required: true,
+                style: { marginTop: "30px" },
+                label: `File Alias:`,
+                value: fileAlias,
+                variant: "standard",
+                onChange: changeFileName
+              }
+            ),
+            fileOriginalName != "" && /* @__PURE__ */ jsx9(Label_default, { style: { marginLeft: "16px", fontSize: "9pt", color: "#267833" }, children: fileOriginalName }),
+            template.showDatabase && /* @__PURE__ */ jsx9(
+              TextField,
+              {
+                select: true,
+                label: "Database:",
+                defaultValue: "s3",
+                helperText: "Upstream Storage Location",
+                variant: "standard",
+                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ jsx9(MenuItem2, { value: option.value, children: option.label }, option.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { children: [
+            template.showFileSize && /* @__PURE__ */ jsx9(
+              TextField,
+              {
+                label: "File Size:",
+                value: fileSize,
+                InputProps: {
+                  readOnly: true
+                },
+                variant: "standard"
+              }
+            ),
+            /* @__PURE__ */ jsx9(Collapse, { in: infoOpen, children: /* @__PURE__ */ jsx9(Alert, { severity: infoStyle, sx: { m: 1 }, children: warningText }) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5(DialogActions, { children: [
+        /* @__PURE__ */ jsx9(
+          Button2,
+          {
+            color: "inherit",
+            sx: { color: "#333" },
+            disabled: UpBtnDisabled,
+            onClick: handleClose,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          Button2,
+          {
+            variant: "contained",
+            disabled: UpBtnDisabled,
+            onClick: handleConfirm,
+            children: UpBtnText
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/CmrComponents/upload/Upload.tsx
+import axios from "axios";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var CmrUpload = (props) => {
+  let [open, setOpen] = useState4(false);
+  let [uploading, setUploading] = useState4(false);
+  let [progress, setProgress] = useState4(0);
+  let [uploadedFile, setUploadedFile] = useState4(void 0);
+  const upload = async (file, fileAlias, fileDatabase) => {
+    setUploading(true);
+    const onProgress = (progress2) => {
+      let percentage = progress2 * 99;
+      props.uploadProgressed && props.uploadProgressed(+percentage.toFixed(2));
+      setProgress(+percentage.toFixed(2));
+    };
+    if (props.uploadStarted)
+      props.uploadStarted();
+    let status = 0;
+    if (props.beforeUpload != void 0 && !await props.beforeUpload(file)) {
+      if (props.uploadEnded)
+        props.uploadEnded();
+      setUploading(false);
+      return 200;
+    }
+    if (props.preprocess) {
+      let processed = await props.preprocess(file);
+      if (processed == void 0)
+        return failUpload();
+      if (typeof processed == "number") {
+        setUploading(false);
+        return processed;
+      }
+      file = processed;
+    }
+    if (props.uploadHandler != void 0) {
+      status = await props.uploadHandler(file, fileAlias, fileDatabase, onProgress, props.onUploaded);
+      setUploadedFile(props.reusable ? void 0 : file.name);
+    } else if (props.createPayload) {
+      let payload = await props.createPayload(file, fileAlias, fileDatabase);
+      if (payload == void 0) {
+        return failUpload();
+      }
+      payload.config.onUploadProgress = (progressEvent) => {
+        if (progressEvent.total == void 0)
+          return;
+        onProgress(progressEvent.loaded / progressEvent.total);
+      };
+      const res = await axios.post(payload.destination, payload.lambdaFile, payload.config);
+      status = res.status;
+      if (status === 200) {
+        console.log(res.data);
+        await axios.put(res.data.upload_url, payload.file, {
+          headers: {
+            "Content-Type": payload.file.type
+          }
+        });
+        await props.onUploaded(res, payload.file);
+        setUploadedFile(props.reusable ? void 0 : payload.file.name);
+      }
+    } else {
+      return failUpload();
+    }
+    if (props.uploadEnded)
+      props.uploadEnded();
+    setUploading(false);
+    setProgress(0);
+    return status;
+  };
+  function failUpload() {
+    setUploading(false);
+    setProgress(0);
+    if (props.uploadFailed)
+      return props.uploadFailed();
+    return 0;
+  }
+  return /* @__PURE__ */ jsxs6(React5.Fragment, { children: [
+    !uploading ? /* @__PURE__ */ jsxs6(
+      Button3,
+      {
+        fullWidth: props.fullWidth,
+        style: props.style,
+        variant: uploadedFile == void 0 ? "contained" : "outlined",
+        onClick: () => {
+          setOpen(true);
+        },
+        color: props.color || "primary",
+        sx: props.sx,
+        children: [
+          props.changeNameAfterUpload ? uploadedFile === void 0 ? props.uploadButtonName ? props.uploadButtonName : "Upload" : uploadedFile : props.uploadButtonName ? props.uploadButtonName : "Upload",
+          "                "
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs6(Button3, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
+      "Uploading ",
+      progress,
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx10(
+      UploadWindow,
+      {
+        open,
+        setOpen,
+        upload,
+        fileExtension: props.fileExtension,
+        template: { showFileName: true, showFileSize: true }
+      }
+    )
+  ] });
+};
+CmrUpload.defaultProps = {
+  changeNameAfterUpload: true
+};
+var Upload_default = CmrUpload;
+
 // src/CmrTable/CmrTable.tsx
 import { DataGrid } from "@mui/x-data-grid";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -267,7 +734,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx8("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx11(
     DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -292,6 +759,7 @@ var CmrTable_default = CmrTable;
 // src/index.ts
 var CmrTable2 = CmrTable_default;
 export {
+  Upload_default as CMRUpload,
   CmrButton,
   CmrCheckbox,
   Collapse_default as CmrCollapse,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",
@@ -31,6 +31,7 @@
     "@mui/material": "^5.14.2",
     "@mui/x-data-grid": "^6.10.1",
     "antd": "^5.22.1",
+    "axios": "^1.9.0",
     "css-loader": "^7.1.2",
     "sass": "^1.81.0",
     "sass-loader": "^16.0.3",