@scaleflex/widget-provider-views 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v0.1.2...v0.2.0) (2025-08-05)
+
+
+### Features
+
+* implement the recursive remote upload for 3rd parties [FRA-1343] ([4db5cba](https://code.scaleflex.cloud/scaleflex/widget/commits/4db5cba125d155b1d1ab6cdbc68c28ae07d78f4c))
+
+
+
+
+
+## [0.1.2](https://code.scaleflex.cloud/scaleflex/widget/compare/v0.1.1...v0.1.2) (2025-07-30)
+
+**Note:** Version bump only for package @scaleflex/widget-provider-views
+
+
+
+
+
 ## [0.1.1](https://code.scaleflex.cloud/scaleflex/widget/compare/v0.1.0...v0.1.1) (2025-07-28)
 
 **Note:** Version bump only for package @scaleflex/widget-provider-views

package/lib/components/FolderImportProgress/FolderImportProgress.styled.js

@@ -0,0 +1,50 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { keyframes } from 'styled-components';
+import { PC, FV } from '@scaleflex/widget-common';
+import { Button } from '@scaleflex/ui/core';
+var dotsLoaderAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    color: #6879eb;\n    box-shadow: 10px 0 #d1d5db, -10px 0 #6879eb;\n    opacity: 1;\n  }\n  50% {\n    color: #d1d5db;\n    box-shadow: 10px 0 #6879eb, -10px 0 #d1d5db;\n    opacity: 0.6;\n  }\n  100% {\n    color: #d1d5db;\n    box-shadow: 10px 0 #d1d5db, -10px 0 #6879eb;\n    opacity: 0.2;\n  }\n"])));
+var ProgressOverlay = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  top: 48px; // height of the header\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1200;\n  background: rgba(255, 255, 255, 0.75);\n  backdrop-filter: blur(2px);\n"])));
+var ProgressWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin: auto;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  position: sticky;\n  box-sizing: border-box;\n"])));
+var ProgressContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  padding: 32px;\n  background: ", ";\n  border-radius: 12px;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n  min-width: 300px;\n  text-align: center;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette[PC.BackgroundSecondary];
+});
+var ProgressLabel = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  margin-bottom: 8px;\n"])), function (_ref2) {
+  var typography = _ref2.theme.typography;
+  return typography.font[FV.LabelLarge];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette[PC.TextPrimary];
+});
+var ProgressStats = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 32px;\n  align-items: center;\n"])));
+var StatItem = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n"])));
+var StatNumber = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  font-weight: 600;\n"])), function (_ref4) {
+  var typography = _ref4.theme.typography;
+  return typography.font[FV.HeadingLarge];
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.palette[PC.AccentStatePrimary];
+});
+var StatLabel = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n"])), function (_ref6) {
+  var typography = _ref6.theme.typography;
+  return typography.font[FV.LabelSmall];
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.palette[PC.TextSecondary];
+});
+var DotsLoader = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #6879eb;\n  display: flex;\n  box-sizing: border-box;\n  animation: ", " 1.5s linear infinite;\n"])), dotsLoaderAnimation);
+var CancelButton = styled(Button)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 12px;\n"])));
+var Styled = {
+  ProgressOverlay: ProgressOverlay,
+  ProgressWrapper: ProgressWrapper,
+  ProgressContent: ProgressContent,
+  ProgressLabel: ProgressLabel,
+  ProgressStats: ProgressStats,
+  StatItem: StatItem,
+  StatNumber: StatNumber,
+  StatLabel: StatLabel,
+  DotsLoader: DotsLoader,
+  CancelButton: CancelButton
+};
+export default Styled;

package/lib/components/FolderImportProgress/index.js

@@ -0,0 +1,50 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["foldersCount", "filesCount", "message", "i18n", "cancel"];
+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) { _defineProperty(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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import Styled from './FolderImportProgress.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FolderImportProgress = function FolderImportProgress(_ref) {
+  var _ref$foldersCount = _ref.foldersCount,
+    foldersCount = _ref$foldersCount === void 0 ? 0 : _ref$foldersCount,
+    _ref$filesCount = _ref.filesCount,
+    filesCount = _ref$filesCount === void 0 ? 0 : _ref$filesCount,
+    message = _ref.message,
+    i18n = _ref.i18n,
+    cancel = _ref.cancel,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Styled.ProgressOverlay, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/_jsx(Styled.ProgressWrapper, {
+      children: /*#__PURE__*/_jsxs(Styled.ProgressContent, {
+        children: [/*#__PURE__*/_jsx(Styled.ProgressLabel, {
+          children: message
+        }), /*#__PURE__*/_jsxs(Styled.ProgressStats, {
+          children: [/*#__PURE__*/_jsxs(Styled.StatItem, {
+            children: [/*#__PURE__*/_jsx(Styled.StatNumber, {
+              children: foldersCount
+            }), /*#__PURE__*/_jsx(Styled.StatLabel, {
+              children: i18n('remoteUploadFolderImportProgressFoldersLabel')
+            })]
+          }), /*#__PURE__*/_jsxs(Styled.StatItem, {
+            children: [/*#__PURE__*/_jsx(Styled.StatNumber, {
+              children: filesCount
+            }), /*#__PURE__*/_jsx(Styled.StatLabel, {
+              children: i18n('remoteUploadFolderImportProgressFilesLabel')
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(Styled.DotsLoader, {}), /*#__PURE__*/_jsx(Styled.CancelButton, {
+          onClick: cancel,
+          color: "basic",
+          size: "md",
+          children: i18n('remoteUploadFolderImportProgressCancelButton')
+        })]
+      })
+    })
+  }));
+};
+export default FolderImportProgress;

package/lib/components/SearchProviderView/SearchProviderView.js

@@ -71,7 +71,7 @@ var SearchProviderView = /*#__PURE__*/function (_View) {
     _this.clearSearch = _this.clearSearch.bind(_this);
     _this.resetPluginCommonState = _this.resetPluginCommonState.bind(_this);
     _this.handleScroll = _this.handleScroll.bind(_this);
-    _this.donePicking = _this.donePicking.bind(_this);
+    _this.addSelectedItems = _this.addSelectedItems.bind(_this);
 
     // Visual
     _this.render = _this.render.bind(_this);
@@ -167,8 +167,8 @@ var SearchProviderView = /*#__PURE__*/function (_View) {
       }
     }
   }, {
-    key: "donePicking",
-    value: function donePicking() {
+    key: "addSelectedItems",
+    value: function addSelectedItems() {
       var _this2 = this;
       var _this$plugin$getPlugi3 = this.plugin.getPluginCommonState(),
         currentSelection = _this$plugin$getPlugi3.currentSelection;
@@ -207,7 +207,7 @@ var SearchProviderView = /*#__PURE__*/function (_View) {
         files: hasInput ? filterItems(files) : files,
         folders: hasInput ? filterItems(folders) : folders,
         handleScroll: this.handleScroll,
-        done: this.donePicking,
+        done: this.addSelectedItems,
         cancel: this.cancelPicking,
         // For SearchFilterInput component
         showSearchFilter: targetViewOptions.showFilter,

package/lib/index.js

@@ -1,5 +1,9 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["children"];
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -22,8 +26,10 @@ import { LoaderView } from '@scaleflex/widget-common';
 import generateFileId from '@scaleflex/widget-utils/lib/generateFileId';
 import isFolder from '@scaleflex/widget-utils/lib/isFolder';
 import { LIST_VIEW_COLS_IDS, LAYOUTS_IDS, LIST_VIEW_FOLDERS_COLS_IDS, PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { CheckBoxGroup } from '@scaleflex/ui/core';
 import AuthView from './components/AuthView';
 import Browser from './components/Browser';
+import FolderImportProgress from './components/FolderImportProgress';
 // TODO: find a way to show version of the current plugin
 // why solution below isn't good?
 // first import doesn't work with webpack 5 as it was deprecated
@@ -38,7 +44,7 @@ import Browser from './components/Browser';
 /**
  * Array.prototype.findIndex ponyfill for old browsers.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function findIndex(array, predicate) {
   for (var i = 0; i < array.length; i++) {
     if (predicate(array[i])) return i;
@@ -210,6 +216,62 @@ var ProviderView = /*#__PURE__*/function () {
     _defineProperty(this, "checkIfAllSelected", function (currentSelection, items) {
       return currentSelection.length === items.length;
     });
+    /**
+     * Validates restrictions during import that require backend requests
+     */
+    _defineProperty(this, "validateDuringImport", function (fileCount, totalSize, depth) {
+      var folderCount = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      if (_this.importState.shouldStop) {
+        return false; // Already stopped due to previous restriction
+      }
+      var _this$plugin$filerobo = _this.plugin.filerobot.opts.restrictions,
+        remoteMaxFolderImportCount = _this$plugin$filerobo.remoteMaxFolderImportCount,
+        remoteMaxFolderImportSize = _this$plugin$filerobo.remoteMaxFolderImportSize,
+        remoteMaxFolderDepth = _this$plugin$filerobo.remoteMaxFolderDepth,
+        remoteMaxFolderCount = _this$plugin$filerobo.remoteMaxFolderCount;
+      var _this$plugin$getPlugi9 = _this.plugin.getPluginCommonState(),
+        shouldIncludeSubFolders = _this$plugin$getPlugi9.shouldIncludeSubFolders;
+
+      // Update tracking state
+      _this.importState.totalFilesImported += fileCount;
+      _this.importState.totalFoldersImported += folderCount;
+      _this.importState.totalSizeImported += totalSize;
+      _this.importState.currentDepth = Math.max(_this.importState.currentDepth, depth);
+
+      // Check file count restriction
+      if (remoteMaxFolderImportCount && _this.importState.totalFilesImported > remoteMaxFolderImportCount) {
+        _this.importState.shouldStop = true;
+        throw new Error(_this.plugin.filerobot.i18n('remoteUploadTooManyFilesSelectedError', {
+          limit: remoteMaxFolderImportCount
+        }));
+      }
+
+      // Check total file size restriction
+      if (remoteMaxFolderImportSize && _this.importState.totalSizeImported > remoteMaxFolderImportSize) {
+        _this.importState.shouldStop = true;
+        var maxSizeGB = Math.round(remoteMaxFolderImportSize / (1024 * 1024 * 1024));
+        throw new Error(_this.plugin.filerobot.i18n('remoteUploadTotalFileSizeTooBigError', {
+          limit: "".concat(maxSizeGB, " GB")
+        }));
+      }
+
+      // Check total folder count restriction during import (only for recursive imports)
+      if (shouldIncludeSubFolders && remoteMaxFolderCount && _this.importState.totalFoldersImported > remoteMaxFolderCount) {
+        _this.importState.shouldStop = true;
+        throw new Error(_this.plugin.filerobot.i18n('remoteUploadTooManyFoldersSelectedError', {
+          limit: remoteMaxFolderCount
+        }));
+      }
+
+      // Check folder depth restriction (only for recursive imports)
+      if (shouldIncludeSubFolders && remoteMaxFolderDepth && _this.importState.currentDepth > remoteMaxFolderDepth) {
+        _this.importState.shouldStop = true;
+        throw new Error(_this.plugin.filerobot.i18n('remoteUploadPathTooLongError', {
+          limit: remoteMaxFolderDepth
+        }));
+      }
+      return true; // Continue importing
+    });
     this.id = PLUGINS_IDS.PROVIDER_VIEWS;
     this.plugin = plugin;
     this.provider = opts.provider;
@@ -235,6 +297,8 @@ var ProviderView = /*#__PURE__*/function () {
 
     // Logic
     this.addFile = this.addFile.bind(this);
+    this.enqueueFile = this.enqueueFile.bind(this);
+    this.addFolder = this.addFolder.bind(this);
     this.filterItems = this.filterItems.bind(this);
     this.filterQuery = this.filterQuery.bind(this);
     this.toggleSearch = this.toggleSearch.bind(this);
@@ -250,11 +314,11 @@ var ProviderView = /*#__PURE__*/function () {
     this.toggleCheckbox = this.toggleCheckbox.bind(this);
     this.handleError = this.handleError.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
-    this.listAllFiles = this.listAllFiles.bind(this);
-    this.donePicking = this.donePicking.bind(this);
+    this.list = this.list.bind(this);
     this.cancelPicking = this.cancelPicking.bind(this);
     this.clearSelection = this.clearSelection.bind(this);
     this.addSelectedItems = this.addSelectedItems.bind(this);
+    this.renderPanelUploadActionButtons = this.renderPanelUploadActionButtons.bind(this);
 
     // Visual
     this.render = this.render.bind(this);
@@ -355,10 +419,30 @@ var ProviderView = /*#__PURE__*/function () {
         }
       }
     }
+  }, {
+    key: "enqueueFile",
+    value: function enqueueFile(file) {
+      var _this$importState;
+      // Check if we should stop due to previous restriction hits
+      if ((_this$importState = this.importState) !== null && _this$importState !== void 0 && _this$importState.shouldStop) {
+        return; // Stop processing
+      }
+
+      // For individual files (not from folders), validate restrictions during import
+      if (this.importState && !file.relativePath) {
+        try {
+          this.validateDuringImport(1, file.size || 0, 0);
+        } catch (error) {
+          this.importState.shouldStop = true;
+          throw error;
+        }
+      }
+      this.importState.filesQueue.push(file);
+    }
   }, {
     key: "addFile",
     value: function addFile(file) {
-      var tagFile = {
+      var tagFile = _objectSpread(_objectSpread({
         id: this.providerFileToId(file),
         source: this.plugin.id,
         data: file,
@@ -367,7 +451,12 @@ var ProviderView = /*#__PURE__*/function () {
         isRemote: true,
         body: {
           fileId: file.id
-        },
+        }
+      }, file.relativePath && {
+        info: {
+          relativePath: "".concat(file.relativePath).concat(file.name)
+        }
+      }), {}, {
         remote: {
           companionUrl: this.plugin.provider.companionUrl,
           url: "".concat(this.provider.fileUrl(file.requestPath)),
@@ -376,7 +465,7 @@ var ProviderView = /*#__PURE__*/function () {
           },
           providerOptions: this.provider.opts
         }
-      };
+      });
       if (file.thumbnail || file.preview) {
         tagFile.preview = file.thumbnail || file.preview;
       }
@@ -392,8 +481,8 @@ var ProviderView = /*#__PURE__*/function () {
   }, {
     key: "removeFile",
     value: function removeFile(id) {
-      var _this$plugin$getPlugi9 = this.plugin.getPluginCommonState(),
-        currentSelection = _this$plugin$getPlugi9.currentSelection;
+      var _this$plugin$getPlugi10 = this.plugin.getPluginCommonState(),
+        currentSelection = _this$plugin$getPlugi10.currentSelection;
       this.plugin.setPluginCommonState({
         currentSelection: currentSelection.filter(function (file) {
           return file.id !== id;
@@ -541,8 +630,8 @@ var ProviderView = /*#__PURE__*/function () {
   }, {
     key: "isChecked",
     value: function isChecked(file) {
-      var _this$plugin$getPlugi10 = this.plugin.getPluginCommonState(),
-        currentSelection = _this$plugin$getPlugi10.currentSelection;
+      var _this$plugin$getPlugi11 = this.plugin.getPluginCommonState(),
+        currentSelection = _this$plugin$getPlugi11.currentSelection;
       // comparing id instead of the file object, because the reference to the object
       // changes when we switch folders, and the file list is updated
       return currentSelection.some(function (item) {
@@ -559,7 +648,14 @@ var ProviderView = /*#__PURE__*/function () {
   }, {
     key: "addFolder",
     value: function addFolder(folder) {
-      var _this4 = this;
+      var _this$importState2,
+        _this4 = this;
+      var parentRelativePath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      var currentDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+      // Check if we should stop due to previous restriction hits
+      if ((_this$importState2 = this.importState) !== null && _this$importState2 !== void 0 && _this$importState2.shouldStop) {
+        return Promise.resolve();
+      }
       var folderId = this.providerFileToId(folder);
       var folders = _objectSpread({}, this.plugin.getPluginCommonState().selectedFolders);
       if (folderId in folders && folders[folderId].loading) {
@@ -572,9 +668,41 @@ var ProviderView = /*#__PURE__*/function () {
       this.plugin.setPluginCommonState({
         selectedFolders: folders
       });
-      return this._loaderWrapper(this.listAllFiles(folder.requestPath).then(function (files) {
+      var _this$plugin$getPlugi12 = this.plugin.getPluginCommonState(),
+        shouldIncludeSubFolders = _this$plugin$getPlugi12.shouldIncludeSubFolders;
+      var relativePath = "".concat(parentRelativePath || folder.relativePath || '').concat(folder.name, "/");
+      return this.list(folder.requestPath).then(function (_ref2) {
+        var _this4$importState, _this4$importState2;
+        var _ref3 = _slicedToArray(_ref2, 2),
+          files = _ref3[0],
+          _ref3$ = _ref3[1],
+          subFolders = _ref3$ === void 0 ? [] : _ref3$;
+        // Check if we should stop due to restriction hit during list operation
+        if ((_this4$importState = _this4.importState) !== null && _this4$importState !== void 0 && _this4$importState.shouldStop) {
+          return Promise.resolve();
+        }
+
+        // Calculate total size of files in this folder
+        var totalSize = files.reduce(function (sum, file) {
+          return sum + (file.size || 0);
+        }, 0);
+
+        // Validate restrictions during import (this may throw and stop the process)
+        try {
+          _this4.validateDuringImport(files.length, totalSize, currentDepth, 1); // Count this folder as 1
+        } catch (error) {
+          // Stop the import process and propagate the error
+          _this4.importState.shouldStop = true;
+          return Promise.reject(error);
+        }
+
+        // Update progress during import
+        _this4.updateImportProgress(1, files.length);
         files.forEach(function (file) {
-          _this4.addFile(file);
+          // Add relativePath for recursive folder structure replication
+          _this4.enqueueFile(_objectSpread(_objectSpread({}, file), {}, {
+            relativePath: relativePath
+          }));
         });
         var ids = files.map(_this4.providerFileToId);
         folders = _objectSpread(_objectSpread({}, _this4.plugin.getPluginCommonState().selectedFolders), {}, _defineProperty({}, folderId, {
@@ -594,7 +722,16 @@ var ProviderView = /*#__PURE__*/function () {
           message = _this4.plugin.filerobot.i18n('filerobotEmptyFolderAddedMessage');
         }
         _this4.plugin.filerobot.info(message);
-      }), function () {}, function (e) {
+
+        // Process subfolders if recursion is enabled and we haven't hit any restrictions
+        if (shouldIncludeSubFolders && !((_this4$importState2 = _this4.importState) !== null && _this4$importState2 !== void 0 && _this4$importState2.shouldStop)) {
+          return Promise.all(subFolders.map(function (subFolder) {
+            return _this4.addFolder(_objectSpread(_objectSpread({}, subFolder), {}, {
+              relativePath: relativePath
+            }), relativePath, currentDepth + 1);
+          }));
+        }
+      })["catch"](function (e) {
         folders = _objectSpread({}, _this4.plugin.getPluginCommonState().selectedFolders);
         delete folders[folderId];
         _this4.plugin.setPluginCommonState({
@@ -605,29 +742,22 @@ var ProviderView = /*#__PURE__*/function () {
     }
 
     /**
-     * gets all the current selection items adds them to the uploading panel
-     * if folder it would retrieve its files
-     * if files they would be added directly
-     *
+     * Updates the progressive loading UI with current import progress
      */
   }, {
-    key: "addSelectedItems",
-    value: function addSelectedItems() {
-      var _this5 = this;
-      var _this$plugin$getPlugi11 = this.plugin.getPluginCommonState(),
-        currentSelection = _this$plugin$getPlugi11.currentSelection;
-      currentSelection.forEach(function (item) {
-        if (item.isFolder) {
-          _this5.addFolder(item);
-        } else {
-          _this5.addFile(item);
-        }
-      });
-      this.plugin.setPluginCommonState({
-        isAllFoldersSelected: false,
-        isAllFilesSelected: false,
-        currentSelection: []
-      });
+    key: "updateImportProgress",
+    value: function updateImportProgress(foldersCount, filesCount) {
+      var _state$folderImportPr;
+      var state = this.plugin.getPluginCommonState();
+      if ((_state$folderImportPr = state.folderImportProgress) !== null && _state$folderImportPr !== void 0 && _state$folderImportPr.isVisible) {
+        var currentProgress = state.folderImportProgress;
+        this.plugin.setPluginCommonState({
+          folderImportProgress: _objectSpread(_objectSpread({}, currentProgress), {}, {
+            foldersCount: (currentProgress.foldersCount || 0) + foldersCount,
+            filesCount: (currentProgress.filesCount || 0) + filesCount
+          })
+        });
+      }
     }
   }, {
     key: "providerFileToId",
@@ -641,7 +771,7 @@ var ProviderView = /*#__PURE__*/function () {
   }, {
     key: "handleAuth",
     value: function handleAuth() {
-      var _this6 = this;
+      var _this5 = this;
       var authState = btoa(JSON.stringify({
         origin: getOrigin()
       }));
@@ -650,7 +780,7 @@ var ProviderView = /*#__PURE__*/function () {
       var authWindow = window.open(link, '_blank');
       var _handleToken = function handleToken(e) {
         if (e.source !== authWindow) {
-          _this6.plugin.filerobot.log("rejecting event from ".concat(e.origin));
+          _this5.plugin.filerobot.log("rejecting event from ".concat(e.origin));
           return;
         }
 
@@ -658,13 +788,13 @@ var ProviderView = /*#__PURE__*/function () {
         // for older Companion versions that used object references
         var data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
         if (!data.token) {
-          _this6.plugin.filerobot.log('did not receive token from auth window');
+          _this5.plugin.filerobot.log('did not receive token from auth window');
           return;
         }
         authWindow.close();
         window.removeEventListener('message', _handleToken);
-        _this6.provider.setAuthToken(data.token);
-        _this6.preFirstRender();
+        _this5.provider.setAuthToken(data.token);
+        _this5.preFirstRender();
       };
       window.addEventListener('message', _handleToken);
     }
@@ -676,85 +806,212 @@ var ProviderView = /*#__PURE__*/function () {
       if (error.isAuthError) {
         return;
       }
-      var message = filerobot.i18n('providerViewCompanionError');
+      var message = error.message || error.toString() || filerobot.i18n('providerViewCompanionError');
       filerobot.info({
-        message: message,
-        details: error.toString()
+        message: message
       }, 'error', 5000);
     }
   }, {
     key: "handleScroll",
     value: function handleScroll(e) {
-      var _this7 = this;
+      var _this6 = this;
       var scrollPos = e.target.scrollHeight - (e.target.scrollTop + e.target.offsetHeight);
       var path = this.nextPagePath || null;
       if (scrollPos < 50 && path && !this._isHandlingScroll) {
         this.provider.list(path).then(function (res) {
-          var _this7$plugin$getPlug = _this7.plugin.getPluginCommonState(),
-            files = _this7$plugin$getPlug.files,
-            folders = _this7$plugin$getPlug.folders;
-          _this7._updateFilesAndFolders(res, files, folders);
+          var _this6$plugin$getPlug = _this6.plugin.getPluginCommonState(),
+            files = _this6$plugin$getPlug.files,
+            folders = _this6$plugin$getPlug.folders;
+          _this6._updateFilesAndFolders(res, files, folders);
         })["catch"](this.handleError).then(function () {
-          _this7._isHandlingScroll = false;
+          _this6._isHandlingScroll = false;
         }); // always called
 
         this._isHandlingScroll = true;
       }
     }
   }, {
-    key: "listAllFiles",
-    value: function listAllFiles(path) {
-      var _this8 = this;
+    key: "list",
+    value: function list(path) {
+      var _this7 = this;
       var files = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var folders = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       files = files || [];
+      folders = folders || [];
       return new Promise(function (resolve, reject) {
-        _this8.provider.list(path).then(function (res) {
+        _this7.provider.list(path).then(function (res) {
           res.items.forEach(function (item) {
-            if (!item.isFolder) {
+            if (item.isFolder) {
+              folders.push(item);
+            } else {
               files.push(item);
             }
           });
-          var moreFiles = res.nextPagePath || null;
-          if (moreFiles) {
-            return _this8.listAllFiles(moreFiles, files).then(function (files) {
-              return resolve(files);
+          var nextPagePath = res.nextPagePath || null;
+          if (nextPagePath) {
+            return _this7.list(nextPagePath, files, folders).then(function (_ref4) {
+              var _ref5 = _slicedToArray(_ref4, 2),
+                files = _ref5[0],
+                folders = _ref5[1];
+              return resolve([files, folders]);
             })["catch"](function (e) {
               return reject(e);
             });
           } else {
-            return resolve(files);
+            return resolve([files, folders]);
           }
         })["catch"](function (e) {
           return reject(e);
         });
       });
     }
+
+    /**
+     * gets all the current selection items adds them to the uploading panel
+     * if folder it would retrieve its files
+     * if files they would be added directly
+     *
+     */
   }, {
-    key: "donePicking",
-    value: function donePicking() {
+    key: "addSelectedItems",
+    value: async function addSelectedItems() {
+      var _this8 = this;
+      try {
+        var _this$plugin$getPlugi13 = this.plugin.getPluginCommonState(),
+          currentSelection = _this$plugin$getPlugi13.currentSelection;
+        var remoteMaxFolderCount = this.plugin.filerobot.opts.restrictions.remoteMaxFolderCount;
+
+        // Pre-validate only restrictions that don't need backend requests
+        this.validatePreImportRestrictions(currentSelection, {
+          remoteMaxFolderCount: remoteMaxFolderCount
+        });
+
+        // Initialize import tracking state
+        this.importState = {
+          totalFilesImported: 0,
+          totalFoldersImported: 0,
+          totalSizeImported: 0,
+          filesQueue: [],
+          currentDepth: 0,
+          shouldStop: false
+        };
+
+        // Set up progressive loading state
+        this.plugin.setPluginCommonState({
+          folderImportProgress: {
+            isVisible: true,
+            foldersCount: 0,
+            filesCount: 0
+          }
+        });
+        var promises = currentSelection.map(function (file) {
+          if (file.isFolder) {
+            return _this8.addFolder(file, '', 1); // Start at depth 1
+          } else {
+            return _this8.enqueueFile(file);
+          }
+        });
+        Promise.all(promises).then(function () {
+          var _this8$importState, _this8$importState2;
+          _this8.plugin.setPluginCommonState({
+            folderImportProgress: {
+              isVisible: false
+            }
+          });
+          if (!((_this8$importState = _this8.importState) !== null && _this8$importState !== void 0 && _this8$importState.shouldStop) && ((_this8$importState2 = _this8.importState) === null || _this8$importState2 === void 0 ? void 0 : _this8$importState2.filesQueue.length) > 0) {
+            _this8.importState.filesQueue.forEach(function (file) {
+              return _this8.addFile(file);
+            });
+          }
+          _this8.importState = null;
+        })["catch"](function (error) {
+          _this8.plugin.setPluginCommonState({
+            folderImportProgress: {
+              isVisible: false
+            }
+          });
+          _this8.handleImportError(error);
+          _this8.importState = null;
+        });
+      } catch (error) {
+        // Hide any loading state and maintain selection
+        this.plugin.setPluginCommonState({
+          folderImportProgress: {
+            isVisible: false
+          }
+        });
+
+        // Show error message without clearing selection
+        this.plugin.filerobot.info(error.message, 'error', 5000);
+      }
+    }
+
+    /**
+     * Validates restrictions that don't require backend requests
+     */
+  }, {
+    key: "validatePreImportRestrictions",
+    value: function validatePreImportRestrictions(currentSelection, restrictions) {
+      var _this$plugin$getPlugi14 = this.plugin.getPluginCommonState(),
+        shouldIncludeSubFolders = _this$plugin$getPlugi14.shouldIncludeSubFolders;
+      var remoteMaxFolderCount = restrictions.remoteMaxFolderCount;
+      var folders = currentSelection.filter(function (item) {
+        return item.isFolder;
+      });
+
+      // Check folder count restriction (no backend request needed)
+      if (shouldIncludeSubFolders && remoteMaxFolderCount && folders.length > remoteMaxFolderCount) {
+        throw new Error(this.plugin.filerobot.i18n('remoteUploadTooManyFoldersSelectedError', {
+          limit: remoteMaxFolderCount
+        }));
+      }
+    }
+  }, {
+    key: "handleImportError",
+    value:
+    /**
+     * Handles import errors by cleaning up state
+     */
+    function handleImportError(error) {
       var _this9 = this;
-      var _this$plugin$getPlugi12 = this.plugin.getPluginCommonState(),
-        currentSelection = _this$plugin$getPlugi12.currentSelection;
-      var promises = currentSelection.map(function (file) {
-        if (file.isFolder) {
-          return _this9.addFolder(file);
-        } else {
-          return _this9.addFile(file);
+      // Remove any partially imported files from this session
+      var files = this.plugin.filerobot.getUploads();
+      Object.keys(files).forEach(function (fileId) {
+        if (files[fileId].source === _this9.plugin.id) {
+          _this9.plugin.filerobot.removeFile(fileId);
         }
       });
-      this._loaderWrapper(Promise.all(promises), function () {
-        _this9.clearSelection();
-      }, function () {});
+
+      // Clear any folder loading states
+      this.plugin.setPluginCommonState({
+        selectedFolders: {}
+      });
+
+      // Show error message without clearing selection (so user can adjust and try again)
+      this.plugin.filerobot.info(error.message, 'error', 5000);
     }
   }, {
     key: "cancelPicking",
     value: function cancelPicking() {
-      this.clearSelection();
+      var clearSelection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      if (clearSelection) {
+        this.clearSelection();
+      }
+      this.plugin.setPluginCommonState({
+        folderImportProgress: {
+          isVisible: false
+        },
+        selectedFolders: {}
+      });
+      this.importState = null;
+      this.provider.cancel();
     }
   }, {
     key: "clearSelection",
     value: function clearSelection() {
       this.plugin.setPluginCommonState({
+        isAllFoldersSelected: false,
+        isAllFilesSelected: false,
         currentSelection: []
       });
     }
@@ -764,7 +1021,10 @@ var ProviderView = /*#__PURE__*/function () {
     key: "_loaderWrapper",
     value: function _loaderWrapper(promise, then, catch_) {
       var _this10 = this;
-      promise.then(function (result) {
+      this.plugin.setPluginCommonState({
+        loading: true
+      });
+      return promise.then(function (result) {
         _this10.plugin.setPluginCommonState({
           loading: false
         });
@@ -775,18 +1035,40 @@ var ProviderView = /*#__PURE__*/function () {
         });
         catch_(err);
       });
-      this.plugin.setPluginCommonState({
-        loading: true
+    }
+  }, {
+    key: "renderPanelUploadActionButtons",
+    value: function renderPanelUploadActionButtons() {
+      var _this11 = this;
+      var _this$plugin$getPlugi15 = this.plugin.getPluginCommonState(),
+        shouldIncludeSubFolders = _this$plugin$getPlugi15.shouldIncludeSubFolders,
+        currentSelection = _this$plugin$getPlugi15.currentSelection;
+      var handleToggleIncludeSubfoldersOption = function handleToggleIncludeSubfoldersOption() {
+        return _this11.plugin.setPluginCommonState({
+          shouldIncludeSubFolders: !shouldIncludeSubFolders
+        });
+      };
+      return /*#__PURE__*/_jsx(CheckBoxGroup, {
+        checked: shouldIncludeSubFolders,
+        label: this.plugin.filerobot.i18n('remoteUploadIncludeSubFoldersCheckbox'),
+        labelPosition: "after",
+        disabled: currentSelection.length === 0 || !currentSelection.some(function (item) {
+          return item.isFolder;
+        }),
+        onChange: handleToggleIncludeSubfoldersOption,
+        size: "sm",
+        type: "checkbox"
       });
     }
   }, {
     key: "render",
     value: function render(state) {
-      var _this11 = this;
+      var _this12 = this;
       var viewOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var _this$plugin$getPlugi13 = this.plugin.getPluginCommonState(),
-        authenticated = _this$plugin$getPlugi13.authenticated,
-        didFirstRender = _this$plugin$getPlugi13.didFirstRender;
+      var _this$plugin$getPlugi16 = this.plugin.getPluginCommonState(),
+        authenticated = _this$plugin$getPlugi16.authenticated,
+        didFirstRender = _this$plugin$getPlugi16.didFirstRender,
+        folderImportProgress = _this$plugin$getPlugi16.folderImportProgress;
       if (!didFirstRender) {
         this.preFirstRender();
       }
@@ -795,7 +1077,7 @@ var ProviderView = /*#__PURE__*/function () {
       // have changed above.
       if (this.plugin.getPluginCommonState().loading) {
         return /*#__PURE__*/_jsx(CloseWrapper, {
-          onUnmount: this.clearSelection,
+          onUnmount: this.cancelPicking,
           children: /*#__PURE__*/_jsx(LoaderView, {
             loaderLabel: this.plugin.filerobot.i18n('loaderLoadingLabel')
           })
@@ -803,7 +1085,7 @@ var ProviderView = /*#__PURE__*/function () {
       }
       if (!authenticated) {
         return /*#__PURE__*/_jsx(CloseWrapper, {
-          onUnmount: this.clearSelection,
+          onUnmount: this.cancelPicking,
           children: /*#__PURE__*/_jsx(AuthView, {
             pluginName: this.plugin.title,
             pluginIcon: this.plugin.icon,
@@ -828,21 +1110,29 @@ var ProviderView = /*#__PURE__*/function () {
         isChecked: this.isChecked,
         toggleCheckbox: this.toggleCheckbox,
         handleScroll: this.handleScroll,
-        listAllFiles: this.listAllFiles,
-        done: this.donePicking,
+        list: this.list,
+        done: this.addSelectedItems,
         cancel: this.cancelPicking,
         title: this.plugin.title,
         pluginIcon: this.plugin.icon,
         i18n: this.plugin.filerobot.i18n,
         updateFilesAndFolders: function updateFilesAndFolders() {
-          return _this11._updateFilesAndFolders.apply(_this11, arguments);
+          return _this12._updateFilesAndFolders.apply(_this12, arguments);
         },
         toggleAllFilesSelection: this.toggleAllFilesSelection,
         toggleAllFoldersSelection: this.toggleAllFoldersSelection
       }));
-      return /*#__PURE__*/_jsx(CloseWrapper, {
-        onUnmount: this.clearSelection,
-        children: /*#__PURE__*/_jsx(Browser, _objectSpread({}, browserProps))
+      return /*#__PURE__*/_jsxs(CloseWrapper, {
+        onUnmount: this.cancelPicking,
+        children: [/*#__PURE__*/_jsx(Browser, _objectSpread({}, browserProps)), (folderImportProgress === null || folderImportProgress === void 0 ? void 0 : folderImportProgress.isVisible) && /*#__PURE__*/_jsx(FolderImportProgress, {
+          i18n: this.plugin.filerobot.i18n,
+          foldersCount: folderImportProgress.foldersCount || 0,
+          filesCount: folderImportProgress.filesCount || 0,
+          message: this.plugin.filerobot.i18n('remoteUploadFolderImportProgressMessage'),
+          cancel: function cancel() {
+            return _this12.cancelPicking(false);
+          }
+        })]
       });
     }
   }]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scaleflex/widget-provider-views",
   "description": "View library for Scaleflex remote provider plugins.",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
   "main": "lib/index.js",
   "style": "dist/style.min.css",
@@ -17,9 +17,9 @@
   "dependencies": {
     "@scaleflex/icons": "^3.0.0-beta.11",
     "@scaleflex/ui": "^3.0.0-beta.11",
-    "@scaleflex/widget-common": "^0.1.1",
-    "@scaleflex/widget-icons": "^0.1.1",
-    "@scaleflex/widget-utils": "^0.1.1",
+    "@scaleflex/widget-common": "^0.2.0",
+    "@scaleflex/widget-icons": "^0.2.0",
+    "@scaleflex/widget-utils": "^0.2.0",
     "classnames": "^2.2.6",
     "use-context-selector": "^1.3.9"
   },
@@ -32,5 +32,5 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
-  "gitHead": "033a120c03dbd1e8f371975285511f89e828cb9c"
+  "gitHead": "26ec7e315c676a2b2060361f58082fc275a2d7bf"
 }