@wavemaker/react-runtime 11.14.1-15.6409

package/components/input/fileupload/useFileUpload.js

@@ -0,0 +1,400 @@
+"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/react-runtime/components/constants");
+var _Utils = require("./Utils");
+var _eventNotifier = require("@wavemaker/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) {
+    setConfirmDialogProps({
+      title: props.title,
+      message: props.message,
+      oktext: props.oktext || "OK",
+      canceltext: props.canceltext || "Cancel",
+      onOk: props.onOk,
+      onCancel: props.onCancel || function () {}
+    });
+    setConfirmDialogOpen(true);
+  };
+
+  // Function to close confirm dialog
+  var closeConfirmDialog = function closeConfirmDialog() {
+    setConfirmDialogOpen(false);
+  };
+
+  // Helper function to normalize extensions (handles both space and comma separated)
+  var normalizeExtensions = (0, _react.useCallback)(function (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/*")
+      if (trimmedExt.includes("/")) {
+        return trimmedExt;
+      }
+      // Ensure extensions start with a dot
+      if (trimmedExt.startsWith(".")) {
+        return trimmedExt;
+      }
+      return ".".concat(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);
+    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) {
+        if (file.name === progress.fileName && file.uniqueId === progress.uniqueId) {
+          file.progress = progress.progress;
+          if (file.progress === 100) {
+            file.status = "success";
+          } else {
+            file.status = progress.status;
+            if (progress.errMsg) {
+              file.errMsg = progress.errMsg;
+              file.status = "error";
+            }
+          }
+        }
+        return file;
+      });
+    });
+  };
+
+  // Setup progress tracking with EventNotifier
+  (0, _react.useEffect)(function () {
+    if (datasource && datasource._progressObservable) {
+      datasource._progressObservable.subscribe(function (progress) {
+        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");
+        } 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");
+        }
+      });
+    }
+    return function () {
+      if (datasource && datasource !== null && datasource !== void 0 && datasource._progressObservable) {
+        var _datasource$_progress;
+        datasource === null || datasource === void 0 || (_datasource$_progress = datasource._progressObservable) === null || _datasource$_progress === void 0 || _datasource$_progress.unsubscribe();
+      }
+    };
+  }, [invokeEventCallback]);
+  (0, _react.useEffect)(function () {
+    // Normalize extensions to handle both space and comma separated values
+    var 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);
+    setChooseFilter(selected);
+  }, [contenttype, extensions, filetype]);
+  (0, _react.useEffect)(function () {
+    // Add event listeners for drag and drop
+    if (disabled || readonly) {
+      setHighlightDropArea(false);
+      window.removeEventListener("focus", disableDropZone);
+    } else {
+      document.addEventListener("dragover", dragOverCb);
+      document.addEventListener("drop", dropCb);
+      document.addEventListener("mouseleave", dropCb);
+    }
+    return function () {
+      document.removeEventListener("dragover", dragOverCb);
+      document.removeEventListener("drop", dropCb);
+      document.removeEventListener("mouseleave", dropCb);
+    };
+  }, [disabled, readonly]);
+  var dragOverCb = function dragOverCb(e) {
+    e.preventDefault();
+    var dropzone = document.getElementById("dropzone");
+    if (dropzone) {
+      dropzone.classList.add("highlight-drop-box");
+    }
+  };
+  var dropCb = function dropCb() {
+    var dropzone = document.getElementById("dropzone");
+    if (dropzone) {
+      dropzone.classList.remove("highlight-drop-box");
+    }
+    setHighlightDropArea(false);
+  };
+  var dragOverHandler = function dragOverHandler(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setHighlightDropArea(true);
+  };
+  var disableDropZone = function disableDropZone() {
+    setHighlightDropArea(false);
+    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)) {
+      invokeEventCallback("error", {
+        $event: _objectSpread(_objectSpread({}, $event), {}, {
+          files: files.errorFiles
+        }),
+        files: files.errorFiles
+      });
+    }
+    if (files.validFiles.length) {
+      var beforeSelectVal = invokeEventCallback("beforeselect", {
+        $event: _objectSpread(_objectSpread({}, $event), {}, {
+          files: files.validFiles
+        }),
+        files: files.validFiles
+      });
+      if (beforeSelectVal !== false) {
+        var _fileInputRef$current;
+        var filesWithIds = files.validFiles.map(function (file) {
+          var 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
+          if (datasource) {
+            fileWithId.status = "onProgress";
+            fileWithId.progress = 0;
+          } else {
+            fileWithId.status = "success";
+          }
+          return fileWithId;
+        });
+        if (datasource) {
+          datasource._progressObservable = (0, _eventNotifier.eventObserver)();
+        }
+        setUploadedFiles(function (prev) {
+          return multiple ? [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(filesWithIds)) : (0, _toConsumableArray2["default"])(filesWithIds);
+        });
+        datasource.dataBinding.files = filesWithIds;
+        datasource.dataSet = filesWithIds;
+        listener === null || listener === void 0 || listener.onChange(name, {
+          selectedFiles: filesWithIds
+        });
+        onSelect === null || onSelect === void 0 || onSelect($event, (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || (_fileInputRef$current = _fileInputRef$current.files) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current[0], filesWithIds);
+      }
+    }
+  };
+  var onFileSelect = function onFileSelect(e) {
+    setSelectedFolders([]);
+    onBeforeSelectEventCall(e, e.target.files || []);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  var onFileDrop = function onFileDrop(e) {
+    e.preventDefault();
+    var listOfFiles = [];
+    setSelectedFolders([]);
+    var 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);
+        if (entry && entry.isFile) {
+          var 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]);
+          });
+        }
+      };
+      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);
+    });
+  };
+  var triggerFileSelect = function triggerFileSelect() {
+    if (fileInputRef.current && !disabled && !readonly) {
+      fileInputRef.current.click();
+    }
+  };
+  var deleteFileProgress = function deleteFileProgress(file) {
+    deletedatasource._deleteFileObservable.subscribe(function (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;
+          }) || [];
+        });
+      }
+    });
+  };
+  var onFileDelete = function onFileDelete(e, file) {
+    if (!file || readonly) return;
+    var 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() {
+          try {
+            if (deletedatasource) {
+              var _file$_response, _fileInputRef$current2, _listener$App3;
+              deletedatasource._deleteFileObservable = (0, _eventNotifier.eventObserver)();
+              deleteFileProgress(file);
+              var fileName = ((_file$_response = file._response) === null || _file$_response === void 0 || (_file$_response = _file$_response[0]) === null || _file$_response === void 0 ? void 0 : _file$_response.fileName) || file.name;
+              deletedatasource.setInput("file", fileName);
+              onDelete === null || onDelete === void 0 || onDelete(e, (_fileInputRef$current2 = fileInputRef.current) === null || _fileInputRef$current2 === void 0 || (_fileInputRef$current2 = _fileInputRef$current2.files) === null || _fileInputRef$current2 === void 0 ? void 0 : _fileInputRef$current2[0], fileName);
+              listener && (listener === null || listener === void 0 || (_listener$App3 = listener.App) === null || _listener$App3 === void 0 ? void 0 : _listener$App3.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"));
+          } finally {
+            closeConfirmDialog();
+          }
+        },
+        onCancel: function onCancel() {
+          closeConfirmDialog();
+        }
+      });
+    }
+  };
+  var handleBeforeSelect = (0, _react.useCallback)(function (event, widget, selectedFiles) {
+    onBeforeselect === null || onBeforeselect === void 0 || onBeforeselect(event, widget, 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,
+    // Confirm dialog state and functions
+    confirmDialogOpen: confirmDialogOpen,
+    confirmDialogProps: confirmDialogProps,
+    showConfirmDialog: showConfirmDialog,
+    closeConfirmDialog: closeConfirmDialog
+  }, events);
+};