@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

package/components/input/fileupload/useFileUpload.js

@@ -1,132 +1,114 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFileUpload = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _lodashEs = require("lodash-es");
-var _constants = require("@wavemaker-ai/react-runtime/components/constants");
-var _Utils = require("./Utils");
-var _eventNotifier = require("@wavemaker-ai/react-runtime/core/event-notifier");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useFileUpload = exports.useFileUpload = function useFileUpload(props) {
-  var _listener$appConfig;
-  var name = props.name,
-    _props$multiple = props.multiple,
-    multiple = _props$multiple === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.MULTIPLE : _props$multiple,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? !_constants.fileUploadConstants.DEFAULT_VALUES.ENABLED : _props$disabled,
-    _props$contenttype = props.contenttype,
-    contenttype = _props$contenttype === void 0 ? "" : _props$contenttype,
-    maxfilesize = props.maxfilesize,
-    uploadpath = props.uploadpath,
-    datasource = props.datasource,
-    extensions = props.extensions,
-    filetype = props.filetype,
-    _props$readonly = props.readonly,
-    readonly = _props$readonly === void 0 ? false : _props$readonly,
-    deletedatasource = props.deletedatasource,
-    onError = props.onError,
-    onSelect = props.onSelect,
-    onBeforeselect = props.onBeforeselect,
-    onDelete = props.onDelete,
-    listener = props.listener;
-  var allowedFileUploadExtensions = listener === null || listener === void 0 || (_listener$appConfig = listener.appConfig) === null || _listener$appConfig === void 0 || (_listener$appConfig = _listener$appConfig.appProperties) === null || _listener$appConfig === void 0 ? void 0 : _listener$appConfig.allowedFileUploadExtensions;
-  var fileInputRef = (0, _react.useRef)(null);
-
-  // State for managing confirm dialog
-  var _useState = (0, _react.useState)(false),
-    confirmDialogOpen = _useState[0],
-    setConfirmDialogOpen = _useState[1];
-  var _useState2 = (0, _react.useState)({
-      title: "",
-      message: "",
-      oktext: "OK",
-      canceltext: "Cancel",
-      onOk: function onOk() {},
-      onCancel: function onCancel() {}
-    }),
-    confirmDialogProps = _useState2[0],
-    setConfirmDialogProps = _useState2[1];
-
-  // Function to show confirm dialog
-  var showConfirmDialog = function showConfirmDialog(props) {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { useCallback, useEffect, useRef, useState } from "react";
+import { isEmpty } from "lodash-es";
+import { fileUploadConstants } from "../../constants";
+import { getDefaultChooseFilter, getValidFiles, clearFile, generateFileId } from "./Utils";
+import { eventObserver } from "../../../core/event-notifier";
+const useFileUpload = (props) => {
+  var _a, _b;
+  const {
+    name,
+    multiple = fileUploadConstants.DEFAULT_VALUES.MULTIPLE,
+    disabled = !fileUploadConstants.DEFAULT_VALUES.ENABLED,
+    contenttype = "",
+    maxfilesize,
+    uploadpath,
+    datasource,
+    extensions,
+    filetype,
+    readonly = false,
+    deletedatasource,
+    onError,
+    onSelect,
+    onBeforeselect,
+    onDelete,
+    listener
+  } = props;
+  const allowedFileUploadExtensions = (_b = (_a = listener == null ? void 0 : listener.appConfig) == null ? void 0 : _a.appProperties) == null ? void 0 : _b.allowedFileUploadExtensions;
+  const fileInputRef = useRef(null);
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+  const [confirmDialogProps, setConfirmDialogProps] = useState({
+    title: "",
+    message: "",
+    oktext: "OK",
+    canceltext: "Cancel",
+    onOk: () => {
+    },
+    onCancel: () => {
+    }
+  });
+  const showConfirmDialog = (props2) => {
     setConfirmDialogProps({
-      title: props.title,
-      message: props.message,
-      oktext: props.oktext || "OK",
-      canceltext: props.canceltext || "Cancel",
-      onOk: props.onOk,
-      onCancel: props.onCancel || function () {}
+      title: props2.title,
+      message: props2.message,
+      oktext: props2.oktext || "OK",
+      canceltext: props2.canceltext || "Cancel",
+      onOk: props2.onOk,
+      onCancel: props2.onCancel || (() => {
+      })
     });
     setConfirmDialogOpen(true);
   };
-
-  // Function to close confirm dialog
-  var closeConfirmDialog = function closeConfirmDialog() {
+  const closeConfirmDialog = () => {
     setConfirmDialogOpen(false);
   };
-
-  // Helper function to normalize extensions (handles both space and comma separated)
-  var normalizeExtensions = (0, _react.useCallback)(function (extensionString) {
+  const normalizeExtensions = useCallback((extensionString) => {
     if (!extensionString) return "";
-
-    // Split by both comma and space, then filter out empty strings
-    var extensions = extensionString.split(/[,\s]+/).filter(function (ext) {
-      return ext.trim();
-    });
-    return extensions.map(function (ext) {
-      var trimmedExt = ext.trim();
-      // Handle MIME type patterns (e.g., "image/*")
+    const extensions2 = extensionString.split(/[,\s]+/).filter((ext) => ext.trim());
+    return extensions2.map((ext) => {
+      const trimmedExt = ext.trim();
       if (trimmedExt.includes("/")) {
         return trimmedExt;
       }
-      // Ensure extensions start with a dot
       if (trimmedExt.startsWith(".")) {
         return trimmedExt;
       }
-      return ".".concat(trimmedExt);
+      return `.${trimmedExt}`;
     }).join(",");
   }, []);
-  var getChooseFilter = function getChooseFilter() {
-    var normalizedContenttype = normalizeExtensions(contenttype);
-    var normalizedExtensions = normalizeExtensions(extensions || "");
-    var normalizedFiletype = normalizeExtensions(filetype || "");
-    var defaultFilter = (0, _Utils.getDefaultChooseFilter)(DEFAULT_ALLOWED_EXTENSIONS);
+  const getChooseFilter = () => {
+    const normalizedContenttype = normalizeExtensions(contenttype);
+    const normalizedExtensions = normalizeExtensions(extensions || "");
+    const normalizedFiletype = normalizeExtensions(filetype || "");
+    const defaultFilter = getDefaultChooseFilter(DEFAULT_ALLOWED_EXTENSIONS);
     return normalizedContenttype || normalizedExtensions || normalizedFiletype || defaultFilter;
   };
-  var DEFAULT_ALLOWED_EXTENSIONS = (allowedFileUploadExtensions === null || allowedFileUploadExtensions === void 0 ? void 0 : allowedFileUploadExtensions.split(" ").map(function (item) {
-    return item.trim();
-  }).map(function (item) {
-    return item.endsWith("/*") ? item : ".".concat(item);
-  })) || [];
-  var _useState3 = (0, _react.useState)(function () {
-      return getChooseFilter();
-    }),
-    chooseFilter = _useState3[0],
-    setChooseFilter = _useState3[1];
-  var _useState4 = (0, _react.useState)(false),
-    highlightDropArea = _useState4[0],
-    setHighlightDropArea = _useState4[1];
-  var _useState5 = (0, _react.useState)([]),
-    uploadedFiles = _useState5[0],
-    setUploadedFiles = _useState5[1];
-  var _useState6 = (0, _react.useState)([]),
-    selectedFolders = _useState6[0],
-    setSelectedFolders = _useState6[1];
-  var invokeEventCallback = (0, _react.useCallback)(function (eventName, payload) {
-    var _listener$Widgets;
-    var eventHandler = listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 || (_listener$Widgets = _listener$Widgets[name]) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[eventName];
-    return eventHandler ? eventHandler(payload.$event, listener.Widgets[name], payload.files) || true : true;
-  }, [listener, name]);
-  var fileUploadProgress = function fileUploadProgress(progress) {
-    setUploadedFiles(function (prevFiles) {
-      return prevFiles.map(function (file) {
+  const DEFAULT_ALLOWED_EXTENSIONS = (allowedFileUploadExtensions == null ? void 0 : allowedFileUploadExtensions.split(" ").map((item) => item.trim()).map((item) => item.endsWith("/*") ? item : `.${item}`)) || [];
+  const [chooseFilter, setChooseFilter] = useState(() => {
+    return getChooseFilter();
+  });
+  const [highlightDropArea, setHighlightDropArea] = useState(false);
+  const [uploadedFiles, setUploadedFiles] = useState([]);
+  const [selectedFolders, setSelectedFolders] = useState([]);
+  const invokeEventCallback = useCallback(
+    (eventName, payload) => {
+      var _a2, _b2;
+      const eventHandler = (_b2 = (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]) == null ? void 0 : _b2[eventName];
+      return eventHandler ? eventHandler(payload.$event, listener.Widgets[name], payload.files) || true : true;
+    },
+    [listener, name]
+  );
+  const fileUploadProgress = (progress) => {
+    setUploadedFiles((prevFiles) => {
+      return prevFiles.map((file) => {
         if (file.name === progress.fileName && file.uniqueId === progress.uniqueId) {
           file.progress = progress.progress;
           if (file.progress === 100) {
@@ -143,120 +125,110 @@ var useFileUpload = exports.useFileUpload = function useFileUpload(props) {
       });
     });
   };
-
-  // Setup progress tracking with EventNotifier
-  (0, _react.useEffect)(function () {
-    var progressObs = datasource && datasource._progressObservable;
+  useEffect(() => {
+    const progressObs = datasource && datasource._progressObservable;
     if (progressObs) {
-      progressObs.subscribe(function (progress) {
+      progressObs.subscribe((progress) => {
+        var _a2, _b2;
         fileUploadProgress(progress);
-
-        // Move notifyApp calls outside of setState to avoid render phase issues
         if (progress.progress === 100) {
-          var _listener$App;
-          listener === null || listener === void 0 || (_listener$App = listener.App) === null || _listener$App === void 0 || _listener$App.notifyApp("File uploaded successfully", "Success");
+          (_a2 = listener == null ? void 0 : listener.App) == null ? void 0 : _a2.notifyApp("File uploaded successfully", "Success");
         } else if (progress.errMsg) {
-          var _listener$App2;
-          listener === null || listener === void 0 || (_listener$App2 = listener.App) === null || _listener$App2 === void 0 || _listener$App2.notifyApp("File upload failed", "Error");
+          (_b2 = listener == null ? void 0 : listener.App) == null ? void 0 : _b2.notifyApp("File upload failed", "Error");
         }
       });
     }
-    return function () {
-      var progressObs = datasource && datasource._progressObservable;
-      if (progressObs !== null && progressObs !== void 0 && progressObs.unsubscribe) {
-        progressObs.unsubscribe();
+    return () => {
+      const progressObs2 = datasource && datasource._progressObservable;
+      if (progressObs2 == null ? void 0 : progressObs2.unsubscribe) {
+        progressObs2.unsubscribe();
       }
     };
   }, [invokeEventCallback]);
-  (0, _react.useEffect)(function () {
-    // Normalize extensions to handle both space and comma separated values
-    var selected = getChooseFilter();
+  useEffect(() => {
+    const selected = getChooseFilter();
     setChooseFilter(selected);
   }, [contenttype, extensions, filetype, normalizeExtensions, DEFAULT_ALLOWED_EXTENSIONS]);
-  (0, _react.useEffect)(function () {
-    var _ref, _ref2;
-    var selected = (_ref = (_ref2 = contenttype !== null && contenttype !== void 0 ? contenttype : extensions) !== null && _ref2 !== void 0 ? _ref2 : filetype) !== null && _ref !== void 0 ? _ref : (0, _Utils.getDefaultChooseFilter)(DEFAULT_ALLOWED_EXTENSIONS);
+  useEffect(() => {
+    var _a2, _b2;
+    const selected = (_b2 = (_a2 = contenttype != null ? contenttype : extensions) != null ? _a2 : filetype) != null ? _b2 : getDefaultChooseFilter(DEFAULT_ALLOWED_EXTENSIONS);
     setChooseFilter(selected);
   }, [contenttype, extensions, filetype]);
-  (0, _react.useEffect)(function () {
-    // Add event listeners for drag and drop
+  useEffect(() => {
     if (disabled || readonly) {
       setHighlightDropArea(false);
-      window.removeEventListener("focus", _disableDropZone);
+      window.removeEventListener("focus", disableDropZone);
     } else {
       document.addEventListener("dragover", dragOverCb);
       document.addEventListener("drop", dropCb);
       document.addEventListener("mouseleave", dropCb);
     }
-    return function () {
+    return () => {
       document.removeEventListener("dragover", dragOverCb);
       document.removeEventListener("drop", dropCb);
       document.removeEventListener("mouseleave", dropCb);
     };
   }, [disabled, readonly]);
-  var dragOverCb = function dragOverCb(e) {
+  const dragOverCb = (e) => {
     e.preventDefault();
-    var dropzone = document.getElementById("dropzone");
+    const dropzone = document.getElementById("dropzone");
     if (dropzone) {
       dropzone.classList.add("highlight-drop-box");
     }
   };
-  var dropCb = function dropCb() {
-    var dropzone = document.getElementById("dropzone");
+  const dropCb = () => {
+    const dropzone = document.getElementById("dropzone");
     if (dropzone) {
       dropzone.classList.remove("highlight-drop-box");
     }
     setHighlightDropArea(false);
   };
-  var dragOverHandler = function dragOverHandler(e) {
+  const dragOverHandler = (e) => {
     e.preventDefault();
     e.stopPropagation();
     setHighlightDropArea(true);
   };
-  var _disableDropZone = function disableDropZone() {
+  const disableDropZone = () => {
     setHighlightDropArea(false);
-    window.removeEventListener("focus", _disableDropZone);
+    window.removeEventListener("focus", disableDropZone);
   };
-  var onBeforeSelectEventCall = function onBeforeSelectEventCall($event, $files) {
-    var files = (0, _Utils.getValidFiles)($files, contenttype, extensions || "", filetype || "", chooseFilter, maxfilesize || "10", onError, listener);
-    if (!(0, _lodashEs.isEmpty)(files.errorFiles)) {
+  const onBeforeSelectEventCall = ($event, $files) => {
+    var _a2, _b2, _c, _d;
+    const files = getValidFiles(
+      $files,
+      contenttype,
+      extensions || "",
+      filetype || "",
+      chooseFilter,
+      maxfilesize || "10",
+      onError,
+      listener
+    );
+    if (!isEmpty(files.errorFiles)) {
       invokeEventCallback("error", {
-        $event: _objectSpread(_objectSpread({}, $event), {}, {
-          files: files.errorFiles
-        }),
+        $event: __spreadProps(__spreadValues({}, $event), { files: files.errorFiles }),
         files: files.errorFiles
       });
     }
     if (files.validFiles.length) {
-      var beforeSelectVal = invokeEventCallback("beforeselect", {
-        $event: _objectSpread(_objectSpread({}, $event), {}, {
-          files: files.validFiles
-        }),
+      const beforeSelectVal = invokeEventCallback("beforeselect", {
+        $event: __spreadProps(__spreadValues({}, $event), { files: files.validFiles }),
         files: files.validFiles
       });
       if (onBeforeselect) {
-        var _listener$Widgets2;
-        var event = _objectSpread(_objectSpread({}, $event), {}, {
-          _reactName: "onBeforeselect"
-        });
-        onBeforeselect(event, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name], files.validFiles);
+        const event = __spreadProps(__spreadValues({}, $event), { _reactName: "onBeforeselect" });
+        onBeforeselect(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name], files.validFiles);
       }
-      // Proceed only if neither callback returns false
       if (beforeSelectVal !== false) {
-        var _filesWithIds$, _fileInputRef$current;
-        var filesWithIds = files.validFiles.map(function (file) {
-          var fileWithId = file;
+        const filesWithIds = files.validFiles.map((file) => {
+          const fileWithId = file;
           if (!fileWithId.name) {
             fileWithId.name = file.name;
           }
           if (!fileWithId.size) {
             fileWithId.size = file.size;
           }
-
-          // Add our custom properties
-          fileWithId.uniqueId = (0, _Utils.generateFileId)();
-
-          // Set initial status
+          fileWithId.uniqueId = generateFileId();
           if (datasource) {
             fileWithId.status = "onProgress";
             fileWithId.progress = 0;
@@ -264,151 +236,130 @@ var useFileUpload = exports.useFileUpload = function useFileUpload(props) {
           return fileWithId;
         });
         if (datasource) {
-          datasource._progressObservable = (0, _eventNotifier.eventObserver)();
+          datasource._progressObservable = eventObserver();
           datasource.dataBinding = datasource.dataBinding || {};
           datasource.dataBinding.files = filesWithIds;
           datasource.dataSet = filesWithIds;
         }
-        setUploadedFiles(function (prev) {
-          return multiple ? [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(filesWithIds)) : (0, _toConsumableArray2["default"])(filesWithIds);
-        });
-        listener === null || listener === void 0 || listener.onChange(name, {
-          selectedFiles: filesWithIds
-        });
-        var selectedFile = (_filesWithIds$ = filesWithIds[0]) !== null && _filesWithIds$ !== void 0 ? _filesWithIds$ : (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || (_fileInputRef$current = _fileInputRef$current.files) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current[0];
-        onSelect === null || onSelect === void 0 || onSelect($event, selectedFile, filesWithIds);
+        setUploadedFiles((prev) => multiple ? [...prev, ...filesWithIds] : [...filesWithIds]);
+        listener == null ? void 0 : listener.onChange(name, { selectedFiles: filesWithIds });
+        const selectedFile = (_d = filesWithIds[0]) != null ? _d : (_c = (_b2 = fileInputRef.current) == null ? void 0 : _b2.files) == null ? void 0 : _c[0];
+        onSelect == null ? void 0 : onSelect($event, selectedFile, filesWithIds);
       }
     }
   };
-  var onFileSelect = function onFileSelect(e) {
+  const onFileSelect = (e) => {
     setSelectedFolders([]);
     onBeforeSelectEventCall(e, e.target.files || []);
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
   };
-  var onFileDrop = function onFileDrop(e) {
+  const onFileDrop = (e) => {
+    var _a2, _b2;
     e.preventDefault();
-    var listOfFiles = [];
+    let listOfFiles = [];
     setSelectedFolders([]);
-    var filesData = e.dataTransfer.items;
+    const filesData = e.dataTransfer.items;
     if (filesData.length > 0) {
-      var _loop = function _loop() {
-        var _webkitGetAsEntry, _ref3;
-        // Using explicit type assertion since webkitGetAsEntry is non-standard
-        var entry = (_webkitGetAsEntry = (_ref3 = filesData[i]).webkitGetAsEntry) === null || _webkitGetAsEntry === void 0 ? void 0 : _webkitGetAsEntry.call(_ref3);
+      for (let i = 0; i < filesData.length; i++) {
+        const entry = (_b2 = (_a2 = filesData[i]).webkitGetAsEntry) == null ? void 0 : _b2.call(_a2);
         if (entry && entry.isFile) {
-          var file = filesData[i].getAsFile();
+          const file = filesData[i].getAsFile();
           if (file) listOfFiles.push(file);
         } else if (entry && entry.isDirectory) {
-          var _file = filesData[i].getAsFile();
-          if (_file) setSelectedFolders(function (prev) {
-            return [].concat((0, _toConsumableArray2["default"])(prev), [_file]);
-          });
+          const file = filesData[i].getAsFile();
+          if (file) setSelectedFolders((prev) => [...prev, file]);
         }
-      };
-      for (var i = 0; i < filesData.length; i++) {
-        _loop();
       }
       onBeforeSelectEventCall(e, listOfFiles);
     }
   };
-  var clearSelectedFile = function clearSelectedFile(file) {
-    // setSelectedFilesList((prev) => clearFile(prev as (File & FileUploadState)[], file));
-    setUploadedFiles(function (prev) {
-      return (0, _Utils.clearFile)(prev, file);
-    });
+  const clearSelectedFile = (file) => {
+    setUploadedFiles((prev) => clearFile(prev, file));
   };
-  var triggerFileSelect = function triggerFileSelect() {
+  const triggerFileSelect = () => {
     if (fileInputRef.current && !disabled && !readonly) {
       fileInputRef.current.click();
     }
   };
-  var deleteFileProgress = function deleteFileProgress(file) {
+  const deleteFileProgress = (file) => {
     if (!deletedatasource) return;
-    deletedatasource._deleteFileObservable.subscribe(function (response) {
+    deletedatasource._deleteFileObservable.subscribe((response) => {
       if (response.status === "success") {
-        setUploadedFiles(function (prev) {
-          return prev.filter(function (fileObj) {
-            return file !== fileObj;
-          }) || [];
-        });
-        setSelectedFolders(function (prev) {
-          return prev.filter(function (fileObj) {
-            return file !== fileObj;
-          }) || [];
-        });
+        setUploadedFiles((prev) => prev.filter((fileObj) => file !== fileObj) || []);
+        setSelectedFolders((prev) => prev.filter((fileObj) => file !== fileObj) || []);
       }
     });
   };
-  var onFileDelete = function onFileDelete(e, file) {
+  const onFileDelete = (e, file) => {
     if (!file || readonly) return;
-    var beforeDeleteVal = invokeEventCallback("beforedelete", {
-      $event: file
-    });
+    const beforeDeleteVal = invokeEventCallback("beforedelete", { $event: file });
     if (beforeDeleteVal !== false) {
       showConfirmDialog({
         title: "Delete file",
         message: "Are you sure you want to delete this file?",
         oktext: "Ok",
         canceltext: "Cancel",
-        onOk: function onOk() {
+        onOk: () => {
+          var _a2, _b2, _c, _d, _e;
           try {
             if (deletedatasource) {
-              var _response, _fileResponse$fileNam, _listener$Widgets3, _listener$App3;
-              deletedatasource._deleteFileObservable = (0, _eventNotifier.eventObserver)();
+              deletedatasource._deleteFileObservable = eventObserver();
               deleteFileProgress(file);
-              var fileResponse = (_response = file._response) === null || _response === void 0 ? void 0 : _response[0];
-              var fileName = (_fileResponse$fileNam = fileResponse === null || fileResponse === void 0 ? void 0 : fileResponse.fileName) !== null && _fileResponse$fileNam !== void 0 ? _fileResponse$fileNam : file.name;
+              const fileResponse = (_a2 = file._response) == null ? void 0 : _a2[0];
+              const fileName = (_b2 = fileResponse == null ? void 0 : fileResponse.fileName) != null ? _b2 : file.name;
               deletedatasource.setInput("file", fileName);
-              var event = _objectSpread(_objectSpread({}, e), {}, {
-                _reactName: "onDelete"
-              });
-              onDelete === null || onDelete === void 0 || onDelete(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
-              listener && (listener === null || listener === void 0 || (_listener$App3 = listener.App) === null || _listener$App3 === void 0 ? void 0 : _listener$App3.notifyApp("File deleted successfully", "Success"));
+              const event = __spreadProps(__spreadValues({}, e), { _reactName: "onDelete" });
+              onDelete == null ? void 0 : onDelete(event, (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[name]);
+              listener && ((_d = listener == null ? void 0 : listener.App) == null ? void 0 : _d.notifyApp("File deleted successfully", "Success"));
             }
           } catch (error) {
-            var _listener$App4;
-            listener && (listener === null || listener === void 0 || (_listener$App4 = listener.App) === null || _listener$App4 === void 0 ? void 0 : _listener$App4.notifyApp("Service Call Failed", "Error"));
+            listener && ((_e = listener == null ? void 0 : listener.App) == null ? void 0 : _e.notifyApp("Service Call Failed", "Error"));
           } finally {
             closeConfirmDialog();
           }
         },
-        onCancel: function onCancel() {
+        onCancel: () => {
           closeConfirmDialog();
         }
       });
     }
   };
-  var handleBeforeSelect = (0, _react.useCallback)(function (event, widget, selectedFiles) {
-    onBeforeselect === null || onBeforeselect === void 0 || onBeforeselect(event, widget !== null && widget !== void 0 ? widget : {}, selectedFiles !== null && selectedFiles !== void 0 ? selectedFiles : []);
-  }, [onBeforeselect]);
-  var handleError = (0, _react.useCallback)(function (event, widget, file) {
-    onError === null || onError === void 0 || onError(event, widget, file);
-  }, [onError]);
-  var events = _objectSpread(_objectSpread({}, onBeforeselect ? {
-    onBeforeselect: handleBeforeSelect
-  } : {}), onError ? {
-    onError: handleError
-  } : {});
-  return _objectSpread({
-    fileInputRef: fileInputRef,
-    chooseFilter: chooseFilter,
-    highlightDropArea: highlightDropArea,
-    uploadedFiles: uploadedFiles,
-    selectedFolders: selectedFolders,
-    setSelectedFolders: setSelectedFolders,
-    dragOverHandler: dragOverHandler,
-    onFileSelect: onFileSelect,
-    onFileDrop: onFileDrop,
-    setHighlightDropArea: setHighlightDropArea,
-    clearSelectedFile: clearSelectedFile,
-    triggerFileSelect: triggerFileSelect,
-    onFileDelete: onFileDelete,
+  const handleBeforeSelect = useCallback(
+    (event, widget, selectedFiles) => {
+      onBeforeselect == null ? void 0 : onBeforeselect(event, widget != null ? widget : {}, selectedFiles != null ? selectedFiles : []);
+    },
+    [onBeforeselect]
+  );
+  const handleError = useCallback(
+    (event, widget, file) => {
+      onError == null ? void 0 : onError(event, widget, file);
+    },
+    [onError]
+  );
+  const events = __spreadValues(__spreadValues({}, onBeforeselect ? { onBeforeselect: handleBeforeSelect } : {}), onError ? { onError: handleError } : {});
+  return __spreadValues({
+    fileInputRef,
+    chooseFilter,
+    highlightDropArea,
+    uploadedFiles,
+    selectedFolders,
+    setSelectedFolders,
+    dragOverHandler,
+    onFileSelect,
+    onFileDrop,
+    setHighlightDropArea,
+    clearSelectedFile,
+    triggerFileSelect,
+    onFileDelete,
     // Confirm dialog state and functions
-    confirmDialogOpen: confirmDialogOpen,
-    confirmDialogProps: confirmDialogProps,
-    showConfirmDialog: showConfirmDialog,
-    closeConfirmDialog: closeConfirmDialog
+    confirmDialogOpen,
+    confirmDialogProps,
+    showConfirmDialog,
+    closeConfirmDialog
   }, events);
-};
+};
+export {
+  useFileUpload
+};