cloudmr-ux 4.3.9 → 4.4.1

package/dist/CmrComponents/select-upload/SelectUpload.js

@@ -59,6 +59,12 @@ var CMRSelectUpload = function (props) {
     };
     var selectionDialog = _jsxs(Dialog, __assign({ open: open, onClose: handleClose }, { children: [_jsx(DialogTitle, { children: "Select or Upload" }), _jsxs(DialogContent, __assign({ sx: { width: 520 } }, { children: [_jsx(DialogContentText, __assign({ sx: { pl: 1, pr: 1, pb: 0 } }, { children: (uploading) ? "Please wait for the upload to finish." : "" })), _jsx(Box, __assign({ sx: { p: 1 } }, { children: _jsx(Select, { classNamePrefix: "cmr-select", isDisabled: uploading, options: props.fileSelection
                                 .filter(function (file) { return checkExtension(file.fileName, props.fileExtension); })
+                                .sort(function (a, b) {
+                                return a.fileName.localeCompare(b.fileName, undefined, {
+                                    sensitivity: 'base',
+                                    numeric: true
+                                });
+                            })
                                 .map(function (file) { return ({
                                 value: file.id,
                                 label: file.fileName

package/dist/CmrComponents/upload/Upload.js

@@ -180,6 +180,6 @@ var CmrUpload = function (_a) {
                             :
                                 (props.uploadButtonName ? props.uploadButtonName : "Upload"), "                "] }))
                 :
-                    _jsxs(Button, __assign({ fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: 'inherit' }, color: 'primary', disabled: true }, { children: ["Uploading ", progress, "%"] })), _jsx(UploadWindow, { open: open, setOpen: setOpen, upload: upload, fileExtension: props.fileExtension, template: { showFileName: true, showFileSize: true } })] }));
+                    _jsxs(Button, __assign({ fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: 'inherit' }, color: 'primary', disabled: true }, { children: ["Uploading ", progress, "%"] })), _jsx(UploadWindow, { open: open, setOpen: setOpen, upload: upload, maxCount: props.maxCount, fileExtension: props.fileExtension, template: { showFileName: true, showFileSize: true } })] }));
 };
 export default CmrUpload;

package/dist/CmrComponents/upload/UploadWindow.d.ts

@@ -4,6 +4,7 @@ interface UploadWindowProps {
     upload: (file: File, fileAlias: string, fileDatabase: string) => Promise<number>;
     open: boolean;
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    maxCount: number;
     fileExtension?: string | string[];
     template?: {
         showFileName?: boolean;
@@ -11,5 +12,5 @@ interface UploadWindowProps {
         showFileSize?: boolean;
     };
 }
-export default function CmrUploadWindow({ upload, open, setOpen, fileExtension, template, }: UploadWindowProps): import("react/jsx-runtime").JSX.Element;
+export default function CmrUploadWindow({ upload, open, setOpen, maxCount, fileExtension, template, }: UploadWindowProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/CmrComponents/upload/UploadWindow.js

@@ -9,6 +9,51 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Button from '@mui/material/Button';
@@ -20,25 +65,72 @@ 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 } from "@mui/material";
+import { Alert, Collapse, IconButton, List, ListItem, ListItemText, MenuItem } from "@mui/material";
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import './Upload.css';
 import CmrLabel from "../label/Label";
+function formatFileSize(numberOfBytes) {
+    var units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    var exponent = Math.min(Math.floor(Math.log(numberOfBytes) / Math.log(1024)), units.length - 1);
+    var approx = numberOfBytes / Math.pow(1024, exponent);
+    return exponent === 0
+        ? "".concat(numberOfBytes, " bytes")
+        : "".concat(approx.toFixed(3), " ").concat(units[exponent]);
+}
+function responseStatusMessage(response) {
+    if (response === 200) {
+        return { style: 'success', text: 'Upload successful', reopen: false };
+    }
+    if (response === 413) {
+        return { style: 'error', text: 'File size limit exceeded', reopen: true };
+    }
+    if (response === 500) {
+        return { style: 'error', text: 'Internal server error', reopen: true };
+    }
+    if (response === 400) {
+        return { style: 'warning', text: 'File upload cancelled', reopen: true };
+    }
+    return { style: 'warning', text: 'Unknown status', reopen: true };
+}
 export default function CmrUploadWindow(_a) {
-    var upload = _a.upload, open = _a.open, setOpen = _a.setOpen, fileExtension = _a.fileExtension, _b = _a.template, template = _b === void 0 ? { showFileName: true, showDatabase: true, showFileSize: true } : _b;
-    var _c = React.useState(''), fileOriginalName = _c[0], setFileOriginalName = _c[1];
-    var _d = React.useState('/'), fileAlias = _d[0], setFileAlias = _d[1];
-    var _e = React.useState('0 MB'), fileSize = _e[0], setFileSize = _e[1];
-    var _f = React.useState('Unknown Status'), warningText = _f[0], setWarningText = _f[1];
-    var _g = React.useState(false), infoOpen = _g[0], setInfoOpen = _g[1];
-    var _h = React.useState('s3'), locationSelection = _h[0], setLocationSelection = _h[1];
-    var _j = React.useState('info'), infoStyle = _j[0], setInfoStyle = _j[1];
-    var _k = React.useState([]), uploadedFiles = _k[0], setUploaded = _k[1];
-    var _l = React.useState(false), UpBtnDisabled = _l[0], setUpBtnDisabled = _l[1];
-    var _m = React.useState('Upload'), UpBtnText = _m[0], setUpBtnText = _m[1];
-    var _o = React.useState(undefined), uploadBoxWarning = _o[0], setUploadBoxWarning = _o[1];
-    var handleClickOpen = function () {
-        setOpen(true);
+    var _this = this;
+    var upload = _a.upload, open = _a.open, setOpen = _a.setOpen, maxCount = _a.maxCount, fileExtension = _a.fileExtension, _b = _a.template, template = _b === void 0 ? { showFileName: true, showDatabase: true, showFileSize: true } : _b;
+    var _c = React.useState(''), fileAlias = _c[0], setFileAlias = _c[1];
+    var _d = React.useState('0 MB'), fileSize = _d[0], setFileSize = _d[1];
+    var _e = React.useState('Unknown Status'), warningText = _e[0], setWarningText = _e[1];
+    var _f = React.useState(false), infoOpen = _f[0], setInfoOpen = _f[1];
+    var locationSelection = React.useState('s3')[0];
+    var _g = React.useState('info'), infoStyle = _g[0], setInfoStyle = _g[1];
+    var _h = React.useState([]), selectedFiles = _h[0], setSelectedFiles = _h[1];
+    var _j = React.useState(false), UpBtnDisabled = _j[0], setUpBtnDisabled = _j[1];
+    var _k = React.useState('Upload'), UpBtnText = _k[0], setUpBtnText = _k[1];
+    var _l = React.useState(undefined), uploadBoxWarning = _l[0], setUploadBoxWarning = _l[1];
+    var fileInputRef = React.useRef(null);
+    var allowsMultiple = maxCount > 1;
+    var showAlert = function (style, text, durationMs) {
+        if (durationMs === void 0) { durationMs = 2500; }
+        setInfoOpen(true);
+        setInfoStyle(style);
+        setWarningText(text);
+        setTimeout(function () { return setInfoOpen(false); }, durationMs);
+    };
+    var resetSelection = function () {
+        setSelectedFiles([]);
+        setFileAlias('');
+        setFileSize('0 MB');
+        setUploadBoxWarning(undefined);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
     };
+    React.useEffect(function () {
+        if (open) {
+            resetSelection();
+            setUpBtnDisabled(false);
+            setUpBtnText('Upload');
+            setInfoOpen(false);
+        }
+    }, [open]);
     var handleClose = function () {
         setOpen(false);
     };
@@ -49,238 +141,213 @@ export default function CmrUploadWindow(_a) {
         if (Array.isArray(allowed)) {
             return allowed.some(function (ext) { return name.endsWith(ext.startsWith('.') ? ext : '.' + ext); });
         }
+        return name.endsWith(allowed.startsWith('.') ? allowed : '.' + allowed);
+    };
+    var INVALID_ALIAS_REGEX = /[ ,:%><]/;
+    var syncSingleFileFields = function (files) {
+        if (files.length === 1) {
+            setFileAlias(files[0].name);
+            setFileSize(formatFileSize(files[0].size));
+        }
+        else if (files.length > 1) {
+            var totalBytes = files.reduce(function (sum, f) { return sum + f.size; }, 0);
+            setFileSize(formatFileSize(totalBytes));
+        }
         else {
-            return name.endsWith(allowed.startsWith('.') ? allowed : '.' + allowed);
+            setFileAlias('');
+            setFileSize('0 MB');
         }
     };
-    var getExtension = function (fileName) {
-        if (fileName == undefined)
-            return;
-        return fileName.split('.').pop();
-    };
-    var INVALID_ALIAS_REGEX = /[ ,:%><]/;
-    var handleConfirm = function () {
-        if (uploadedFiles.length === 0) {
-            setInfoOpen(true);
-            setInfoStyle('error');
-            setWarningText('Must select files to upload!');
-            setTimeout(function () { return setInfoOpen(false); }, 2500);
-            return;
+    var filterAndCapFiles = function (incoming) {
+        var files = __spreadArray([], incoming, true);
+        if (fileExtension !== undefined) {
+            var rejected = files.filter(function (f) { return !checkExtension(f.name, fileExtension); });
+            if (rejected.length > 0) {
+                showAlert('warning', rejected.length === 1
+                    ? "\"".concat(rejected[0].name, "\" has an unsupported extension")
+                    : "".concat(rejected.length, " file(s) skipped due to unsupported extension"), 4000);
+            }
+            files = files.filter(function (f) { return checkExtension(f.name, fileExtension); });
+        }
+        if (files.length === 0) {
+            showAlert('warning', 'No valid files selected');
+            return [];
+        }
+        if (files.length > maxCount) {
+            showAlert('warning', maxCount === 1
+                ? 'Only one file can be uploaded at a time'
+                : "Only the first ".concat(maxCount, " files will be uploaded"), 4000);
+            files = files.slice(0, maxCount);
         }
-        if (fileAlias.length === 0) {
-            setInfoOpen(true);
-            setInfoStyle('error');
-            setWarningText("File name can't be empty");
-            setTimeout(function () { return setInfoOpen(false); }, 2500);
+        return files;
+    };
+    var loadFiles = function (incoming) {
+        var raw = Array.from(incoming);
+        if (raw.length === 0) {
+            showAlert('warning', 'No file selected');
             return;
         }
-        // Validate File Alias characters
-        if (INVALID_ALIAS_REGEX.test(fileAlias)) {
-            setInfoOpen(true);
-            setInfoStyle('error');
-            setWarningText("Alias contains invalid characters ( , : % > < or spaces )");
-            setTimeout(function () { return setInfoOpen(false); }, 10000);
+        var files = filterAndCapFiles(raw);
+        if (files.length === 0) {
             return;
         }
-        setOpen(false);
-        upload(uploadedFiles[0], fileAlias, locationSelection).then(function (response) {
-            console.log(response);
-            //Update image with another ajax
-            if (response > 0) {
-                setInfoOpen(true);
-                if (response === 200) {
-                    setInfoStyle('success');
-                    setWarningText("Upload successful");
-                    setTimeout(function () {
-                        setInfoOpen(false);
-                        setOpen(false);
-                    }, 1000);
+        setSelectedFiles(files);
+        syncSingleFileFields(files);
+        setUploadBoxWarning(undefined);
+    };
+    var removeFileAt = function (index) {
+        setSelectedFiles(function (prev) {
+            var next = prev.filter(function (_, i) { return i !== index; });
+            syncSingleFileFields(next);
+            return next;
+        });
+    };
+    var handleConfirm = function () { return __awaiter(_this, void 0, void 0, function () {
+        var isSingle, alias, total, successCount, lastFailure, i, file, fileAliasForUpload, response, error_1;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (selectedFiles.length === 0) {
+                        showAlert('error', 'Must select files to upload!');
+                        return [2 /*return*/];
+                    }
+                    isSingle = selectedFiles.length === 1;
+                    alias = isSingle ? fileAlias : '';
+                    if (isSingle) {
+                        if (alias.length === 0) {
+                            showAlert('error', "File name can't be empty");
+                            return [2 /*return*/];
+                        }
+                        if (INVALID_ALIAS_REGEX.test(alias)) {
+                            showAlert('error', 'Alias contains invalid characters ( , : % > < or spaces )', 10000);
+                            return [2 /*return*/];
+                        }
+                    }
+                    setUpBtnDisabled(true);
+                    setUpBtnText('Uploading');
+                    setOpen(false);
+                    total = selectedFiles.length;
+                    successCount = 0;
+                    lastFailure = null;
+                    i = 0;
+                    _c.label = 1;
+                case 1:
+                    if (!(i < total)) return [3 /*break*/, 6];
+                    file = selectedFiles[i];
+                    fileAliasForUpload = isSingle ? alias : file.name;
+                    if (total > 1) {
+                        setUpBtnText("Uploading ".concat(i + 1, "/").concat(total));
+                    }
+                    _c.label = 2;
+                case 2:
+                    _c.trys.push([2, 4, , 5]);
+                    return [4 /*yield*/, upload(file, fileAliasForUpload, locationSelection)];
+                case 3:
+                    response = _c.sent();
+                    if (response === 200) {
+                        successCount++;
+                    }
+                    else {
+                        lastFailure = responseStatusMessage(response);
+                    }
+                    return [3 /*break*/, 5];
+                case 4:
+                    error_1 = _c.sent();
+                    lastFailure = {
+                        style: 'error',
+                        text: "Upload unsuccessful: ".concat(error_1 instanceof Error ? error_1.message : String(error_1)),
+                        reopen: true
+                    };
+                    return [3 /*break*/, 5];
+                case 5:
+                    i++;
+                    return [3 /*break*/, 1];
+                case 6:
                     setUpBtnDisabled(false);
                     setUpBtnText('Upload');
-                }
-                else if (response === 413) {
-                    setInfoStyle('error');
-                    setWarningText("File size limit exceeded");
-                    setTimeout(function () {
-                        setInfoOpen(false);
-                        setUpBtnDisabled(false);
-                        setUpBtnText('Upload');
-                    }, 2000);
-                }
-                else if (response === 500) {
-                    setInfoStyle('error');
-                    setWarningText("Internal server error");
-                    setTimeout(function () {
-                        setInfoOpen(false);
-                        setUpBtnDisabled(false);
-                        setUpBtnText('Upload');
-                    }, 1500);
-                    setOpen(true);
-                }
-                else if (response === 400) {
-                    setInfoStyle('warning');
-                    setWarningText("File upload cancelled");
-                    setTimeout(function () {
-                        setInfoOpen(false);
-                        setUpBtnDisabled(false);
-                        setUpBtnText('Upload');
-                    }, 1000);
-                    setOpen(true);
-                }
-                else {
-                    setInfoStyle('warning');
-                    setWarningText("Unknown status");
-                    setTimeout(function () {
-                        setInfoOpen(false);
-                        setUpBtnDisabled(false);
-                        setUpBtnText('Upload');
-                    }, 2000);
-                    setOpen(true);
-                }
+                    resetSelection();
+                    if (successCount === total) {
+                        showAlert('success', total === 1 ? 'Upload successful' : "".concat(total, " files uploaded successfully"), 2000);
+                    }
+                    else if (successCount === 0) {
+                        setOpen(true);
+                        showAlert((_a = lastFailure === null || lastFailure === void 0 ? void 0 : lastFailure.style) !== null && _a !== void 0 ? _a : 'error', (_b = lastFailure === null || lastFailure === void 0 ? void 0 : lastFailure.text) !== null && _b !== void 0 ? _b : 'Upload failed', 4000);
+                    }
+                    else {
+                        setOpen(true);
+                        showAlert('warning', "".concat(successCount, " of ").concat(total, " files uploaded successfully"), 4000);
+                    }
+                    return [2 /*return*/];
             }
-        })["catch"](function (error) {
-            setUpBtnDisabled(false);
-            setUpBtnText('Upload');
-            setInfoOpen(true);
-            setInfoStyle('error');
-            setWarningText("Upload unsuccessful: " + error.message);
-            setTimeout(function () { return setInfoOpen(false); }, 2500);
-            console.error('Error:', error);
         });
-        setUpBtnDisabled(true);
-        setUpBtnText('Uploading');
-    };
+    }); };
     var changeFileName = function (e) {
-        // @ts-ignore
         setFileAlias(e.target.value);
     };
-    function loadFiles(files) {
-        if (files.length == 0) {
-            setInfoOpen(true);
-            setInfoStyle('warning');
-            setWarningText('No file selected');
-            setTimeout(function () { return setInfoOpen(false); }, 2500);
-            return;
-        }
-        if (files.length > 1) {
-            setInfoOpen(true);
-            setInfoStyle('warning');
-            setWarningText('Only accepts one file at a time');
-            setTimeout(function () { return setInfoOpen(false); }, 2500);
-            return;
-        }
-        var file = files[0];
-        setUploaded([file]);
-        // let reader = new FileReader();
-        // reader.onload =
-        function readFile(file) {
-            setFileOriginalName(file.name);
-            setFileAlias(file.name);
-            var units = [
-                "B",
-                "KB",
-                "MB",
-                "GB",
-                "TB",
-                "PB",
-                "EB",
-                "ZB",
-                "YB",
-            ];
-            var numberOfBytes = file.size;
-            var exponent = Math.min(Math.floor(Math.log(numberOfBytes) / Math.log(1024)), units.length - 1);
-            var approx = numberOfBytes / Math.pow(1024, exponent);
-            var output = exponent === 0
-                ? "".concat(numberOfBytes, " bytes")
-                : "".concat(approx.toFixed(3), " ").concat(units[exponent]);
-            setFileSize(output);
-        }
-        readFile(file); // start reading the file data.
-    }
-    var initialized = false;
-    var fileInput = function (inputRef) {
-        if (initialized)
-            return;
-        inputRef.addEventListener('dragover', function (e) {
-            e.stopPropagation();
-            e.preventDefault();
-            // @ts-ignore
-            if (e.dataTransfer.files) {
-                // @ts-ignore
-                var draggedFiles = e.dataTransfer.files;
-                if (draggedFiles.length > 1) {
-                    setUploadBoxWarning('Only one file can be uploaded at a time');
-                }
-                else if (fileExtension != undefined && draggedFiles.length !== 0 &&
-                    !checkExtension(draggedFiles[0].name, fileExtension)) {
-                    setUploadBoxWarning("Only accepting files with extension(s): ".concat(Array.isArray(fileExtension) ? fileExtension.join(', ') : fileExtension));
-                }
+    var handleDragOver = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            var dragged = Array.from(e.dataTransfer.files);
+            if (maxCount === 1 && dragged.length > 1) {
+                setUploadBoxWarning('Only one file can be uploaded at a time');
             }
-            // @ts-ignore
-            e.dataTransfer.dropEffect = 'copy';
-        });
-        // Get file data on drop
-        inputRef.addEventListener('drop', function (e) {
-            e.stopPropagation();
-            e.preventDefault();
-            // setUploadBoxWarning(undefined);
-            setTimeout(function () {
-                setUploadBoxWarning(undefined);
-            }, 10000);
-            // @ts-ignore
-            var files = e.dataTransfer.files; // Array of all files
-            if (files.length > 1) {
-                setInfoOpen(true);
-                setInfoStyle('warning');
-                setWarningText('Only one file can be uploaded at a time');
-                setTimeout(function () { return setInfoOpen(false); }, 2500);
-                return;
+            else if (maxCount > 1 && dragged.length > maxCount) {
+                setUploadBoxWarning("You can upload up to ".concat(maxCount, " files at a time"));
             }
             else if (fileExtension !== undefined &&
-                !checkExtension(files[0].name, fileExtension)) {
-                setInfoOpen(true);
-                setInfoStyle('warning');
-                setWarningText("Only accepting files with extension(s): ".concat(Array.isArray(fileExtension) ? fileExtension.join(', ') : fileExtension));
-                setTimeout(function () { return setInfoOpen(false); }, 2500);
-                return;
+                dragged.some(function (f) { return !checkExtension(f.name, fileExtension); })) {
+                setUploadBoxWarning("Only accepting files with extension(s): ".concat(Array.isArray(fileExtension) ? fileExtension.join(', ') : fileExtension));
             }
-            // @ts-ignore
-            loadFiles(files);
-        });
-        inputRef.addEventListener('dragleave', function () {
-            setUploadBoxWarning(undefined);
-        });
-        initialized = true;
+            else {
+                setUploadBoxWarning(undefined);
+            }
+        }
+        e.dataTransfer.dropEffect = 'copy';
     };
-    var fileInputClick = function (e) {
-        var fileElem = document.getElementById("file-window");
+    var handleDrop = function (e) {
         e.preventDefault();
-        if (fileElem) {
-            fileElem.click();
+        e.stopPropagation();
+        setTimeout(function () { return setUploadBoxWarning(undefined); }, 10000);
+        if (e.dataTransfer.files) {
+            loadFiles(e.dataTransfer.files);
         }
     };
+    var handleDragLeave = function () {
+        setUploadBoxWarning(undefined);
+    };
+    var fileInputClick = function (e) {
+        var _a;
+        e.preventDefault();
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
     var loadSelectedFiles = function (e) {
         e.preventDefault();
-        var fileElem = document.getElementById('file-window');
-        // @ts-ignore
-        loadFiles(fileElem.files);
+        if (e.target.files) {
+            loadFiles(e.target.files);
+        }
     };
-    // @ts-ignore
-    return (_jsx("div", { children: _jsxs(Dialog, __assign({ open: open, onClose: handleClose }, { children: [_jsx(DialogTitle, { children: "File Upload" }), _jsxs(DialogContent, { children: [_jsx(DialogContentText, {}), _jsxs(DialogContent, __assign({ dividers: true }, { children: [_jsx(Box, __assign({ width: 500, height: 250, style: {
+    var dropZoneLabel = allowsMultiple
+        ? "Drag & Drop or Click to Upload Up to ".concat(maxCount, " Files Here")
+        : 'Drag & Drop or Click to Upload Your File Here';
+    return (_jsx("div", { children: _jsxs(Dialog, __assign({ open: open, onClose: handleClose, maxWidth: "sm", fullWidth: true }, { children: [_jsx(DialogTitle, { children: "File Upload" }), _jsxs(DialogContent, { children: [_jsx(DialogContentText, {}), _jsxs(DialogContent, __assign({ dividers: true }, { children: [_jsx(Box, __assign({ width: "100%", minHeight: 250, style: {
                                         borderStyle: 'dashed',
                                         borderRadius: '5pt',
-                                        borderColor: (uploadBoxWarning == undefined) ? 'lightGray' : '#BA3C3C'
+                                        borderColor: uploadBoxWarning == undefined ? 'lightGray' : '#BA3C3C'
                                     } }, { children: _jsx(Typography, __assign({ component: "div", style: { height: '100%' } }, { children: _jsxs(Box, __assign({ style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 justifyContent: 'center',
                                                 alignItems: 'center',
-                                                height: '100%'
-                                            }, onClick: fileInputClick, ref: fileInput }, { children: [_jsxs(Typography, __assign({ variant: "body1", align: "center", style: { marginTop: 'auto' } }, { children: ["Drag & Drop or Click to Upload Your File Here ", _jsx("sup", { children: "*" })] })), _jsx(Typography, __assign({ 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." }))] })) })) })), _jsx("input", { type: "file", id: "file-window", multiple: true, accept: fileExtension === undefined
+                                                height: '100%',
+                                                minHeight: 250,
+                                                cursor: 'pointer'
+                                            }, onClick: fileInputClick, onDragOver: handleDragOver, onDrop: handleDrop, onDragLeave: handleDragLeave }, { children: [_jsxs(Typography, __assign({ variant: "body1", align: "center", style: { marginTop: 'auto' } }, { children: [dropZoneLabel, " ", _jsx("sup", { children: "*" })] })), _jsx(Typography, __assign({ 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." }))] })) })) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: allowsMultiple, accept: fileExtension === undefined
                                         ? '*'
                                         : Array.isArray(fileExtension)
                                             ? fileExtension.join(',')
-                                            : fileExtension, style: { display: 'none' }, onChange: loadSelectedFiles }), _jsxs(Box, __assign({ component: "form", sx: { '& .MuiTextField-root': { m: 2, width: '25ch', mb: 0 } } }, { children: [_jsxs("div", { children: [template.showFileName && (_jsx(TextField, { required: true, style: { marginTop: '30px' }, label: "File Alias:", value: fileAlias, variant: "standard", onChange: changeFileName })), fileOriginalName != '' && _jsx(CmrLabel, __assign({ style: { marginLeft: '16px', fontSize: '9pt', color: '#267833' } }, { children: fileOriginalName })), template.showDatabase && (_jsx(TextField, __assign({ select: true, label: "Database:", defaultValue: "s3", helperText: "Upstream Storage Location", variant: "standard" }, { children: [{ value: 's3', label: 'S3' }].map(function (option) { return (_jsx(MenuItem, __assign({ value: option.value }, { children: option.label }), option.value)); }) })))] }), _jsxs("div", { children: [template.showFileSize && (_jsx(TextField, { label: "File Size:", value: fileSize, InputProps: {
+                                            : fileExtension, style: { display: 'none' }, onChange: loadSelectedFiles }), selectedFiles.length > 1 && (_jsx(Box, __assign({ sx: { mt: 2, maxHeight: 180, overflowY: 'auto', border: '1px solid #E6E6EA', borderRadius: 1 } }, { children: _jsx(List, __assign({ dense: true, disablePadding: true }, { children: selectedFiles.map(function (file, index) { return (_jsx(ListItem, __assign({ secondaryAction: _jsx(IconButton, __assign({ edge: "end", "aria-label": "remove", onClick: function () { return removeFileAt(index); } }, { children: _jsx(DeleteOutlineIcon, { fontSize: "small" }) })) }, { children: _jsx(ListItemText, { primary: file.name, secondary: formatFileSize(file.size) }) }), "".concat(file.name, "-").concat(file.lastModified, "-").concat(index))); }) })) }))), _jsxs(Box, __assign({ component: "form", sx: { '& .MuiTextField-root': { m: 2, width: '25ch', mb: 0 } } }, { children: [_jsxs("div", { children: [template.showFileName && selectedFiles.length === 1 && (_jsx(TextField, { required: true, style: { marginTop: '30px' }, label: "File Alias:", value: fileAlias, variant: "standard", onChange: changeFileName })), selectedFiles.length === 1 && (_jsx(CmrLabel, __assign({ style: { marginLeft: '16px', fontSize: '9pt', color: '#267833' } }, { children: selectedFiles[0].name }))), template.showFileName && selectedFiles.length > 1 && (_jsxs(CmrLabel, __assign({ style: { marginLeft: '16px', marginTop: '16px', fontSize: '9pt', color: '#267833' } }, { children: [selectedFiles.length, " files selected \u2014 each will upload using its original filename"] }))), template.showDatabase && (_jsx(TextField, __assign({ select: true, label: "Database:", defaultValue: "s3", helperText: "Upstream Storage Location", variant: "standard" }, { children: [{ value: 's3', label: 'S3' }].map(function (option) { return (_jsx(MenuItem, __assign({ value: option.value }, { children: option.label }), option.value)); }) })))] }), _jsxs("div", { children: [template.showFileSize && selectedFiles.length > 0 && (_jsx(TextField, { label: selectedFiles.length > 1 ? 'Total Size:' : 'File Size:', value: fileSize, InputProps: {
                                                         readOnly: true
-                                                    }, variant: "standard" })), _jsx(Collapse, __assign({ "in": infoOpen }, { children: _jsx(Alert, __assign({ severity: infoStyle, sx: { m: 1 } }, { children: warningText })) }))] })] }))] })), _jsxs(DialogActions, { children: [_jsx(Button, __assign({ variant: "outlined", disabled: UpBtnDisabled, onClick: handleClose }, { children: "Cancel" })), _jsx(Button, __assign({ variant: 'contained', disabled: UpBtnDisabled, onClick: handleConfirm }, { children: UpBtnText }))] })] })] })) }));
+                                                    }, variant: "standard" })), _jsx(Collapse, __assign({ "in": infoOpen }, { children: _jsx(Alert, __assign({ severity: infoStyle, sx: { m: 1 } }, { children: warningText })) }))] })] }))] })), _jsxs(DialogActions, { children: [_jsx(Button, __assign({ variant: "outlined", disabled: UpBtnDisabled, onClick: handleClose }, { children: "Cancel" })), _jsxs(Button, __assign({ variant: "contained", disabled: UpBtnDisabled || selectedFiles.length === 0, onClick: handleConfirm }, { children: [UpBtnText, selectedFiles.length > 1 ? " (".concat(selectedFiles.length, ")") : ''] }))] })] })] })) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "4.3.9",
+  "version": "4.4.1",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",