@iobroker/adapter-react-v5 2.1.10 → 3.0.1

package/Components/FileBrowser.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -27,9 +29,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _styles = require("@mui/styles");
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -115,6 +115,8 @@ var _IconClosed = _interopRequireDefault(require("../icons/IconClosed"));
 
 var _IconOpen = _interopRequireDefault(require("../icons/IconOpen"));
 
+var _withWidth = _interopRequireDefault(require("./withWidth"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -123,17 +125,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-var withWidth = function withWidth() {
-  return function (WrappedComponent) {
-    return function (props) {
-      return /*#__PURE__*/_react["default"].createElement(WrappedComponent, (0, _extends2["default"])({}, props, {
-        width: "xs"
-      }));
-    };
-  };
-};
-
 var ROW_HEIGHT = 32;
 var BUTTON_WIDTH = 32;
 var TILE_HEIGHT = 120;
@@ -158,10 +149,10 @@ var styles = function styles(theme) {
       padding: theme.spacing(1)
     },
     filesDivTable: {
-      height: "calc(100% - ".concat(48 + theme.spacing(1), "px)")
+      height: "calc(100% - ".concat(48 + parseInt(theme.spacing(1), 10), "px)")
     },
     filesDivTile: {
-      height: "calc(100% - ".concat(48 * 2 + theme.spacing(1), "px)"),
+      height: "calc(100% - ".concat(48 * 2 + parseInt(theme.spacing(1), 10), "px)"),
       display: 'flex',
       alignContent: 'flex-start',
       alignItems: 'stretch',
@@ -490,6 +481,25 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
 
     (0, _classCallCheck2["default"])(this, FileBrowser);
     _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFileChange", function (id, fileName, size) {
+      var key = id + '/' + fileName;
+      var pos = key.lastIndexOf('/');
+      var folder = key.substring(0, pos);
+      console.log("File changed ".concat(key, "[").concat(size, "]"));
+
+      if (_this.state.folders[folder]) {
+        _this._tempTimeout[folder] && clearTimeout(_this._tempTimeout[folder]);
+        _this._tempTimeout[folder] = setTimeout(function () {
+          delete _this._tempTimeout[folder];
+
+          _this.browseFolder(folder, true).then(function (folders) {
+            return _this.setState({
+              folders: folders
+            });
+          });
+        }, 300);
+      }
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setStateBackgroundImage", function () {
       var array = ['light', 'dark', 'colored', 'delete'];
 
@@ -584,6 +594,8 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
     _this.browseList = [];
     _this.browseListRunning = false;
     _this.initialReadFinished = false;
+    _this.supportSubscribes = null;
+    _this._tempTimeout = {};
     return _this;
   }
 
@@ -640,31 +652,42 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this3 = this;
+
       this.mounted = true;
       this.loadFolders();
+      return this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT').then(function (result) {
+        _this3.supportSubscribes = result;
+        _this3.supportSubscribes && _this3.props.socket.subscribeFiles('*', '*', _this3.onFileChange);
+      });
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      this.supportSubscribes && this.props.socket.unsubscribeFiles('*', '*', this.onFileChange);
       this.mounted = false;
       this.browseList = null;
       this.browseListRunning = false;
+      Object.values(this._tempTimeout).forEach(function (timer) {
+        return timer && clearTimeout(timer);
+      });
+      this._tempTimeout = {};
     }
   }, {
     key: "browseFolders",
     value: function browseFolders(foldersList, _newFolders, _resolve) {
-      var _this3 = this;
+      var _this4 = this;
 
       if (!_newFolders) {
         _newFolders = {};
         Object.keys(this.state.folders).forEach(function (folder) {
-          return _newFolders[folder] = _this3.state.folders[folder];
+          return _newFolders[folder] = _this4.state.folders[folder];
         });
       }
 
       if (!_resolve) {
         return new Promise(function (resolve) {
-          return _this3.browseFolders(foldersList, _newFolders, resolve);
+          return _this4.browseFolders(foldersList, _newFolders, resolve);
         });
       }
 
@@ -673,11 +696,11 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       } else {
         this.browseFolder(foldersList.shift(), _newFolders).then(function () {
           return setTimeout(function () {
-            return _this3.browseFolders(foldersList, _newFolders, _resolve);
+            return _this4.browseFolders(foldersList, _newFolders, _resolve);
           }, 0);
         })["catch"](function () {
           return setTimeout(function () {
-            return _this3.browseFolders(foldersList, _newFolders, _resolve);
+            return _this4.browseFolders(foldersList, _newFolders, _resolve);
           }, 0);
         });
       }
@@ -685,26 +708,26 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "readDirSerial",
     value: function readDirSerial(adapter, relPath) {
-      var _this4 = this;
+      var _this5 = this;
 
       return new Promise(function (resolve, reject) {
-        if (_this4.browseList) {
+        if (_this5.browseList) {
           // if component still mounted
-          _this4.browseList.push({
+          _this5.browseList.push({
             resolve: resolve,
             reject: reject,
             adapter: adapter,
             relPath: relPath
           });
 
-          !_this4.browseListRunning && _this4.processBrowseList();
+          !_this5.browseListRunning && _this5.processBrowseList();
         }
       });
     }
   }, {
     key: "processBrowseList",
     value: function processBrowseList(level) {
-      var _this5 = this;
+      var _this6 = this;
 
       if (!this.browseListRunning && this.browseList && this.browseList.length) {
         this.browseListRunning = true;
@@ -724,9 +747,9 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
 
         this.browseList[0].processing = true;
         this.props.socket.readDir(this.browseList[0].adapter, this.browseList[0].relPath).then(function (files) {
-          if (_this5.browseList) {
+          if (_this6.browseList) {
             // if component still mounted
-            var item = _this5.browseList.shift();
+            var item = _this6.browseList.shift();
 
             if (item) {
               var resolve = item.resolve;
@@ -735,31 +758,31 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
               item.adapter = null;
               item.relPath = null;
               resolve(files);
-              _this5.browseListRunning = false;
+              _this6.browseListRunning = false;
 
-              if (_this5.browseList.length) {
+              if (_this6.browseList.length) {
                 if (level < 5) {
-                  _this5.processBrowseList(level + 1);
+                  _this6.processBrowseList(level + 1);
                 } else {
                   setTimeout(function () {
-                    return _this5.processBrowseList(0);
+                    return _this6.processBrowseList(0);
                   }, 0);
                 }
               } else {
-                _this5.setState({
+                _this6.setState({
                   queueLength: 0
                 });
               }
             } else {
-              _this5.setState({
+              _this6.setState({
                 queueLength: 0
               });
             }
           }
         })["catch"](function (e) {
-          if (_this5.browseList) {
+          if (_this6.browseList) {
             // if component still mounted
-            var item = _this5.browseList.shift();
+            var item = _this6.browseList.shift();
 
             if (item) {
               var reject = item.reject;
@@ -768,23 +791,23 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
               item.adapter = null;
               item.relPath = null;
               reject(e);
-              _this5.browseListRunning = false;
+              _this6.browseListRunning = false;
 
-              if (_this5.browseList.length) {
+              if (_this6.browseList.length) {
                 if (level < 5) {
-                  _this5.processBrowseList(level + 1);
+                  _this6.processBrowseList(level + 1);
                 } else {
                   setTimeout(function () {
-                    return _this5.processBrowseList(0);
+                    return _this6.processBrowseList(0);
                   }, 0);
                 }
               } else {
-                _this5.setState({
+                _this6.setState({
                   queueLength: 0
                 });
               }
             } else {
-              _this5.setState({
+              _this6.setState({
                 queueLength: 0
               });
             }
@@ -794,23 +817,28 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "browseFolder",
-    value: function browseFolder(folderId, _newFolders, _checkEmpty) {
-      var _this6 = this;
+    value: function browseFolder(folderId, _newFolders, _checkEmpty, force) {
+      var _this7 = this;
+
+      if (typeof _newFolders === 'boolean') {
+        force = _newFolders;
+        _newFolders = null;
+      }
 
       if (!_newFolders) {
         _newFolders = {};
         Object.keys(this.state.folders).forEach(function (folder) {
-          return _newFolders[folder] = _this6.state.folders[folder];
+          return _newFolders[folder] = _this7.state.folders[folder];
         });
       }
 
-      if (_newFolders[folderId]) {
+      if (_newFolders[folderId] && !force) {
         if (!_checkEmpty) {
           return new Promise(function (resolve, reject) {
             return Promise.all(_newFolders[folderId].filter(function (item) {
               return item.folder;
             }).map(function (item) {
-              return _this6.browseFolder(item.id, _newFolders, true)["catch"](function (error) {});
+              return _this7.browseFolder(item.id, _newFolders, true)["catch"](function (error) {});
             })).then(function () {
               return resolve(_newFolders);
             })["catch"](function (error) {
@@ -828,15 +856,15 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           var userData = null; // load only adapter.admin and not other meta files like hm-rpc.0.devices.blablabla
 
           objs = objs.filter(function (obj) {
-            if (!_this6.state.expertMode) {
+            if (!_this7.state.expertMode) {
               return obj._id === '0_userdata.0' || obj._id === 'vis.0';
             } else {
               return obj._id.split('.').length <= 2;
             }
           }); // remember, that all folders are loaded
 
-          if (_this6.state.expertMode) {
-            _this6.setState({
+          if (_this7.state.expertMode) {
+            _this7.setState({
               allFoldersLoaded: true,
               loadFolders: false
             });
@@ -877,7 +905,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             return Promise.all(_folders.filter(function (item) {
               return item.folder;
             }).map(function (item) {
-              return _this6.browseFolder(item.id, _newFolders, true)["catch"](function (error) {});
+              return _this7.browseFolder(item.id, _newFolders, true)["catch"](function (error) {});
             })).then(function () {
               return _newFolders;
             });
@@ -885,7 +913,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             return _newFolders;
           }
         })["catch"](function (e) {
-          return _this6.initialReadFinished && window.alert('Cannot read meta items: ' + e);
+          return _this7.initialReadFinished && window.alert('Cannot read meta items: ' + e);
         });
       } else {
         var parts = folderId.split('/');
@@ -897,7 +925,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           var _folders = [];
           files.forEach(function (file) {
             var item = {
-              id: folderId + '/' + file.file,
+              id: "".concat(folderId, "/").concat(file.file),
               ext: _Utils["default"].getFileExtension(file.file),
               folder: file.isDir,
               name: file.file,
@@ -918,7 +946,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             return Promise.all(_folders.filter(function (item) {
               return item.folder;
             }).map(function (item) {
-              return _this6.browseFolder(item.id, _newFolders, true);
+              return _this7.browseFolder(item.id, _newFolders, true);
             })).then(function () {
               return _newFolders;
             });
@@ -926,7 +954,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             return _newFolders;
           }
         })["catch"](function (e) {
-          _this6.initialReadFinished && window.alert("Cannot read ".concat(adapter).concat(relPath ? '/' + relPath : '', ": ").concat(e));
+          _this7.initialReadFinished && window.alert("Cannot read ".concat(adapter).concat(relPath ? '/' + relPath : '', ": ").concat(e));
           _newFolders[folderId] = [];
           return _newFolders;
         });
@@ -935,7 +963,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "toggleFolder",
     value: function toggleFolder(item, e) {
-      var _this7 = this;
+      var _this8 = this;
 
       e && e.stopPropagation();
       var expanded = (0, _toConsumableArray2["default"])(this.state.expanded);
@@ -948,12 +976,12 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
 
         if (!item.temp) {
           return this.browseFolder(item.id).then(function (folders) {
-            return _this7.setState({
+            return _this8.setState({
               expanded: expanded,
               folders: folders
             });
           })["catch"](function (err) {
-            return window.alert(err === NOT_FOUND ? _this7.props.t('ra_Cannot find "%s"', item.id) : _this7.props.t('ra_Cannot read "%s"', item.id));
+            return window.alert(err === NOT_FOUND ? _this8.props.t('ra_Cannot find "%s"', item.id) : _this8.props.t('ra_Cannot read "%s"', item.id));
           });
         } else {
           this.setState({
@@ -971,7 +999,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "changeFolder",
     value: function changeFolder(e, folder) {
-      var _this8 = this;
+      var _this9 = this;
 
       e && e.stopPropagation();
       this.lastSelect = Date.now();
@@ -985,14 +1013,14 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
 
       if (folder && !this.state.folders[folder]) {
         return this.browseFolder(folder).then(function (folders) {
-          return _this8.setState({
+          return _this9.setState({
             folders: folders,
             path: folder,
             currentDir: folder,
             selected: folder,
             pathFocus: false
           }, function () {
-            return _this8.props.onSelect && _this8.props.onSelect('');
+            return _this9.props.onSelect && _this9.props.onSelect('');
           });
         });
       } else {
@@ -1002,14 +1030,14 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           path: folder,
           pathFocus: false
         }, function () {
-          return _this8.props.onSelect && _this8.props.onSelect('');
+          return _this9.props.onSelect && _this9.props.onSelect('');
         });
       }
     }
   }, {
     key: "select",
     value: function select(id, e, cb) {
-      var _this9 = this;
+      var _this10 = this;
 
       if (typeof e === 'function') {
         cb = e;
@@ -1024,13 +1052,13 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         path: id,
         pathFocus: false
       }, function () {
-        if (_this9.props.onSelect) {
+        if (_this10.props.onSelect) {
           var ext = _Utils["default"].getFileExtension(id);
 
-          if ((!_this9.props.filterFiles || _this9.props.filterFiles.includes(ext)) && (!_this9.props.filterByType || _FileViewer.EXTENSIONS[_this9.props.filterByType].includes(ext))) {
-            _this9.props.onSelect(id);
+          if ((!_this10.props.filterFiles || _this10.props.filterFiles.includes(ext)) && (!_this10.props.filterByType || _FileViewer.EXTENSIONS[_this10.props.filterByType].includes(ext))) {
+            _this10.props.onSelect(id);
           } else {
-            _this9.props.onSelect('');
+            _this10.props.onSelect('');
           }
         }
 
@@ -1040,7 +1068,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderFolder",
     value: function renderFolder(item, expanded) {
-      var _this10 = this;
+      var _this11 = this;
 
       if (this.state.filterEmpty && (!this.state.folders[item.id] || !this.state.folders[item.id].length) && item.id !== USER_DATA && !item.temp) {
         return null;
@@ -1056,17 +1084,17 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           width: 'calc(100% - ' + padding + 'px'
         } : {},
         onClick: function onClick(e) {
-          return _this10.state.viewType === TABLE ? _this10.select(item.id, e) : _this10.changeFolder(e, item.id);
+          return _this11.state.viewType === TABLE ? _this11.select(item.id, e) : _this11.changeFolder(e, item.id);
         },
         onDoubleClick: function onDoubleClick(e) {
-          return _this10.state.viewType === TABLE && _this10.toggleFolder(item, e);
+          return _this11.state.viewType === TABLE && _this11.toggleFolder(item, e);
         },
         title: item.title && (0, _typeof2["default"])(item.title) === 'object' ? item.title[this.props.lang] || item.title.end || '' : item.title || null,
         className: _Utils["default"].clsx('browserItem', this.props.classes['item' + this.state.viewType], this.props.classes['itemFolder' + this.state.viewType], this.state.selected === item.id && this.props.classes.itemSelected, item.temp && this.props.classes['itemFolderTemp'])
       }, /*#__PURE__*/_react["default"].createElement(Icon, {
         className: this.props.classes['itemFolderIcon' + this.state.viewType],
         onClick: this.state.viewType === TABLE ? function (e) {
-          return _this10.toggleFolder(item, e);
+          return _this11.toggleFolder(item, e);
         } : undefined
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(this.props.classes['itemName' + this.state.viewType], this.props.classes['itemNameFolder' + this.state.viewType])
@@ -1083,20 +1111,20 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       }) : null), this.state.viewType === TABLE && this.props.allowDownload ? /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.classes['itemDownloadButton' + this.state.viewType]
       }) : null, this.state.viewType === TABLE && this.props.allowDelete && this.state.folders[item.id] && this.state.folders[item.id].length && (this.state.expertMode || item.id.startsWith(USER_DATA) || item.id.startsWith('vis.0/')) ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        size: "large",
         "aria-label": "delete",
         onClick: function onClick(e) {
           e.stopPropagation();
 
-          if (_this10.suppressDeleteConfirm > Date.now()) {
-            _this10.deleteItem(item.id);
+          if (_this11.suppressDeleteConfirm > Date.now()) {
+            _this11.deleteItem(item.id);
           } else {
-            _this10.setState({
+            _this11.setState({
               deleteItem: item.id
             });
           }
         },
-        className: this.props.classes['itemDeleteButton' + this.state.viewType],
-        size: "large"
+        className: this.props.classes['itemDeleteButton' + this.state.viewType]
       }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
         fontSize: "small"
       })) : this.state.viewType === TABLE && this.props.allowDelete ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -1106,13 +1134,13 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderBackFolder",
     value: function renderBackFolder() {
-      var _this11 = this;
+      var _this12 = this;
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: this.state.currentDir,
         id: this.state.currentDir,
         onClick: function onClick(e) {
-          return _this11.changeFolder(e);
+          return _this12.changeFolder(e);
         },
         title: this.props.t('ra_Back to %s', getParentDir(this.state.currentDir)),
         className: _Utils["default"].clsx('browserItem', this.props.classes['item' + this.state.viewType], this.props.classes['itemFolder' + this.state.viewType])
@@ -1134,7 +1162,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "formatAcl",
     value: function formatAcl(acl) {
-      var _this12 = this;
+      var _this13 = this;
 
       var access = acl && (acl.permissions || acl.file);
 
@@ -1144,14 +1172,14 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.classes['itemAccess' + this.state.viewType]
-      }, " ", /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        size: "large",
         onClick: function onClick() {
-          return _this12.setState({
+          return _this13.setState({
             modalEditOfAccess: true
           });
         },
-        className: this.props.classes['itemAclButton' + this.state.viewType],
-        size: "large"
+        className: this.props.classes['itemAclButton' + this.state.viewType]
       }, access || '---'));
     }
   }, {
@@ -1213,7 +1241,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderFile",
     value: function renderFile(item) {
-      var _this13 = this;
+      var _this14 = this;
 
       var padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
 
@@ -1223,16 +1251,16 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         key: item.id,
         id: item.id,
         onDoubleClick: function onDoubleClick() {
-          if (!_this13.props.onSelect) {
-            _this13.setState({
-              viewer: _this13.imagePrefix + item.id
+          if (!_this14.props.onSelect) {
+            _this14.setState({
+              viewer: _this14.imagePrefix + item.id
             });
-          } else if ((!_this13.props.filterFiles || _this13.props.filterFiles.includes(item.ext)) && (!_this13.props.filterByType || _FileViewer.EXTENSIONS[_this13.props.filterByType].includes(item.ext))) {
-            _this13.props.onSelect(item.id, true);
+          } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.props.filterByType || _FileViewer.EXTENSIONS[_this14.props.filterByType].includes(item.ext))) {
+            _this14.props.onSelect(item.id, true);
           }
         },
         onClick: function onClick(e) {
-          return _this13.select(item.id, e);
+          return _this14.select(item.id, e);
         },
         style: this.state.viewType === TABLE ? {
           marginLeft: padding,
@@ -1260,13 +1288,13 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         onClick: function onClick(e) {
           e.stopPropagation();
 
-          if (!_this13.props.onSelect) {
-            _this13.setState({
-              viewer: _this13.imagePrefix + item.id,
+          if (!_this14.props.onSelect) {
+            _this14.setState({
+              viewer: _this14.imagePrefix + item.id,
               formatEditFile: ext
             });
-          } else if ((!_this13.props.filterFiles || _this13.props.filterFiles.includes(item.ext)) && (!_this13.props.filterByType || _FileViewer.EXTENSIONS[_this13.props.filterByType].includes(item.ext))) {
-            _this13.props.onSelect(item.id, true);
+          } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.props.filterByType || _FileViewer.EXTENSIONS[_this14.props.filterByType].includes(item.ext))) {
+            _this14.props.onSelect(item.id, true);
           }
         },
         className: this.props.classes['itemDeleteButton' + this.state.viewType],
@@ -1284,20 +1312,20 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(_SaveAlt["default"], null)) : null, this.state.viewType === TABLE && this.props.allowDelete && item.id !== 'vis.0/' && item.id !== USER_DATA && (this.state.expertMode || item.id.startsWith(USER_DATA) || item.id.startsWith('vis.0/')) ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        size: "large",
         "aria-label": "delete",
         onClick: function onClick(e) {
           e.stopPropagation();
 
-          if (_this13.suppressDeleteConfirm > Date.now()) {
-            _this13.deleteItem(item.id);
+          if (_this14.suppressDeleteConfirm > Date.now()) {
+            _this14.deleteItem(item.id);
           } else {
-            _this13.setState({
+            _this14.setState({
               deleteItem: item.id
             });
           }
         },
-        className: this.props.classes['itemDeleteButton' + this.state.viewType],
-        size: "large"
+        className: this.props.classes['itemDeleteButton' + this.state.viewType]
       }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
         fontSize: "small"
       })) : this.state.viewType === TABLE && this.props.allowDelete ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -1307,7 +1335,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderItems",
     value: function renderItems(folderId) {
-      var _this14 = this;
+      var _this15 = this;
 
       if (folderId && folderId !== '/' && !this.state.expertMode && folderId !== USER_DATA && !folderId.startsWith(USER_DATA) && folderId !== 'vis.0' && !folderId.startsWith('vis.0/')) {
         return null;
@@ -1323,14 +1351,14 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           }
 
           this.state.folders[folderId].forEach(function (item) {
-            if (!_this14.state.expertMode && item.id !== USER_DATA && !item.id.startsWith(USER_DATA) && item.id !== 'vis.0' && !item.id.startsWith('vis.0/')) {
+            if (!_this15.state.expertMode && item.id !== USER_DATA && !item.id.startsWith(USER_DATA) && item.id !== 'vis.0' && !item.id.startsWith('vis.0/')) {
               return;
             }
 
             if (item.folder) {
-              res.push(_this14.renderFolder(item));
-            } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.props.filterByType || _FileViewer.EXTENSIONS[_this14.props.filterByType].includes(item.ext))) {
-              res.push(_this14.renderFile(item));
+              res.push(_this15.renderFolder(item));
+            } else if ((!_this15.props.filterFiles || _this15.props.filterFiles.includes(item.ext)) && (!_this15.props.filterByType || _FileViewer.EXTENSIONS[_this15.props.filterByType].includes(item.ext))) {
+              res.push(_this15.renderFile(item));
             }
           });
           return res;
@@ -1338,20 +1366,20 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           return this.state.folders[folderId].map(function (item) {
             var res = [];
 
-            if (item.id && item.id !== '/' && !_this14.state.expertMode && item.id !== USER_DATA && !item.id.startsWith(USER_DATA) && item.id !== 'vis.0' && !item.id.startsWith('vis.0/')) {
+            if (item.id && item.id !== '/' && !_this15.state.expertMode && item.id !== USER_DATA && !item.id.startsWith(USER_DATA) && item.id !== 'vis.0' && !item.id.startsWith('vis.0/')) {
               return null;
             }
 
             if (item.folder) {
-              var expanded = _this14.state.expanded.includes(item.id);
+              var expanded = _this15.state.expanded.includes(item.id);
 
-              res.push(_this14.renderFolder(item, expanded));
+              res.push(_this15.renderFolder(item, expanded));
 
-              if (_this14.state.folders[item.id] && expanded) {
-                res.push(_this14.renderItems(item.id));
+              if (_this15.state.folders[item.id] && expanded) {
+                res.push(_this15.renderItems(item.id));
               }
-            } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.props.filterByType || _FileViewer.EXTENSIONS[_this14.props.filterByType].includes(item.ext))) {
-              res.push(_this14.renderFile(item));
+            } else if ((!_this15.props.filterFiles || _this15.props.filterFiles.includes(item.ext)) && (!_this15.props.filterByType || _FileViewer.EXTENSIONS[_this15.props.filterByType].includes(item.ext))) {
+              res.push(_this15.renderFile(item));
             } else {
               return null;
             }
@@ -1382,7 +1410,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderToolbar",
     value: function renderToolbar() {
-      var _this15 = this;
+      var _this16 = this;
 
       return /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
         key: "toolbar",
@@ -1393,8 +1421,8 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         className: _Utils["default"].clsx(this.props.classes.menuButton, this.state.expertMode && this.props.classes.menuButtonExpertActive),
         "aria-label": "expert mode",
         onClick: function onClick() {
-          return _this15.setState({
-            expertMode: !_this15.state.expertMode
+          return _this16.setState({
+            expertMode: !_this16.state.expertMode
           });
         },
         size: "large"
@@ -1404,20 +1432,20 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         className: this.props.classes.menuButton,
         "aria-label": "view mode",
         onClick: function onClick() {
-          var viewType = _this15.state.viewType === TABLE ? TILE : TABLE;
+          var viewType = _this16.state.viewType === TABLE ? TILE : TABLE;
           window.localStorage.setItem('files.viewType', viewType);
-          var currentDir = _this15.state.selected;
+          var currentDir = _this16.state.selected;
 
           if (isFile(currentDir)) {
             currentDir = getParentDir(currentDir);
           }
 
-          _this15.setState({
+          _this16.setState({
             viewType: viewType,
             currentDir: currentDir
           }, function () {
-            if (_this15.state.viewType === TABLE) {
-              _this15.scrollToSelected();
+            if (_this16.state.viewType === TABLE) {
+              _this16.scrollToSelected();
             }
           });
         },
@@ -1429,10 +1457,10 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         color: this.state.filterEmpty ? 'secondary' : 'inherit',
         "aria-label": "filter empty",
         onClick: function onClick() {
-          window.localStorage.setItem('file.empty', !_this15.state.filterEmpty);
+          window.localStorage.setItem('file.empty', !_this16.state.filterEmpty);
 
-          _this15.setState({
-            filterEmpty: !_this15.state.filterEmpty
+          _this16.setState({
+            filterEmpty: !_this16.state.filterEmpty
           });
         },
         size: "large"
@@ -1443,10 +1471,10 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         color: 'inherit',
         "aria-label": "reload files",
         onClick: function onClick() {
-          return _this15.setState({
+          return _this16.setState({
             folders: {}
           }, function () {
-            return _this15.loadFolders();
+            return _this16.loadFolders();
           });
         },
         size: "large"
@@ -1458,7 +1486,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         color: 'inherit',
         "aria-label": "add folder",
         onClick: function onClick() {
-          return _this15.setState({
+          return _this16.setState({
             addFolder: true
           });
         },
@@ -1471,7 +1499,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         color: 'inherit',
         "aria-label": "upload file",
         onClick: function onClick() {
-          return _this15.setState({
+          return _this16.setState({
             uploadFile: true
           });
         },
@@ -1510,7 +1538,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderInputDialog",
     value: function renderInputDialog() {
-      var _this16 = this;
+      var _this17 = this;
 
       if (this.state.addFolder) {
         var parentFolder = this.findFirstFolder(this.state.selected);
@@ -1527,18 +1555,18 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           promptText: this.props.t('ra_If no file will be created in the folder, it will disappear after the browser closed'),
           labelText: this.props.t('ra_Folder name'),
           verify: function verify(text) {
-            return _this16.state.folders[parentFolder].find(function (item) {
+            return _this17.state.folders[parentFolder].find(function (item) {
               return item.name === text;
-            }) ? '' : _this16.props.t('ra_Duplicate name');
+            }) ? '' : _this17.props.t('ra_Duplicate name');
           },
           onClose: function onClose(name) {
             if (name) {
               var folders = {};
-              Object.keys(_this16.state.folders).forEach(function (folder) {
-                return folders[folder] = _this16.state.folders[folder];
+              Object.keys(_this17.state.folders).forEach(function (folder) {
+                return folders[folder] = _this17.state.folders[folder];
               });
 
-              var parent = _this16.findItem(parentFolder);
+              var parent = _this17.findItem(parentFolder);
 
               var id = parentFolder + '/' + name;
               folders[parentFolder].push({
@@ -1550,7 +1578,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
               });
               folders[parentFolder].sort(sortFolders);
               folders[id] = [];
-              var expanded = (0, _toConsumableArray2["default"])(_this16.state.expanded);
+              var expanded = (0, _toConsumableArray2["default"])(_this17.state.expanded);
 
               if (!expanded.includes(parentFolder)) {
                 expanded.push(parentFolder);
@@ -1559,15 +1587,15 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
 
               window.localStorage.setItem('files.expanded', JSON.stringify(expanded));
 
-              _this16.setState({
+              _this17.setState({
                 addFolder: false,
                 folders: folders,
                 expanded: expanded
               }, function () {
-                return _this16.select(id);
+                return _this17.select(id);
               });
             } else {
-              _this16.setState({
+              _this17.setState({
                 addFolder: false
               });
             }
@@ -1583,11 +1611,11 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState, snapshot) {
-      var _this17 = this;
+      var _this18 = this;
 
       this.setOpacityTimer && clearTimeout(this.setOpacityTimer);
       this.setOpacityTimer = setTimeout(function () {
-        _this17.setOpacityTimer = null;
+        _this18.setOpacityTimer = null;
         var items = window.document.getElementsByClassName('browserItem');
 
         for (var i = 0; i < items.length; i++) {
@@ -1630,7 +1658,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderUpload",
     value: function renderUpload() {
-      var _this18 = this;
+      var _this19 = this;
 
       if (this.state.uploadFile) {
         return [/*#__PURE__*/_react["default"].createElement(_Fab["default"], {
@@ -1639,19 +1667,19 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           "aria-label": "close",
           className: this.props.classes.uploadCloseButton,
           onClick: function onClick() {
-            return _this18.setState({
+            return _this19.setState({
               uploadFile: false
             });
           }
         }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null)), /*#__PURE__*/_react["default"].createElement(_reactDropzone["default"], {
           key: "dropzone",
           onDragEnter: function onDragEnter() {
-            return _this18.setState({
+            return _this19.setState({
               uploadFile: 'dragging'
             });
           },
           onDragLeave: function onDragLeave() {
-            return _this18.setState({
+            return _this19.setState({
               uploadFile: true
             });
           },
@@ -1669,30 +1697,30 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
               };
 
               reader.onload = function () {
-                var parentFolder = _this18.findFirstFolder(_this18.state.selected);
+                var parentFolder = _this19.findFirstFolder(_this19.state.selected);
 
                 if (!parentFolder) {
-                  return window.alert(_this18.props.t('ra_Invalid parent folder!'));
+                  return window.alert(_this19.props.t('ra_Invalid parent folder!'));
                 }
 
                 var id = parentFolder + '/' + file.name;
 
-                _this18.uploadFile(id, reader.result).then(function () {
+                _this19.uploadFile(id, reader.result).then(function () {
                   if (! --count) {
                     var folders = {};
-                    Object.keys(_this18.state.folders).forEach(function (name) {
+                    Object.keys(_this19.state.folders).forEach(function (name) {
                       if (name !== parentFolder && !name.startsWith(parentFolder + '/')) {
-                        folders[name] = _this18.state.folders[name];
+                        folders[name] = _this19.state.folders[name];
                       }
                     });
 
-                    _this18.setState({
+                    _this19.setState({
                       uploadFile: false,
                       folders: folders
                     }, function () {
-                      return _this18.browseFolders((0, _toConsumableArray2["default"])(_this18.state.expanded), folders).then(function (folders) {
+                      return _this19.browseFolders((0, _toConsumableArray2["default"])(_this19.state.expanded), folders).then(function (folders) {
                         // open current folder
-                        var expanded = (0, _toConsumableArray2["default"])(_this18.state.expanded);
+                        var expanded = (0, _toConsumableArray2["default"])(_this19.state.expanded);
 
                         if (!expanded.includes(parentFolder)) {
                           expanded.push(parentFolder);
@@ -1700,11 +1728,11 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
                           window.localStorage.setItem('files.expanded', JSON.stringify(expanded));
                         }
 
-                        _this18.setState({
+                        _this19.setState({
                           folders: folders,
                           expanded: expanded
                         }, function () {
-                          return _this18.select(id);
+                          return _this19.select(id);
                         });
                       });
                     });
@@ -1719,16 +1747,16 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           var getRootProps = _ref2.getRootProps,
               getInputProps = _ref2.getInputProps;
           return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-            className: _Utils["default"].clsx(_this18.props.classes.uploadDiv, _this18.state.uploadFile === 'dragging' && _this18.props.classes.uploadDivDragging)
+            className: _Utils["default"].clsx(_this19.props.classes.uploadDiv, _this19.state.uploadFile === 'dragging' && _this19.props.classes.uploadDivDragging)
           }, getRootProps()), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), /*#__PURE__*/_react["default"].createElement("div", {
-            className: _this18.props.classes.uploadCenterDiv
+            className: _this19.props.classes.uploadCenterDiv
           }, /*#__PURE__*/_react["default"].createElement("div", {
-            className: _this18.props.classes.uploadCenterTextAndIcon
+            className: _this19.props.classes.uploadCenterTextAndIcon
           }, /*#__PURE__*/_react["default"].createElement(_Publish["default"], {
-            className: _this18.props.classes.uploadCenterIcon
+            className: _this19.props.classes.uploadCenterIcon
           }), /*#__PURE__*/_react["default"].createElement("div", {
-            className: _this18.props.classes.uploadCenterText
-          }, _this18.state.uploadFile === 'dragging' ? _this18.props.t('ra_Drop file here') : _this18.props.t('ra_Place your files here or click here to open the browse dialog')))));
+            className: _this19.props.classes.uploadCenterText
+          }, _this19.state.uploadFile === 'dragging' ? _this19.props.t('ra_Drop file here') : _this19.props.t('ra_Place your files here or click here to open the browse dialog')))));
         })];
       } else {
         return null;
@@ -1737,22 +1765,22 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "deleteRecursive",
     value: function deleteRecursive(id) {
-      var _this19 = this;
+      var _this20 = this;
 
       var item = this.findItem(id);
 
       if (item.folder) {
         return (this.state.folders[id] ? Promise.all(this.state.folders[id].map(function (item) {
-          return _this19.deleteRecursive(item.id);
+          return _this20.deleteRecursive(item.id);
         })) : Promise.resolve()).then(function () {
           // If it is folder of second level
           if (item.level >= 1) {
             var parts = id.split('/');
             var adapter = parts.shift();
 
-            _this19.props.socket.deleteFolder(adapter, parts.join('/')).then(function () {
+            _this20.props.socket.deleteFolder(adapter, parts.join('/')).then(function () {
               // remove this folder
-              var folders = JSON.parse(JSON.stringify(_this19.state.folders));
+              var folders = JSON.parse(JSON.stringify(_this20.state.folders));
               delete folders[item.id]; // delete folder from parent item
 
               var parentId = getParentDir(item.id);
@@ -1767,8 +1795,8 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
                   parentFolder.splice(pos, 1);
                 }
 
-                _this19.select(parentId, function () {
-                  return _this19.setState({
+                _this20.select(parentId, function () {
+                  return _this20.setState({
                     folders: folders
                   });
                 });
@@ -1792,21 +1820,21 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "deleteItem",
     value: function deleteItem(_deleteItem) {
-      var _this20 = this;
+      var _this21 = this;
 
       _deleteItem = _deleteItem || this.state.deleteItem;
       this.setState({
         deleteItem: ''
       }, function () {
-        return _this20.deleteRecursive(_deleteItem).then(function () {
-          var pos = _this20.state.expanded.indexOf(_deleteItem);
+        return _this21.deleteRecursive(_deleteItem).then(function () {
+          var pos = _this21.state.expanded.indexOf(_deleteItem);
 
           if (pos !== -1) {
-            var expanded = (0, _toConsumableArray2["default"])(_this20.state.expanded);
+            var expanded = (0, _toConsumableArray2["default"])(_this21.state.expanded);
             expanded.splice(pos, 1);
             window.localStorage.setItem('files.expanded', JSON.stringify(expanded));
 
-            _this20.setState({
+            _this21.setState({
               expanded: expanded
             });
           }
@@ -1827,14 +1855,14 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderDeleteDialog",
     value: function renderDeleteDialog() {
-      var _this21 = this;
+      var _this22 = this;
 
       if (this.state.deleteItem) {
         return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
           key: "deleteDialog",
           open: true,
           onClose: function onClose() {
-            return _this21.setState({
+            return _this22.setState({
               deleteItem: ''
             });
           },
@@ -1842,28 +1870,28 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
           id: "form-dialog-title"
         }, this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop())), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], null, this.props.t('ra_Are you sure?'))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-          color: "grey",
           variant: "contained",
           onClick: function onClick() {
-            _this21.suppressDeleteConfirm = Date.now() + 60000 * 5;
+            _this22.suppressDeleteConfirm = Date.now() + 60000 * 5;
 
-            _this21.deleteItem();
-          }
+            _this22.deleteItem();
+          },
+          color: "grey"
         }, this.props.t('ra_Delete (no confirm for 5 mins)')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           variant: "contained",
           onClick: function onClick() {
-            return _this21.deleteItem();
+            return _this22.deleteItem();
           },
           color: "primary",
           autoFocus: true
         }, this.props.t('ra_Delete')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-          color: "grey",
           variant: "contained",
           onClick: function onClick() {
-            return _this21.setState({
+            return _this22.setState({
               deleteItem: ''
             });
-          }
+          },
+          color: "grey"
         }, this.props.t('ra_Cancel'))));
       } else {
         return false;
@@ -1872,7 +1900,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderViewDialog",
     value: function renderViewDialog() {
-      var _this22 = this;
+      var _this23 = this;
 
       return this.state.viewer ? /*#__PURE__*/_react["default"].createElement(_FileViewer["default"], {
         key: this.state.viewer,
@@ -1886,7 +1914,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         lang: this.props.lang,
         expertMode: this.state.expertMode,
         onClose: function onClose() {
-          return _this22.setState({
+          return _this23.setState({
             viewer: '',
             formatEditFile: ''
           });
@@ -1896,14 +1924,14 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderError",
     value: function renderError() {
-      var _this23 = this;
+      var _this24 = this;
 
       if (this.state.errorText) {
         return /*#__PURE__*/_react["default"].createElement(_Error["default"], {
           key: "errorDialog",
           text: this.state.errorText,
           onClose: function onClose() {
-            return _this23.setState({
+            return _this24.setState({
               errorText: ''
             });
           }
@@ -1915,12 +1943,12 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "updateItemsAcl",
     value: function updateItemsAcl(info) {
-      var _this24 = this;
+      var _this25 = this;
 
       var folders = JSON.parse(JSON.stringify(this.state.folders));
       var changed;
       info.forEach(function (it) {
-        var item = _this24.findItem(it.id, folders);
+        var item = _this25.findItem(it.id, folders);
 
         if (item && JSON.stringify(item.acl) !== JSON.stringify(it.acl)) {
           item.acl = it.acl;
@@ -1934,41 +1962,41 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "changeToPath",
     value: function changeToPath() {
-      var _this25 = this;
+      var _this26 = this;
 
       setTimeout(function () {
-        if (_this25.state.path !== _this25.state.selected && (!_this25.lastSelect || Date.now() - _this25.lastSelect > 100)) {
-          var folder = _this25.state.path;
+        if (_this26.state.path !== _this26.state.selected && (!_this26.lastSelect || Date.now() - _this26.lastSelect > 100)) {
+          var folder = _this26.state.path;
 
-          if (isFile(_this25.state.path)) {
-            folder = getParentDir(_this25.state.path);
+          if (isFile(_this26.state.path)) {
+            folder = getParentDir(_this26.state.path);
           }
 
           return new Promise(function (resolve) {
-            if (!_this25.state.folders[folder]) {
-              return _this25.browseFolder(folder).then(function (folders) {
-                return _this25.setState({
+            if (!_this26.state.folders[folder]) {
+              return _this26.browseFolder(folder).then(function (folders) {
+                return _this26.setState({
                   folders: folders
                 }, function () {
                   return resolve(true);
                 });
               })["catch"](function (err) {
-                return _this25.setState({
-                  errorText: err === NOT_FOUND ? _this25.props.t('ra_Cannot find "%s"', folder) : _this25.props.t('ra_Cannot read "%s"', folder)
+                return _this26.setState({
+                  errorText: err === NOT_FOUND ? _this26.props.t('ra_Cannot find "%s"', folder) : _this26.props.t('ra_Cannot read "%s"', folder)
                 });
               });
             } else {
               return resolve(true);
             }
           }).then(function (result) {
-            return result && _this25.setState({
-              selected: _this25.state.path,
+            return result && _this26.setState({
+              selected: _this26.state.path,
               currentDir: folder,
               pathFocus: false
             });
           });
-        } else if (!_this25.lastSelect || Date.now() - _this25.lastSelect > 100) {
-          _this25.setState({
+        } else if (!_this26.lastSelect || Date.now() - _this26.lastSelect > 100) {
+          _this26.setState({
             pathFocus: false
           });
         }
@@ -1977,7 +2005,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderBreadcrumb",
     value: function renderBreadcrumb() {
-      var _this26 = this;
+      var _this27 = this;
 
       var parts = this.state.selected.startsWith('/') ? this.state.selected.split('/') : ('/' + this.state.selected).split('/');
       var p = [];
@@ -1987,21 +2015,21 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
 
         if (i < parts.length - 1) {
           return [/*#__PURE__*/_react["default"].createElement("div", {
-            key: _this26.state.selected + '_' + i,
-            className: _this26.props.classes.pathDivBreadcrumbDir,
+            key: _this27.state.selected + '_' + i,
+            className: _this27.props.classes.pathDivBreadcrumbDir,
             onClick: function onClick(e) {
-              return _this26.changeFolder(e, path || '/');
+              return _this27.changeFolder(e, path || '/');
             }
-          }, part || _this26.props.t('ra_Root')), /*#__PURE__*/_react["default"].createElement("span", {
-            key: _this26.state.selected + '_s_' + i,
-            className: _this26.props.classes.pathDivBreadcrumbSlash
+          }, part || _this27.props.t('ra_Root')), /*#__PURE__*/_react["default"].createElement("span", {
+            key: _this27.state.selected + '_s_' + i,
+            className: _this27.props.classes.pathDivBreadcrumbSlash
           }, '>')];
         } else {
           return /*#__PURE__*/_react["default"].createElement("div", {
-            key: _this26.state.selected + '_' + i,
-            className: _this26.props.classes.pathDivBreadcrumbFile,
+            key: _this27.state.selected + '_' + i,
+            className: _this27.props.classes.pathDivBreadcrumbFile,
             onClick: function onClick() {
-              return _this26.setState({
+              return _this27.setState({
                 pathFocus: true
               });
             }
@@ -2012,7 +2040,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderPath",
     value: function renderPath() {
-      var _this27 = this;
+      var _this28 = this;
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: "path",
@@ -2020,13 +2048,13 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       }, this.state.pathFocus ? /*#__PURE__*/_react["default"].createElement(_Input["default"], {
         value: this.state.path,
         onKeyDown: function onKeyDown(e) {
-          return e.keyCode === 13 && _this27.changeToPath();
+          return e.keyCode === 13 && _this28.changeToPath();
         },
         onBlur: function onBlur(e) {
-          return _this27.changeToPath();
+          return _this28.changeToPath();
         },
         onChange: function onChange(e) {
-          return _this27.setState({
+          return _this28.setState({
             path: e.target.value
           });
         },
@@ -2036,24 +2064,22 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this28 = this;
+      var _this29 = this;
 
       if (!this.props.ready) {
-        return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
-          key: this.props.key ? this.props.key + '_c' : 'c'
-        });
+        return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], null);
       }
 
       if (this.state.loadAllFolders && !this.foldersLoading) {
         this.foldersLoading = true;
         setTimeout(function () {
-          _this28.setState({
+          _this29.setState({
             loadAllFolders: false,
             folders: {}
           }, function () {
-            _this28.foldersLoading = false;
+            _this29.foldersLoading = false;
 
-            _this28.loadFolders();
+            _this29.loadFolders();
           });
         }, 300);
       }
@@ -2119,7 +2145,7 @@ FileBrowser.propTypes = {
 };
 /** @type {typeof FileBrowser} */
 
-var _export = withWidth()((0, _withStyles["default"])(styles)(FileBrowser));
+var _export = (0, _withWidth["default"])()((0, _styles.withStyles)(styles)(FileBrowser));
 
 var _default = _export;
 exports["default"] = _default;