@iobroker/adapter-react-v5 7.0.2 → 7.1.0

package/src/Components/FileBrowser.tsx

@@ -3,7 +3,7 @@
  *
  * MIT License
  *
- * */
+ */
 import React, { Component } from 'react';
 import Dropzone from 'react-dropzone';
 
@@ -71,17 +71,14 @@ import IconNoIcon from '../icons/IconNoIcon';
 import Icon from './Icon';
 
 import withWidth from './withWidth';
-import {
-    ThemeName, ThemeType,
-    Translate, IobTheme,
-} from '../types';
+import type { ThemeName, ThemeType, Translate, IobTheme } from '../types';
 
 import FileViewer, { EXTENSIONS } from './FileViewer';
 
-const ROW_HEIGHT   = 32;
+const ROW_HEIGHT = 32;
 const BUTTON_WIDTH = 32;
-const TILE_HEIGHT  = 120;
-const TILE_WIDTH   = 64;
+const TILE_HEIGHT = 120;
+const TILE_WIDTH = 64;
 
 const NOT_FOUND = 'Not found';
 
@@ -268,9 +265,7 @@ const styles: Record<string, any> = {
         width: 30,
         height: 30,
     },
-    itemFolderTable: {
-
-    },
+    itemFolderTable: {},
     itemFolderTemp: {
         opacity: 0.4,
     },
@@ -505,7 +500,6 @@ export interface FileBrowserProps {
 
     restrictToFolder?: string;
 
-    // eslint-disable-next-line no-use-before-define
     modalEditOfAccessControl?: (obj: FileBrowserClass) => React.JSX.Element | null;
 
     allowNonRestricted?: boolean;
@@ -534,9 +528,9 @@ export interface FolderOrFileItem {
 
 export type Folders = Record<string, FolderOrFileItem[]>;
 
-function sortFolders(a: FolderOrFileItem, b: FolderOrFileItem) {
+function sortFolders(a: FolderOrFileItem, b: FolderOrFileItem): number {
     if (a.folder && b.folder) {
-        return a.name > b.name ? 1 : (a.name < b.name ? -1 : 0);
+        return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
     }
     if (a.folder) {
         return -1;
@@ -544,7 +538,7 @@ function sortFolders(a: FolderOrFileItem, b: FolderOrFileItem) {
     if (b.folder) {
         return 1;
     }
-    return a.name > b.name ? 1 : (a.name < b.name ? -1 : 0);
+    return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
 }
 
 interface FileBrowserState {
@@ -619,7 +613,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
     constructor(props: FileBrowserProps) {
         super(props);
 
-        this.localStorage = ((window as any)._localStorage || window.localStorage);
+        this.localStorage = (window as any)._localStorage || window.localStorage;
         const expandedStr = this.localStorage.getItem('files.expanded') || '[]';
 
         if (this.props.limitPath) {
@@ -635,8 +629,12 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         try {
             expanded = JSON.parse(expandedStr);
             if (this.limitToPath) {
-                expanded = expanded.filter(id => id.startsWith(`${this.limitToPath}/`) ||
-                    id === this.limitToPath || this.limitToPath?.startsWith(`${id}/`));
+                expanded = expanded.filter(
+                    id =>
+                        id.startsWith(`${this.limitToPath}/`) ||
+                        id === this.limitToPath ||
+                        this.limitToPath?.startsWith(`${id}/`),
+                );
             }
         } catch {
             expanded = [];
@@ -649,10 +647,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
             viewType = TABLE;
         }
 
-        let selected =
-            this.props.selected ||
-            this.localStorage.getItem('files.selected') ||
-            USER_DATA;
+        let selected = this.props.selected || this.localStorage.getItem('files.selected') || USER_DATA;
 
         let currentDir: string;
 
@@ -678,8 +673,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                 currentDir = selected;
             }
         }
-        const backgroundImage =
-            this.localStorage.getItem('files.backgroundImage') || null;
+        const backgroundImage = this.localStorage.getItem('files.backgroundImage') || null;
 
         this.state = {
             viewType,
@@ -733,7 +727,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         return null;
     }
 
-    async loadFolders() {
+    async loadFolders(): Promise<void> {
         this.initialReadFinished = false;
 
         let folders = (await this.browseFolder('/')) as unknown as Folders;
@@ -768,17 +762,16 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         });
     }
 
-    scrollToSelected() {
+    scrollToSelected(): void {
         if (this.mounted) {
             const el = document.getElementById(this.state.selected);
             el?.scrollIntoView();
         }
     }
 
-    async componentDidMount() {
+    async componentDidMount(): Promise<void> {
         this.mounted = true;
-        this.loadFolders()
-            .catch(error => console.error(`Cannot load folders: ${error}`));
+        this.loadFolders().catch(error => console.error(`Cannot load folders: ${error}`));
 
         this.supportSubscribes = await this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT');
         if (this.supportSubscribes) {
@@ -786,30 +779,25 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         }
     }
 
-    componentWillUnmount() {
+    componentWillUnmount(): void {
         if (this.supportSubscribes) {
             this.props.socket.unsubscribeFiles('*', '*', this.onFileChange);
         }
         this.mounted = false;
         this.browseList = null;
         this.browseListRunning = false;
-        Object.values(this._tempTimeout)
-            .forEach(timer => timer && clearTimeout(timer));
+        Object.values(this._tempTimeout).forEach(timer => timer && clearTimeout(timer));
         this._tempTimeout = {};
     }
 
-    browseFoldersCb(
-        foldersList: string[],
-        newFoldersNotNull: Folders,
-        cb: (folders: Folders) => void,
-    ): void {
+    browseFoldersCb(foldersList: string[], newFoldersNotNull: Folders, cb: (folders: Folders) => void): void {
         if (!foldersList?.length) {
             cb(newFoldersNotNull);
         } else {
             const folder = foldersList.shift();
             if (folder) {
-                this.browseFolder(folder, newFoldersNotNull)
-                    .catch((e: Error) => console.error(`Cannot read folder ${folder}: ${e}`))
+                void this.browseFolder(folder, newFoldersNotNull)
+                    .catch((e: Error) => console.error(`Cannot read folder ${folder}: ${e.message}`))
                     .then(() => {
                         setTimeout(() => this.browseFoldersCb(foldersList, newFoldersNotNull, cb), 0);
                     });
@@ -819,10 +807,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         }
     }
 
-    browseFolders(
-        foldersList: string[],
-        _newFolders?: Folders | null,
-    ): Promise<Folders> {
+    browseFolders(foldersList: string[], _newFolders?: Folders | null): Promise<Folders> {
         let newFoldersNotNull: Folders;
         if (!_newFolders) {
             newFoldersNotNull = {};
@@ -878,7 +863,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                         if (item) {
                             const resolve = item.resolve;
                             item.resolve = null;
-                            item.reject  = null;
+                            item.reject = null;
                             item.adapter = null;
                             item.relPath = null;
                             if (resolve) {
@@ -949,11 +934,13 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         if (newFoldersNotNull[folderId] && !force) {
             if (!_checkEmpty) {
                 return new Promise((resolve, reject) => {
-                    Promise.all(newFoldersNotNull[folderId].filter(item => item.folder).map(item =>
-                        this.browseFolder(item.id, newFoldersNotNull, true)
-                            .catch(() => undefined)))
+                    Promise.all(
+                        newFoldersNotNull[folderId]
+                            .filter(item => item.folder)
+                            .map(item => this.browseFolder(item.id, newFoldersNotNull, true).catch(() => undefined)),
+                    )
                         .then(() => resolve(newFoldersNotNull))
-                        .catch(error => reject(error));
+                        .catch(error => reject(new Error(error)));
                 });
             }
 
@@ -986,17 +973,17 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                     }
 
                     const item: FolderOrFileItem = {
-                        id:     obj._id,
-                        name:   obj._id,
-                        title:  (obj.common && obj.common.name) || obj._id,
-                        meta:   true,
-                        from:   obj.from,
-                        ts:     obj.ts,
-                        color:  obj.common && obj.common.color,
-                        icon:   obj.common && obj.common.icon,
+                        id: obj._id,
+                        name: obj._id,
+                        title: (obj.common && obj.common.name) || obj._id,
+                        meta: true,
+                        from: obj.from,
+                        ts: obj.ts,
+                        color: obj.common && obj.common.color,
+                        icon: obj.common && obj.common.icon,
                         folder: true,
-                        acl:    obj.acl,
-                        level:  0,
+                        acl: obj.acl,
+                        level: 0,
                     };
 
                     if (item.id === USER_DATA) {
@@ -1007,7 +994,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                     }
                 });
 
-                _folders.sort((a, b) => (a.id > b.id ? 1 : (a.id < b.id ? -1 : 0)));
+                _folders.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
                 if (!this.limitToObjectID || this.limitToObjectID === USER_DATA) {
                     if (userData) {
                         _folders.unshift(userData);
@@ -1017,15 +1004,16 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                 newFoldersNotNull[folderId || '/'] = _folders;
 
                 if (!_checkEmpty) {
-                    return Promise.all(_folders.filter(item => item.folder)
-                        .map(item =>
-                            this.browseFolder(item.id, newFoldersNotNull, true)
-                                .catch(() => undefined)))
-                        .then(() => newFoldersNotNull);
+                    return Promise.all(
+                        _folders
+                            .filter(item => item.folder)
+                            .map(item => this.browseFolder(item.id, newFoldersNotNull, true).catch(() => undefined)),
+                    ).then(() => newFoldersNotNull);
                 }
-            } catch (e) {
+            } catch (e: unknown) {
+                const knownError = e as Error;
                 if (this.initialReadFinished) {
-                    window.alert(`Cannot read meta items: ${e}`);
+                    window.alert(`Cannot read meta items: ${knownError.message}`);
                 }
                 newFoldersNotNull[folderId || '/'] = [];
             }
@@ -1044,13 +1032,13 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
 
             files.forEach(file => {
                 const item: FolderOrFileItem = {
-                    id:       `${folderId}/${file.file}`,
-                    ext:      Utils.getFileExtension(file.file),
-                    folder:   file.isDir,
-                    name:     file.file,
-                    size:     file.stats?.size,
+                    id: `${folderId}/${file.file}`,
+                    ext: Utils.getFileExtension(file.file),
+                    folder: file.isDir,
+                    name: file.file,
+                    size: file.stats?.size,
                     modified: file.modifiedAt,
-                    acl:      file.acl,
+                    acl: file.acl,
                     level,
                 };
 
@@ -1085,14 +1073,16 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
             newFoldersNotNull[folderId] = _folders;
 
             if (!_checkEmpty) {
-                return Promise.all(_folders
-                    .filter(item => item.folder)
-                    .map(item => this.browseFolder(item.id, newFoldersNotNull, true)))
-                    .then(() => newFoldersNotNull);
+                return Promise.all(
+                    _folders
+                        .filter(item => item.folder)
+                        .map(item => this.browseFolder(item.id, newFoldersNotNull, true)),
+                ).then(() => newFoldersNotNull);
             }
-        } catch (e) {
+        } catch (e: unknown) {
+            const knownError = e as Error;
             if (this.initialReadFinished) {
-                window.alert(`Cannot read ${adapter}${relPath ? `/${relPath}` : ''}: ${e}`);
+                window.alert(`Cannot read ${adapter}${relPath ? `/${relPath}` : ''}: ${knownError?.message}`);
             }
             newFoldersNotNull[folderId] = [];
         }
@@ -1100,7 +1090,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         return newFoldersNotNull;
     }
 
-    toggleFolder(item: FolderOrFileItem, e: React.MouseEvent<Element>) {
+    toggleFolder(item: FolderOrFileItem, e: React.MouseEvent<Element>): void {
         e?.stopPropagation();
         const expanded = [...this.state.expanded];
         const pos = expanded.indexOf(item.id);
@@ -1113,11 +1103,13 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
             if (!item.temp) {
                 this.browseFolder(item.id)
                     .then(folders => this.setState({ expanded, folders }))
-                    .catch(err => window.alert(
-                        err === NOT_FOUND
-                            ? this.props.t('ra_Cannot find "%s"', item.id)
-                            : this.props.t('ra_Cannot read "%s"', item.id),
-                    ));
+                    .catch(err =>
+                        window.alert(
+                            err === NOT_FOUND
+                                ? this.props.t('ra_Cannot find "%s"', item.id)
+                                : this.props.t('ra_Cannot read "%s"', item.id),
+                        ),
+                    );
             } else {
                 this.setState({ expanded });
             }
@@ -1128,7 +1120,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         }
     }
 
-    onFileChange = (id: string, fileName: string, size: number | null) => {
+    onFileChange = (id: string, fileName: string, size: number | null): void => {
         const key = `${id}/${fileName}`;
         const pos = key.lastIndexOf('/');
         const folder = key.substring(0, pos);
@@ -1143,12 +1135,13 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                 delete this._tempTimeout[folder];
 
                 this.browseFolder(folder, null, false, true)
-                    .then(folders => this.setState({ folders }));
+                    .then(folders => this.setState({ folders }))
+                    .catch(e => console.error(`Cannot read folder: ${e.message}`));
             }, 300);
         }
     };
 
-    changeFolder(e: React.MouseEvent<HTMLDivElement>, folder?: string) {
+    changeFolder(e: React.MouseEvent<HTMLDivElement>, folder?: string): void {
         if (e) {
             e.stopPropagation();
         }
@@ -1168,17 +1161,21 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         }
 
         if (_folder && !this.state.folders[_folder]) {
-            return this.browseFolder(_folder)
-                .then(folders => this.setState(
-                    {
-                        folders,
-                        path: _folder,
-                        currentDir: _folder,
-                        selected: _folder,
-                        pathFocus: false,
-                    },
-                    () => this.props.onSelect && this.props.onSelect(''),
-                ));
+            this.browseFolder(_folder)
+                .then(folders =>
+                    this.setState(
+                        {
+                            folders,
+                            path: _folder,
+                            currentDir: _folder,
+                            selected: _folder,
+                            pathFocus: false,
+                        },
+                        () => this.props.onSelect && this.props.onSelect(''),
+                    ),
+                )
+                .catch(_e => console.error(`Cannot read folder: ${_e.message}`));
+            return;
         }
 
         return this.setState(
@@ -1192,7 +1189,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         );
     }
 
-    select(id: string, e?: React.MouseEvent<HTMLDivElement> | null, cb?: () => void) {
+    select(id: string, e?: React.MouseEvent<HTMLDivElement> | null, cb?: () => void): void {
         if (e) {
             e.stopPropagation();
         }
@@ -1244,123 +1241,147 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         const isUserData = item.name === USER_DATA;
         const isSpecialData = isUserData || item.name === 'vis.0' || item.name === 'vis-2.0';
 
-        return <Box
-            component="div"
-            key={item.id}
-            id={item.id}
-            style={this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px` } : {}}
-            onClick={e => (this.state.viewType === TABLE ? this.select(item.id, e) : this.changeFolder(e, item.id))}
-            onDoubleClick={e => this.state.viewType === TABLE && this.toggleFolder(item, e)}
-            title={this.getText(item.title)}
-            className="browserItem"
-            sx={Utils.getStyle(
-                this.props.theme,
-                styles[`item${this.state.viewType}`],
-                styles[`itemFolder${this.state.viewType}`],
-                this.state.selected === item.id ? styles.itemSelected : {},
-                item.temp ? styles.itemFolderTemp : {},
-            )}
-        >
-            <IconEl
-                style={Utils.getStyle(this.props.theme, styles[`itemFolderIcon${this.state.viewType}`], isSpecialData && styles.specialFolder)}
-                onClick={this.state.viewType === TABLE ? (e: React.MouseEvent<Element>) => this.toggleFolder(item, e) : undefined}
-            />
-
+        return (
             <Box
                 component="div"
+                key={item.id}
+                id={item.id}
+                style={this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px` } : {}}
+                onClick={e => (this.state.viewType === TABLE ? this.select(item.id, e) : this.changeFolder(e, item.id))}
+                onDoubleClick={e => this.state.viewType === TABLE && this.toggleFolder(item, e)}
+                title={this.getText(item.title)}
+                className="browserItem"
                 sx={Utils.getStyle(
                     this.props.theme,
-                    styles[`itemName${this.state.viewType}`],
-                    styles[`itemNameFolder${this.state.viewType}`],
+                    styles[`item${this.state.viewType}`],
+                    styles[`itemFolder${this.state.viewType}`],
+                    this.state.selected === item.id ? styles.itemSelected : {},
+                    item.temp ? styles.itemFolderTemp : {},
                 )}
             >
-                {isUserData ? this.props.t('ra_User files') : item.name}
-            </Box>
+                <IconEl
+                    style={Utils.getStyle(
+                        this.props.theme,
+                        styles[`itemFolderIcon${this.state.viewType}`],
+                        isSpecialData && styles.specialFolder,
+                    )}
+                    onClick={
+                        this.state.viewType === TABLE
+                            ? (e: React.MouseEvent<Element>) => this.toggleFolder(item, e)
+                            : undefined
+                    }
+                />
 
-            <Box
-                component="div"
-                style={styles[`itemSize${this.state.viewType}`]}
-                sx={{ display: { md: 'inline-block', sm: 'none' } }}
-            >
-                {this.state.viewType === TABLE && this.state.folders[item.id]
-                    ? this.state.folders[item.id].length
-                    : ''}
-            </Box>
+                <Box
+                    component="div"
+                    sx={Utils.getStyle(
+                        this.props.theme,
+                        styles[`itemName${this.state.viewType}`],
+                        styles[`itemNameFolder${this.state.viewType}`],
+                    )}
+                >
+                    {isUserData ? this.props.t('ra_User files') : item.name}
+                </Box>
 
-            <Box
-                component="div"
-                sx={{ display: { md: 'inline-block', sm: 'none' } }}
-            >
-                {this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null}
-            </Box>
+                <Box
+                    component="div"
+                    style={styles[`itemSize${this.state.viewType}`]}
+                    sx={{ display: { md: 'inline-block', sm: 'none' } }}
+                >
+                    {this.state.viewType === TABLE && this.state.folders[item.id]
+                        ? this.state.folders[item.id].length
+                        : ''}
+                </Box>
+
+                <Box
+                    component="div"
+                    sx={{ display: { md: 'inline-block', sm: 'none' } }}
+                >
+                    {this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null}
+                </Box>
 
-            {this.state.viewType === TABLE && this.props.expertMode ?
-                <Box component="div" sx={{ ...styles.itemDeleteButtonTable, display: { md: 'inline-block', sm: 'none' } }} /> : null}
+                {this.state.viewType === TABLE && this.props.expertMode ? (
+                    <Box
+                        component="div"
+                        sx={{ ...styles.itemDeleteButtonTable, display: { md: 'inline-block', sm: 'none' } }}
+                    />
+                ) : null}
 
-            {this.state.viewType === TABLE && this.props.allowDownload ?
-                <div style={styles[`itemDownloadEmpty${this.state.viewType}`]} /> : null}
+                {this.state.viewType === TABLE && this.props.allowDownload ? (
+                    <div style={styles[`itemDownloadEmpty${this.state.viewType}`]} />
+                ) : null}
 
-            {this.state.viewType === TABLE &&
+                {this.state.viewType === TABLE &&
                 this.props.allowDelete &&
                 this.state.folders[item.id] &&
-                this.state.folders[item.id].length ? <IconButton
-                    aria-label="delete"
-                    onClick={e => {
-                        e.stopPropagation();
-                        if (this.suppressDeleteConfirm > Date.now()) {
-                            this.deleteItem(item.id);
-                        } else {
-                            this.setState({ deleteItem: item.id });
-                        }
-                    }}
-                    sx={styles[`itemDeleteButton${this.state.viewType}`]}
-                    size="large"
-                >
-                    <DeleteIcon fontSize="small" />
-                </IconButton> :
-                this.state.viewType === TABLE && this.props.allowDelete ?
-                    <Box component="div" sx={styles[`itemDeleteButton${this.state.viewType}`]} /> : null}
-        </Box>;
+                this.state.folders[item.id].length ? (
+                    <IconButton
+                        aria-label="delete"
+                        onClick={e => {
+                            e.stopPropagation();
+                            if (this.suppressDeleteConfirm > Date.now()) {
+                                this.deleteItem(item.id);
+                            } else {
+                                this.setState({ deleteItem: item.id });
+                            }
+                        }}
+                        sx={styles[`itemDeleteButton${this.state.viewType}`]}
+                        size="large"
+                    >
+                        <DeleteIcon fontSize="small" />
+                    </IconButton>
+                ) : this.state.viewType === TABLE && this.props.allowDelete ? (
+                    <Box
+                        component="div"
+                        sx={styles[`itemDeleteButton${this.state.viewType}`]}
+                    />
+                ) : null}
+            </Box>
+        );
     }
 
-    renderBackFolder() {
-        return <Box
-            component="div"
-            key={this.state.currentDir}
-            id={this.state.currentDir}
-            onClick={e => this.changeFolder(e)}
-            title={this.props.t('ra_Back to %s', getParentDir(this.state.currentDir))}
-            className="browserItem"
-            sx={Utils.getStyle(
-                this.props.theme,
-                styles[`item${this.state.viewType}`],
-                styles[`itemFolder${this.state.viewType}`],
-            )}
-        >
-            <IconClosed style={styles[`itemFolderIcon${this.state.viewType}`]} />
-            <IconBack sx={styles.itemFolderIconBack} />
-
+    renderBackFolder(): React.JSX.Element {
+        return (
             <Box
                 component="div"
+                key={this.state.currentDir}
+                id={this.state.currentDir}
+                onClick={e => this.changeFolder(e)}
+                title={this.props.t('ra_Back to %s', getParentDir(this.state.currentDir))}
+                className="browserItem"
                 sx={Utils.getStyle(
                     this.props.theme,
-                    styles[`itemName${this.state.viewType}`],
-                    styles[`itemNameFolder${this.state.viewType}`],
+                    styles[`item${this.state.viewType}`],
+                    styles[`itemFolder${this.state.viewType}`],
                 )}
             >
-                ..
+                <IconClosed style={styles[`itemFolderIcon${this.state.viewType}`]} />
+                <IconBack sx={styles.itemFolderIconBack} />
+
+                <Box
+                    component="div"
+                    sx={Utils.getStyle(
+                        this.props.theme,
+                        styles[`itemName${this.state.viewType}`],
+                        styles[`itemNameFolder${this.state.viewType}`],
+                    )}
+                >
+                    ..
+                </Box>
             </Box>
-        </Box>;
+        );
     }
 
-    formatSize(size: number | null | undefined) {
-        return <div style={styles[`itemSize${this.state.viewType}`]}>
-            {size || size === 0 ? Utils.formatBytes(size) : ''}
-        </div>;
+    formatSize(size: number | null | undefined): React.JSX.Element {
+        return (
+            <div style={styles[`itemSize${this.state.viewType}`]}>
+                {size || size === 0 ? Utils.formatBytes(size) : ''}
+            </div>
+        );
     }
 
-    formatAcl(acl: ioBroker.EvaluatedFileACL | MetaACL | undefined) {
-        const access: number = acl ? ((acl as ioBroker.EvaluatedFileACL).permissions || (acl as MetaACL).file) : 0;
+    formatAcl(acl: ioBroker.EvaluatedFileACL | MetaACL | undefined): React.JSX.Element {
+        const access: number = acl ? (acl as ioBroker.EvaluatedFileACL).permissions || (acl as MetaACL).file : 0;
         let accessStr: string;
         if (access) {
             accessStr = access.toString(16).padStart(3, '0');
@@ -1368,18 +1389,24 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
             accessStr = '';
         }
 
-        return <div style={styles[`itemAccess${this.state.viewType}`]}>
-            {this.props.modalEditOfAccessControl ? <IconButton
-                size="large"
-                onClick={() => this.setState({ modalEditOfAccess: true })}
-                sx={styles[`itemAclButton${this.state.viewType}`]}
-            >
-                {accessStr || '---'}
-            </IconButton> : accessStr || '---'}
-        </div>;
+        return (
+            <div style={styles[`itemAccess${this.state.viewType}`]}>
+                {this.props.modalEditOfAccessControl ? (
+                    <IconButton
+                        size="large"
+                        onClick={() => this.setState({ modalEditOfAccess: true })}
+                        sx={styles[`itemAclButton${this.state.viewType}`]}
+                    >
+                        {accessStr || '---'}
+                    </IconButton>
+                ) : (
+                    accessStr || '---'
+                )}
+            </div>
+        );
     }
 
-    getFileIcon(ext: string | null) {
+    getFileIcon(ext: string | null): React.JSX.Element {
         switch (ext) {
             case 'json':
             case 'json5':
@@ -1424,14 +1451,15 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         }
     }
 
-    setStateBackgroundImage = () => {
+    setStateBackgroundImage = (): void => {
         const array = ['light', 'dark', 'colored', 'delete'];
         this.setState(({ backgroundImage }) => {
-            if (backgroundImage && array.indexOf(backgroundImage) !== -1 && array.length - 1 !== array.indexOf(backgroundImage)) {
-                this.localStorage.setItem(
-                    'files.backgroundImage',
-                    array[array.indexOf(backgroundImage) + 1],
-                );
+            if (
+                backgroundImage &&
+                array.indexOf(backgroundImage) !== -1 &&
+                array.length - 1 !== array.indexOf(backgroundImage)
+            ) {
+                this.localStorage.setItem('files.backgroundImage', array[array.indexOf(backgroundImage) + 1]);
                 return { backgroundImage: array[array.indexOf(backgroundImage) + 1] };
             }
             this.localStorage.setItem('files.backgroundImage', array[0]);
@@ -1439,7 +1467,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         });
     };
 
-    getStyleBackgroundImage = () => {
+    getStyleBackgroundImage = (): React.CSSProperties | null => {
         // ['light', 'dark', 'colored', 'delete']
         switch (this.state.backgroundImage) {
             case 'light':
@@ -1459,137 +1487,156 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
         const ext = Utils.getFileExtension(item.name);
 
-        return <Box
-            component="div"
-            key={item.id}
-            id={item.id}
-            onDoubleClick={e => {
-                e.stopPropagation();
-                if (!this.props.onSelect) {
-                    this.setState({ viewer: this.imagePrefix + item.id, formatEditFile: ext });
-                } else if (
-                    (!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
-                    (!this.state.filterByType ||
-                        (item.ext &&
-                            (EXTENSIONS as Record<string, string[]>)[this.state.filterByType].includes(item.ext)))
-                ) {
-                    this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
-                }
-            }}
-            onClick={e => this.select(item.id, e)}
-            style={this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px)` } : {}}
-            className="browserItem"
-            sx={Utils.getStyle(
-                this.props.theme,
-                styles[`item${this.state.viewType}`],
-                styles[`itemFile${this.state.viewType}`],
-                this.state.selected === item.id ? styles.itemSelected : undefined,
-            )}
-        >
-            {ext && EXTENSIONS.images.includes(ext) ?
-                this.state.fileErrors.includes(item.id) ?
-                    <IconNoIcon
-                        style={{
-                            ...styles[`itemImage${this.state.viewType}`],
-                            ...this.getStyleBackgroundImage(),
-                            ...styles[`itemNoImage${this.state.viewType}`],
-                        }}
-                    /> :
-                    <Icon
-                        onError={e => {
-                            (e.target as HTMLImageElement).onerror = null;
-                            const fileErrors = [...this.state.fileErrors];
-                            if (!fileErrors.includes(item.id)) {
-                                fileErrors.push(item.id);
-                                this.setState({ fileErrors });
-                            }
-                        }}
-                        style={{ ...styles[`itemImage${this.state.viewType}`], ...this.getStyleBackgroundImage() }}
-                        src={this.imagePrefix + item.id}
-                        alt={item.name}
-                    />
-                :
-                this.getFileIcon(ext)}
-            <Box component="div" sx={styles[`itemName${this.state.viewType}`]}>{item.name}</Box>
-            <Box
-                component="div"
-                sx={{ display: { md: 'inline-block', sm: 'none' } }}
-            >
-                {this.formatSize(item.size)}
-            </Box>
+        return (
             <Box
                 component="div"
-                sx={{ display: { md: 'inline-block', sm: 'none' } }}
-            >
-                {this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null}
-            </Box>
-            <Box
-                component="div"
-                sx={{ display: { md: 'inline-block', sm: 'none' } }}
+                key={item.id}
+                id={item.id}
+                onDoubleClick={e => {
+                    e.stopPropagation();
+                    if (!this.props.onSelect) {
+                        this.setState({ viewer: this.imagePrefix + item.id, formatEditFile: ext });
+                    } else if (
+                        (!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
+                        (!this.state.filterByType ||
+                            (item.ext &&
+                                (EXTENSIONS as Record<string, string[]>)[this.state.filterByType].includes(item.ext)))
+                    ) {
+                        this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
+                    }
+                }}
+                onClick={e => this.select(item.id, e)}
+                style={this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px)` } : {}}
+                className="browserItem"
+                sx={Utils.getStyle(
+                    this.props.theme,
+                    styles[`item${this.state.viewType}`],
+                    styles[`itemFile${this.state.viewType}`],
+                    this.state.selected === item.id ? styles.itemSelected : undefined,
+                )}
             >
-                {this.state.viewType === TABLE && this.props.expertMode && FileBrowserClass.getEditFile(ext) ?
+                {ext && EXTENSIONS.images.includes(ext) ? (
+                    this.state.fileErrors.includes(item.id) ? (
+                        <IconNoIcon
+                            style={{
+                                ...styles[`itemImage${this.state.viewType}`],
+                                ...this.getStyleBackgroundImage(),
+                                ...styles[`itemNoImage${this.state.viewType}`],
+                            }}
+                        />
+                    ) : (
+                        <Icon
+                            onError={e => {
+                                (e.target as HTMLImageElement).onerror = null;
+                                const fileErrors = [...this.state.fileErrors];
+                                if (!fileErrors.includes(item.id)) {
+                                    fileErrors.push(item.id);
+                                    this.setState({ fileErrors });
+                                }
+                            }}
+                            style={{ ...styles[`itemImage${this.state.viewType}`], ...this.getStyleBackgroundImage() }}
+                            src={this.imagePrefix + item.id}
+                            alt={item.name}
+                        />
+                    )
+                ) : (
+                    this.getFileIcon(ext)
+                )}
+                <Box
+                    component="div"
+                    sx={styles[`itemName${this.state.viewType}`]}
+                >
+                    {item.name}
+                </Box>
+                <Box
+                    component="div"
+                    sx={{ display: { md: 'inline-block', sm: 'none' } }}
+                >
+                    {this.formatSize(item.size)}
+                </Box>
+                <Box
+                    component="div"
+                    sx={{ display: { md: 'inline-block', sm: 'none' } }}
+                >
+                    {this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null}
+                </Box>
+                <Box
+                    component="div"
+                    sx={{ display: { md: 'inline-block', sm: 'none' } }}
+                >
+                    {this.state.viewType === TABLE && this.props.expertMode && FileBrowserClass.getEditFile(ext) ? (
+                        <IconButton
+                            aria-label="edit"
+                            onClick={e => {
+                                e.stopPropagation();
+                                if (!this.props.onSelect) {
+                                    this.setState({ viewer: this.imagePrefix + item.id, formatEditFile: ext });
+                                } else if (
+                                    (!this.props.filterFiles ||
+                                        (item.ext && this.props.filterFiles.includes(item.ext))) &&
+                                    (!this.state.filterByType ||
+                                        (item.ext &&
+                                            (EXTENSIONS as Record<string, string[]>)[this.state.filterByType].includes(
+                                                item.ext,
+                                            )))
+                                ) {
+                                    this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
+                                }
+                            }}
+                            sx={styles.itemDeleteButtonTable}
+                            size="large"
+                        >
+                            <EditIcon fontSize="small" />
+                        </IconButton>
+                    ) : (
+                        <Box
+                            component="div"
+                            sx={styles[`itemDeleteButton${this.state.viewType}`]}
+                        />
+                    )}
+                </Box>
+                {this.state.viewType === TABLE && this.props.allowDownload ? (
+                    <Box
+                        component="a"
+                        className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge"
+                        sx={styles.itemDownloadButtonTable}
+                        tabIndex={0}
+                        download={item.id}
+                        href={this.imagePrefix + item.id}
+                        onClick={e => e.stopPropagation()}
+                    >
+                        <DownloadIcon />
+                    </Box>
+                ) : null}
+
+                {this.state.viewType === TABLE &&
+                this.props.allowDelete &&
+                item.id !== 'vis.0/' &&
+                item.id !== 'vis-2.0/' &&
+                item.id !== USER_DATA ? (
                     <IconButton
-                        aria-label="edit"
+                        aria-label="delete"
                         onClick={e => {
                             e.stopPropagation();
-                            if (!this.props.onSelect) {
-                                this.setState({ viewer: this.imagePrefix + item.id, formatEditFile: ext });
-                            } else if (
-                                (!this.props.filterFiles ||
-                                    (item.ext && this.props.filterFiles.includes(item.ext))) &&
-                                (!this.state.filterByType ||
-                                    (item.ext &&
-                                        (EXTENSIONS as Record<string, string[]>)[this.state.filterByType].includes(
-                                            item.ext,
-                                        )))
-                            ) {
-                                this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
+                            if (this.suppressDeleteConfirm > Date.now()) {
+                                this.deleteItem(item.id);
+                            } else {
+                                this.setState({ deleteItem: item.id });
                             }
                         }}
-                        sx={styles.itemDeleteButtonTable}
+                        sx={styles[`itemDeleteButton${this.state.viewType}`]}
                         size="large"
                     >
-                        <EditIcon fontSize="small" />
+                        <DeleteIcon fontSize="small" />
                     </IconButton>
-                    :
-                    <Box component="div" sx={styles[`itemDeleteButton${this.state.viewType}`]} />}
+                ) : this.state.viewType === TABLE && this.props.allowDelete ? (
+                    <Box
+                        component="div"
+                        sx={styles[`itemDeleteButton${this.state.viewType}`]}
+                    />
+                ) : null}
             </Box>
-            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-            {this.state.viewType === TABLE && this.props.allowDownload ? <Box
-                component="a"
-                className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge"
-                sx={styles.itemDownloadButtonTable}
-                tabIndex={0}
-                download={item.id}
-                href={this.imagePrefix + item.id}
-                onClick={e => e.stopPropagation()}
-            >
-                <DownloadIcon />
-            </Box> : null}
-
-            {this.state.viewType === TABLE &&
-                this.props.allowDelete &&
-                item.id !== 'vis.0/' &&
-                item.id !== 'vis-2.0/' &&
-                item.id !== USER_DATA ? <IconButton
-                    aria-label="delete"
-                    onClick={e => {
-                        e.stopPropagation();
-                        if (this.suppressDeleteConfirm > Date.now()) {
-                            this.deleteItem(item.id);
-                        } else {
-                            this.setState({ deleteItem: item.id });
-                        }
-                    }}
-                    sx={styles[`itemDeleteButton${this.state.viewType}`]}
-                    size="large"
-                >
-                    <DeleteIcon fontSize="small" />
-                </IconButton>
-                :
-                (this.state.viewType === TABLE && this.props.allowDelete ?
-                    <Box component="div" sx={styles[`itemDeleteButton${this.state.viewType}`]} /> : null)}
-        </Box>;
+        );
     }
 
     renderItems(folderId: string): React.JSX.Element | (React.JSX.Element | null)[] {
@@ -1647,240 +1694,264 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
             return totalResult;
         }
 
-        return <div style={{ position: 'relative' }}>
-            <CircularProgress key={folderId} color="secondary" size={24} />
-            <div
-                style={{
-                    position: 'absolute',
-                    zIndex: 2,
-                    top: 4,
-                    width: 24,
-                    textAlign: 'center',
-                }}
-            >
-                {this.state.queueLength}
+        return (
+            <div style={{ position: 'relative' }}>
+                <CircularProgress
+                    key={folderId}
+                    color="secondary"
+                    size={24}
+                />
+                <div
+                    style={{
+                        position: 'absolute',
+                        zIndex: 2,
+                        top: 4,
+                        width: 24,
+                        textAlign: 'center',
+                    }}
+                >
+                    {this.state.queueLength}
+                </div>
             </div>
-        </div>;
+        );
     }
 
-    renderToolbar() {
-        const IconType: React.FC< { fontSize?: 'small' }> | null = this.props.showTypeSelector
-            ? FILE_TYPE_ICONS[this.state.filterByType || 'all'] ||
-              FILE_TYPE_ICONS.all
+    renderToolbar(): React.JSX.Element {
+        const IconType: React.FC<{ fontSize?: 'small' }> | null = this.props.showTypeSelector
+            ? FILE_TYPE_ICONS[this.state.filterByType || 'all'] || FILE_TYPE_ICONS.all
             : null;
 
         const isInFolder = this.findFirstFolder(this.state.selected);
 
-        return <Toolbar key="toolbar" variant="dense">
-            {this.props.allowNonRestricted && this.props.restrictToFolder ? <IconButton
-                edge="start"
-                title={
-                    this.state.restrictToFolder
-                        ? this.props.t('ra_Show all folders')
-                        : this.props.t('ra_Restrict to folder')
-                }
-                style={{
-                    ...styles.menuButton,
-                    ...(this.state.restrictToFolder ? styles.menuButtonRestrictActive : undefined),
-                }}
-                aria-label="restricted to folder"
-                onClick={() =>
-                    this.setState({
-                        restrictToFolder:
-                            (this.state.restrictToFolder ? '' : this.props.restrictToFolder) || '',
-                        loadAllFolders: true,
-                    })}
-                size="small"
-            >
-                <RestrictedIcon fontSize="small" />
-            </IconButton> : null}
-            {this.props.showExpertButton ? <IconButton
-                edge="start"
-                title={this.props.t('ra_Toggle expert mode')}
-                style={{
-                    ...styles.menuButton,
-                    ...(this.state.expertMode ? styles.menuButtonExpertActive : undefined),
-                }}
-                aria-label="expert mode"
-                onClick={() => this.setState({ expertMode: !this.state.expertMode })}
-                size="small"
+        return (
+            <Toolbar
+                key="toolbar"
+                variant="dense"
             >
-                <IconExpert />
-            </IconButton> : null}
-            {this.props.showViewTypeButton ? <IconButton
-                edge="start"
-                title={this.props.t('ra_Toggle view mode')}
-                style={styles.menuButton}
-                aria-label="view mode"
-                onClick={() => {
-                    const viewType = this.state.viewType === TABLE ? TILE : TABLE;
-                    this.localStorage.setItem('files.viewType', viewType);
-                    let currentDir = this.state.selected;
-                    if (isFile(currentDir)) {
-                        currentDir = getParentDir(currentDir);
-                    }
-                    this.setState({ viewType, currentDir }, () => {
-                        if (this.state.viewType === TABLE) {
-                            this.scrollToSelected();
+                {this.props.allowNonRestricted && this.props.restrictToFolder ? (
+                    <IconButton
+                        edge="start"
+                        title={
+                            this.state.restrictToFolder
+                                ? this.props.t('ra_Show all folders')
+                                : this.props.t('ra_Restrict to folder')
                         }
-                    });
-                }}
-                size="small"
-            >
-                {this.state.viewType !== TABLE ? <IconList fontSize="small" /> : <IconTile fontSize="small" />}
-            </IconButton> : null}
-            <IconButton
-                edge="start"
-                title={this.props.t('ra_Hide empty folders')}
-                style={styles.menuButton}
-                color={this.state.filterEmpty ? 'secondary' : 'inherit'}
-                aria-label="filter empty"
-                onClick={() => {
-                    this.localStorage.setItem(
-                        'file.empty',
-                        this.state.filterEmpty ? 'false' : 'true',
-                    );
-                    this.setState({ filterEmpty: !this.state.filterEmpty });
-                }}
-                size="small"
-            >
-                <EmptyFilterIcon fontSize="small" />
-            </IconButton>
-            <IconButton
-                edge="start"
-                title={this.props.t('ra_Reload files')}
-                style={styles.menuButton}
-                color="inherit"
-                aria-label="reload files"
-                onClick={() => this.setState({ folders: {} }, () => this.loadFolders())}
-                size="small"
-            >
-                <RefreshIcon fontSize="small" />
-            </IconButton>
-            {this.props.allowCreateFolder ? <IconButton
-                edge="start"
-                disabled={
-                    !this.state.selected ||
-                    !isInFolder ||
-                    (!!this.limitToPath &&
-                        !this.state.selected.startsWith(`${this.limitToPath}/`) &&
-                        this.limitToPath !== this.state.selected)
-                }
-                title={this.props.t('ra_Create folder')}
-                style={styles.menuButton}
-                color="inherit"
-                aria-label="add folder"
-                onClick={() => this.setState({ addFolder: true })}
-                size="small"
-            >
-                <AddFolderIcon fontSize="small" />
-            </IconButton> : null}
-            {this.props.allowUpload ? <IconButton
-                edge="start"
-                disabled={
-                    !this.state.selected ||
-                    !isInFolder ||
-                    (!!this.limitToPath &&
-                        !this.state.selected.startsWith(`${this.limitToPath}/`) &&
-                        this.limitToPath !== this.state.selected)
-                }
-                title={this.props.t('ra_Upload file')}
-                style={styles.menuButton}
-                color="inherit"
-                aria-label="upload file"
-                onClick={() => this.setState({ uploadFile: true })}
-                size="small"
-            >
-                <UploadIcon fontSize="small" />
-            </IconButton> : null}
-            {this.props.showTypeSelector && IconType ? <Tooltip title={this.props.t('ra_Filter files')} slotProps={{ popper: { sx: styles.tooltip } }}>
-                <IconButton size="small" onClick={e => this.setState({ showTypesMenu: e.target as HTMLButtonElement })}>
-                    <IconType fontSize="small" />
-                </IconButton>
-            </Tooltip> : null}
-            {this.state.showTypesMenu ? <Menu
-                open={!0}
-                anchorEl={this.state.showTypesMenu}
-                onClose={() => this.setState({ showTypesMenu: null })}
-            >
-                {Object.keys(FILE_TYPE_ICONS).map(type => {
-                    const MyIcon: React.FC<{ fontSize?: 'small' }> = FILE_TYPE_ICONS[type];
-                    return <MenuItem
-                        key={type}
-                        selected={this.state.filterByType === type}
+                        style={{
+                            ...styles.menuButton,
+                            ...(this.state.restrictToFolder ? styles.menuButtonRestrictActive : undefined),
+                        }}
+                        aria-label="restricted to folder"
+                        onClick={() =>
+                            this.setState({
+                                restrictToFolder:
+                                    (this.state.restrictToFolder ? '' : this.props.restrictToFolder) || '',
+                                loadAllFolders: true,
+                            })
+                        }
+                        size="small"
+                    >
+                        <RestrictedIcon fontSize="small" />
+                    </IconButton>
+                ) : null}
+                {this.props.showExpertButton ? (
+                    <IconButton
+                        edge="start"
+                        title={this.props.t('ra_Toggle expert mode')}
+                        style={{
+                            ...styles.menuButton,
+                            ...(this.state.expertMode ? styles.menuButtonExpertActive : undefined),
+                        }}
+                        aria-label="expert mode"
+                        onClick={() => this.setState({ expertMode: !this.state.expertMode })}
+                        size="small"
+                    >
+                        <IconExpert />
+                    </IconButton>
+                ) : null}
+                {this.props.showViewTypeButton ? (
+                    <IconButton
+                        edge="start"
+                        title={this.props.t('ra_Toggle view mode')}
+                        style={styles.menuButton}
+                        aria-label="view mode"
                         onClick={() => {
-                            if (type === 'all') {
-                                this.localStorage.removeItem(
-                                    'files.filterByType',
-                                );
-                                this.setState({ filterByType: '', showTypesMenu: null });
-                            } else {
-                                this.localStorage.setItem(
-                                    'files.filterByType',
-                                    type,
-                                );
-                                this.setState({ filterByType: type, showTypesMenu: null });
+                            const viewType = this.state.viewType === TABLE ? TILE : TABLE;
+                            this.localStorage.setItem('files.viewType', viewType);
+                            let currentDir = this.state.selected;
+                            if (isFile(currentDir)) {
+                                currentDir = getParentDir(currentDir);
                             }
+                            this.setState({ viewType, currentDir }, () => {
+                                if (this.state.viewType === TABLE) {
+                                    this.scrollToSelected();
+                                }
+                            });
                         }}
+                        size="small"
                     >
-                        <ListItemIcon>
-                            <MyIcon fontSize="small" />
-                        </ListItemIcon>
-                        <ListItemText>{this.props.t(`ra_fileType_${type}`)}</ListItemText>
-                    </MenuItem>;
-                })}
-            </Menu> : null}
-            <Tooltip
-                title={this.props.t('ra_Background image')}
-                slotProps={{ popper: { sx: styles.tooltip } }}
-            >
+                        {this.state.viewType !== TABLE ? <IconList fontSize="small" /> : <IconTile fontSize="small" />}
+                    </IconButton>
+                ) : null}
                 <IconButton
-                    color="inherit"
                     edge="start"
+                    title={this.props.t('ra_Hide empty folders')}
                     style={styles.menuButton}
-                    onClick={this.setStateBackgroundImage}
+                    color={this.state.filterEmpty ? 'secondary' : 'inherit'}
+                    aria-label="filter empty"
+                    onClick={() => {
+                        this.localStorage.setItem('file.empty', this.state.filterEmpty ? 'false' : 'true');
+                        this.setState({ filterEmpty: !this.state.filterEmpty });
+                    }}
                     size="small"
                 >
-                    <Brightness5Icon fontSize="small" />
+                    <EmptyFilterIcon fontSize="small" />
                 </IconButton>
-            </Tooltip>
-            {this.state.viewType !== TABLE && this.props.allowDelete ? <Tooltip
-                title={this.props.t('ra_Delete')}
-                slotProps={{ popper: { sx: styles.tooltip } }}
-            >
-                <span>
+                <IconButton
+                    edge="start"
+                    title={this.props.t('ra_Reload files')}
+                    style={styles.menuButton}
+                    color="inherit"
+                    aria-label="reload files"
+                    onClick={() => this.setState({ folders: {} }, () => this.loadFolders())}
+                    size="small"
+                >
+                    <RefreshIcon fontSize="small" />
+                </IconButton>
+                {this.props.allowCreateFolder ? (
                     <IconButton
-                        aria-label="delete"
+                        edge="start"
                         disabled={
                             !this.state.selected ||
-                            this.state.selected === 'vis.0/' ||
-                            this.state.selected === 'vis-2.0/' ||
-                            this.state.selected === USER_DATA
+                            !isInFolder ||
+                            (!!this.limitToPath &&
+                                !this.state.selected.startsWith(`${this.limitToPath}/`) &&
+                                this.limitToPath !== this.state.selected)
                         }
+                        title={this.props.t('ra_Create folder')}
+                        style={styles.menuButton}
                         color="inherit"
+                        aria-label="add folder"
+                        onClick={() => this.setState({ addFolder: true })}
+                        size="small"
+                    >
+                        <AddFolderIcon fontSize="small" />
+                    </IconButton>
+                ) : null}
+                {this.props.allowUpload ? (
+                    <IconButton
                         edge="start"
+                        disabled={
+                            !this.state.selected ||
+                            !isInFolder ||
+                            (!!this.limitToPath &&
+                                !this.state.selected.startsWith(`${this.limitToPath}/`) &&
+                                this.limitToPath !== this.state.selected)
+                        }
+                        title={this.props.t('ra_Upload file')}
                         style={styles.menuButton}
-                        onClick={e => {
-                            e.stopPropagation();
-                            if (this.suppressDeleteConfirm > Date.now()) {
-                                this.deleteItem(this.state.selected);
-                            } else {
-                                this.setState({ deleteItem: this.state.selected });
-                            }
-                        }}
+                        color="inherit"
+                        aria-label="upload file"
+                        onClick={() => this.setState({ uploadFile: true })}
                         size="small"
                     >
-                        <DeleteIcon fontSize="small" />
+                        <UploadIcon fontSize="small" />
                     </IconButton>
-                </span>
-            </Tooltip> : null}
-        </Toolbar>;
+                ) : null}
+                {this.props.showTypeSelector && IconType ? (
+                    <Tooltip
+                        title={this.props.t('ra_Filter files')}
+                        slotProps={{ popper: { sx: styles.tooltip } }}
+                    >
+                        <IconButton
+                            size="small"
+                            onClick={e => this.setState({ showTypesMenu: e.target as HTMLButtonElement })}
+                        >
+                            <IconType fontSize="small" />
+                        </IconButton>
+                    </Tooltip>
+                ) : null}
+                {this.state.showTypesMenu ? (
+                    <Menu
+                        open={!0}
+                        anchorEl={this.state.showTypesMenu}
+                        onClose={() => this.setState({ showTypesMenu: null })}
+                    >
+                        {Object.keys(FILE_TYPE_ICONS).map(type => {
+                            const MyIcon: React.FC<{ fontSize?: 'small' }> = FILE_TYPE_ICONS[type];
+                            return (
+                                <MenuItem
+                                    key={type}
+                                    selected={this.state.filterByType === type}
+                                    onClick={() => {
+                                        if (type === 'all') {
+                                            this.localStorage.removeItem('files.filterByType');
+                                            this.setState({ filterByType: '', showTypesMenu: null });
+                                        } else {
+                                            this.localStorage.setItem('files.filterByType', type);
+                                            this.setState({ filterByType: type, showTypesMenu: null });
+                                        }
+                                    }}
+                                >
+                                    <ListItemIcon>
+                                        <MyIcon fontSize="small" />
+                                    </ListItemIcon>
+                                    <ListItemText>{this.props.t(`ra_fileType_${type}`)}</ListItemText>
+                                </MenuItem>
+                            );
+                        })}
+                    </Menu>
+                ) : null}
+                <Tooltip
+                    title={this.props.t('ra_Background image')}
+                    slotProps={{ popper: { sx: styles.tooltip } }}
+                >
+                    <IconButton
+                        color="inherit"
+                        edge="start"
+                        style={styles.menuButton}
+                        onClick={this.setStateBackgroundImage}
+                        size="small"
+                    >
+                        <Brightness5Icon fontSize="small" />
+                    </IconButton>
+                </Tooltip>
+                {this.state.viewType !== TABLE && this.props.allowDelete ? (
+                    <Tooltip
+                        title={this.props.t('ra_Delete')}
+                        slotProps={{ popper: { sx: styles.tooltip } }}
+                    >
+                        <span>
+                            <IconButton
+                                aria-label="delete"
+                                disabled={
+                                    !this.state.selected ||
+                                    this.state.selected === 'vis.0/' ||
+                                    this.state.selected === 'vis-2.0/' ||
+                                    this.state.selected === USER_DATA
+                                }
+                                color="inherit"
+                                edge="start"
+                                style={styles.menuButton}
+                                onClick={e => {
+                                    e.stopPropagation();
+                                    if (this.suppressDeleteConfirm > Date.now()) {
+                                        this.deleteItem(this.state.selected);
+                                    } else {
+                                        this.setState({ deleteItem: this.state.selected });
+                                    }
+                                }}
+                                size="small"
+                            >
+                                <DeleteIcon fontSize="small" />
+                            </IconButton>
+                        </span>
+                    </Tooltip>
+                ) : null}
+            </Toolbar>
+        );
     }
 
-    findItem(
-        id: string,
-        folders?: Folders | null,
-    ) {
+    findItem(id: string, folders?: Folders | null): null | FolderOrFileItem {
         folders = folders || this.state.folders;
         if (!folders) {
             return null;
@@ -1891,10 +1962,10 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         if (!folders[parentFolder]) {
             return null;
         }
-        return folders[parentFolder].find(item => item.id === id);
+        return folders[parentFolder].find(item => item.id === id) || null;
     }
 
-    renderInputDialog() {
+    renderInputDialog(): React.JSX.Element | null {
         if (this.state.addFolder) {
             const parentFolder = this.findFirstFolder(this.state.selected);
 
@@ -1903,59 +1974,59 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                 return null;
             }
 
-            return <TextInputDialog
-                key="inputDialog"
-                applyText={this.props.t('ra_Create')}
-                cancelText={this.props.t('ra_Cancel')}
-                titleText={this.props.t('ra_Create new folder in %s', this.state.selected)}
-                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={(text: string) =>
-                    (this.state.folders[parentFolder].find(item => item.name === text)
-                        ? ''
-                        : this.props.t('ra_Duplicate name'))}
-                onClose={(name: string | null) => {
-                    if (name) {
-                        const folders: Folders = {};
-                        Object.keys(this.state.folders).forEach(
-                            folder => (folders[folder] = this.state.folders[folder]),
-                        );
-                        const parent = this.findItem(parentFolder);
-                        const id = `${parentFolder}/${name}`;
-                        folders[parentFolder].push({
-                            id,
-                            level: (parent?.level || 0) + 1,
-                            name,
-                            folder: true,
-                            temp: true,
-                        });
-
-                        folders[parentFolder].sort(sortFolders);
-
-                        folders[id] = [];
-                        const expanded = [...this.state.expanded];
-                        if (!expanded.includes(parentFolder)) {
-                            expanded.push(parentFolder);
-                            expanded.sort();
-                        }
-                        this.localStorage.setItem(
-                            'files.expanded',
-                            JSON.stringify(expanded),
-                        );
-                        this.setState({ addFolder: false, folders, expanded }, () => this.select(id));
-                    } else {
-                        this.setState({ addFolder: false });
+            return (
+                <TextInputDialog
+                    key="inputDialog"
+                    applyText={this.props.t('ra_Create')}
+                    cancelText={this.props.t('ra_Cancel')}
+                    titleText={this.props.t('ra_Create new folder in %s', this.state.selected)}
+                    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={(text: string) =>
+                        this.state.folders[parentFolder].find(item => item.name === text)
+                            ? ''
+                            : this.props.t('ra_Duplicate name')
                     }
-                }}
-                replace={(text: string) => text.replace(/[^-_\w]/, '_')}
-            />;
+                    onClose={(name: string | null) => {
+                        if (name) {
+                            const folders: Folders = {};
+                            Object.keys(this.state.folders).forEach(
+                                folder => (folders[folder] = this.state.folders[folder]),
+                            );
+                            const parent = this.findItem(parentFolder);
+                            const id = `${parentFolder}/${name}`;
+                            folders[parentFolder].push({
+                                id,
+                                level: (parent?.level || 0) + 1,
+                                name,
+                                folder: true,
+                                temp: true,
+                            });
+
+                            folders[parentFolder].sort(sortFolders);
+
+                            folders[id] = [];
+                            const expanded = [...this.state.expanded];
+                            if (!expanded.includes(parentFolder)) {
+                                expanded.push(parentFolder);
+                                expanded.sort();
+                            }
+                            this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
+                            this.setState({ addFolder: false, folders, expanded }, () => this.select(id));
+                        } else {
+                            this.setState({ addFolder: false });
+                        }
+                    }}
+                    replace={(text: string) => text.replace(/[^-_\w]/, '_')}
+                />
+            );
         }
         return null;
     }
 
-    componentDidUpdate(/* prevProps , prevState, snapshot */) {
+    componentDidUpdate(/* prevProps , prevState, snapshot */): void {
         if (this.setOpacityTimer) {
             clearTimeout(this.setOpacityTimer);
         }
@@ -1968,7 +2039,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         }, 100);
     }
 
-    findFirstFolder(id: string) {
+    findFirstFolder(id: string): string | null {
         let parentFolder = id;
         const item = this.findItem(parentFolder);
         // find folder
@@ -1997,12 +2068,13 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         const adapterName = parts.shift();
         try {
             await this.props.socket.writeFile64(adapterName || '', parts.join('/'), data);
-        } catch (e) {
-            window.alert(`Cannot write file: ${e}`);
+        } catch (e: unknown) {
+            const knownError = e as Error;
+            window.alert(`Cannot write file: ${knownError?.message}`);
         }
     }
 
-    renderUpload() {
+    renderUpload(): React.JSX.Element[] | null {
         if (this.state.uploadFile) {
             return [
                 <Fab
@@ -2034,46 +2106,47 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                                 } else {
                                     const id = `${parentFolder}/${file.name}`;
 
-                                    this.uploadFile(id, reader.result as string)
-                                        .then(() => {
-                                            if (!--count) {
-                                                this.setState({ uploadFile: false }, () => {
-                                                    if (this.supportSubscribes) {
-                                                        // open current folder
-                                                        const expanded = [...this.state.expanded];
-                                                        if (!expanded.includes(parentFolder)) {
-                                                            expanded.push(parentFolder);
-                                                            expanded.sort();
-                                                            this.localStorage.setItem(
-                                                                'files.expanded',
-                                                                JSON.stringify(expanded),
-                                                            );
-                                                        }
-                                                        this.setState({ expanded }, () => this.select(id));
-                                                    } else {
-                                                        setTimeout(
-                                                            () =>
-                                                                this.browseFolder(parentFolder, null, false, true)
-                                                                    .then(folders => {
-                                                                        // open current folder
-                                                                        const expanded = [...this.state.expanded];
-                                                                        if (!expanded.includes(parentFolder)) {
-                                                                            expanded.push(parentFolder);
-                                                                            expanded.sort();
-                                                                            this.localStorage.setItem(
-                                                                                'files.expanded',
-                                                                                JSON.stringify(expanded),
-                                                                            );
-                                                                        }
-                                                                        this.setState({ folders, expanded }, () =>
-                                                                            this.select(id));
-                                                                    }),
-                                                            500,
+                                    void this.uploadFile(id, reader.result as string).then(() => {
+                                        if (!--count) {
+                                            this.setState({ uploadFile: false }, () => {
+                                                if (this.supportSubscribes) {
+                                                    // open current folder
+                                                    const expanded = [...this.state.expanded];
+                                                    if (!expanded.includes(parentFolder)) {
+                                                        expanded.push(parentFolder);
+                                                        expanded.sort();
+                                                        this.localStorage.setItem(
+                                                            'files.expanded',
+                                                            JSON.stringify(expanded),
                                                         );
                                                     }
-                                                });
-                                            }
-                                        });
+                                                    this.setState({ expanded }, () => this.select(id));
+                                                } else {
+                                                    setTimeout(
+                                                        () =>
+                                                            this.browseFolder(parentFolder, null, false, true).then(
+                                                                folders => {
+                                                                    // open current folder
+                                                                    const expanded = [...this.state.expanded];
+                                                                    if (!expanded.includes(parentFolder)) {
+                                                                        expanded.push(parentFolder);
+                                                                        expanded.sort();
+                                                                        this.localStorage.setItem(
+                                                                            'files.expanded',
+                                                                            JSON.stringify(expanded),
+                                                                        );
+                                                                    }
+                                                                    this.setState({ folders, expanded }, () =>
+                                                                        this.select(id),
+                                                                    );
+                                                                },
+                                                            ),
+                                                        500,
+                                                    );
+                                                }
+                                            });
+                                        }
+                                    });
                                 }
                             };
 
@@ -2081,27 +2154,32 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                         });
                     }}
                 >
-                    {({ getRootProps, getInputProps }) => <div
-                        style={{
-                            ...styles.uploadDiv,
-                            ...(this.state.uploadFile === 'dragging' ? styles.uploadDivDragging : undefined),
-                        }}
-                        {...getRootProps()}
-                    >
-                        <input {...getInputProps()} />
-                        <Box component="div" sx={styles.uploadCenterDiv}>
-                            <div style={styles.uploadCenterTextAndIcon}>
-                                <UploadIcon style={styles.uploadCenterIcon} />
-                                <div style={styles.uploadCenterText}>
-                                    {this.state.uploadFile === 'dragging'
-                                        ? this.props.t('ra_Drop file here')
-                                        : this.props.t(
-                                            'ra_Place your files here or click here to open the browse dialog',
-                                        )}
+                    {({ getRootProps, getInputProps }) => (
+                        <div
+                            style={{
+                                ...styles.uploadDiv,
+                                ...(this.state.uploadFile === 'dragging' ? styles.uploadDivDragging : undefined),
+                            }}
+                            {...getRootProps()}
+                        >
+                            <input {...getInputProps()} />
+                            <Box
+                                component="div"
+                                sx={styles.uploadCenterDiv}
+                            >
+                                <div style={styles.uploadCenterTextAndIcon}>
+                                    <UploadIcon style={styles.uploadCenterIcon} />
+                                    <div style={styles.uploadCenterText}>
+                                        {this.state.uploadFile === 'dragging'
+                                            ? this.props.t('ra_Drop file here')
+                                            : this.props.t(
+                                                  'ra_Place your files here or click here to open the browse dialog',
+                                              )}
+                                    </div>
                                 </div>
-                            </div>
-                        </Box>
-                    </div>}
+                            </Box>
+                        </div>
+                    )}
                 </Dropzone>,
             ];
         }
@@ -2115,30 +2193,29 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                 this.state.folders[id]
                     ? Promise.all(this.state.folders[id].map(_item => this.deleteRecursive(_item.id)))
                     : Promise.resolve()
-            )
-                .then(() => {
-                    // If it is a folder of second level
-                    if (item.level >= 1) {
-                        const parts = id.split('/');
-                        const adapter = parts.shift();
-                        this.props.socket.deleteFolder(adapter || '', parts.join('/')).then(() => {
-                            // remove this folder
-                            const folders = JSON.parse(JSON.stringify(this.state.folders));
-                            delete folders[item.id];
-                            // delete folder from parent item
-                            const parentId = getParentDir(item.id);
-                            const parentFolder = folders[parentId];
-                            if (parentFolder) {
-                                const pos = parentFolder.findIndex((f: FolderOrFileItem) => f.id === item.id);
-                                if (pos !== -1) {
-                                    parentFolder.splice(pos, 1);
-                                }
-
-                                this.select(parentId, null, () => this.setState({ folders }));
+            ).then(() => {
+                // If it is a folder of second level
+                if (item.level >= 1) {
+                    const parts = id.split('/');
+                    const adapter = parts.shift();
+                    void this.props.socket.deleteFolder(adapter || '', parts.join('/')).then(() => {
+                        // remove this folder
+                        const folders = JSON.parse(JSON.stringify(this.state.folders));
+                        delete folders[item.id];
+                        // delete folder from parent item
+                        const parentId = getParentDir(item.id);
+                        const parentFolder = folders[parentId];
+                        if (parentFolder) {
+                            const pos = parentFolder.findIndex((f: FolderOrFileItem) => f.id === item.id);
+                            if (pos !== -1) {
+                                parentFolder.splice(pos, 1);
                             }
-                        });
-                    }
-                });
+
+                            this.select(parentId, null, () => this.setState({ folders }));
+                        }
+                    });
+                }
+            });
         }
 
         const parts = id.split('/');
@@ -2151,128 +2228,135 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         return Promise.resolve();
     }
 
-    deleteItem(deleteItem: string) {
+    deleteItem(deleteItem: string): void {
         deleteItem = deleteItem || this.state.deleteItem;
 
         this.setState({ deleteItem: '' }, () =>
-            this.deleteRecursive(deleteItem)
-                .then(() => {
-                    const newState: Partial<FileBrowserState> = {};
-                    const pos = this.state.expanded.indexOf(deleteItem);
-                    if (pos !== -1) {
-                        const expanded = [...this.state.expanded];
-                        expanded.splice(pos, 1);
-                        this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
-                        newState.expanded = expanded;
-                    }
+            this.deleteRecursive(deleteItem).then(() => {
+                const newState: Partial<FileBrowserState> = {};
+                const pos = this.state.expanded.indexOf(deleteItem);
+                if (pos !== -1) {
+                    const expanded = [...this.state.expanded];
+                    expanded.splice(pos, 1);
+                    this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
+                    newState.expanded = expanded;
+                }
 
-                    if (this.state.selected === deleteItem) {
-                        const parts = this.state.selected.split('/');
-                        parts.pop();
-                        newState.selected = parts.join('/');
-                    }
+                if (this.state.selected === deleteItem) {
+                    const parts = this.state.selected.split('/');
+                    parts.pop();
+                    newState.selected = parts.join('/');
+                }
 
-                    if (!this.supportSubscribes) {
-                        const parentFolder = this.findFirstFolder(deleteItem);
-                        const folders: Folders = {};
+                if (!this.supportSubscribes) {
+                    const parentFolder = this.findFirstFolder(deleteItem);
+                    const folders: Folders = {};
 
-                        Object.keys(this.state.folders).forEach(name => {
-                            if (name !== parentFolder && !name.startsWith(`${parentFolder}/`)) {
-                                folders[name] = this.state.folders[name];
-                            }
-                        });
+                    Object.keys(this.state.folders).forEach(name => {
+                        if (name !== parentFolder && !name.startsWith(`${parentFolder}/`)) {
+                            folders[name] = this.state.folders[name];
+                        }
+                    });
 
-                        newState.folders = folders;
+                    newState.folders = folders;
 
-                        this.setState(newState as FileBrowserState, () =>
-                            setTimeout(() => {
-                                (this.browseFolders([...this.state.expanded], folders) as Promise<Folders>)
-                                    .then(_folders => this.setState({ folders: _folders }));
-                            }, 200));
-                    } else {
-                        // @ts-expect-error fix later
-                        this.setState(newState);
-                    }
-                }));
+                    this.setState(newState as FileBrowserState, () =>
+                        setTimeout(() => {
+                            this.browseFolders([...this.state.expanded], folders)
+                                .then(_folders => this.setState({ folders: _folders }))
+                                .catch(e => console.error(e));
+                        }, 200),
+                    );
+                } else {
+                    this.setState(newState as FileBrowserState);
+                }
+            }),
+        );
     }
 
-    renderDeleteDialog() {
+    renderDeleteDialog(): React.JSX.Element | null {
         if (this.state.deleteItem) {
-            return <Dialog
-                key="deleteDialog"
-                open={!0}
-                onClose={() => this.setState({ deleteItem: '' })}
-                aria-labelledby="ar_dialog_file_delete_title"
-            >
-                <DialogTitle id="ar_dialog_file_delete_title">
-                    {this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop() as string)}
-                </DialogTitle>
-                <DialogContent>
-                    <DialogContentText>{this.props.t('ra_Are you sure?')}</DialogContentText>
-                </DialogContent>
-                <DialogActions>
-                    <Button
-                        color="grey"
-                        variant="contained"
-                        onClick={() => {
-                            this.suppressDeleteConfirm = Date.now() + 60000 * 5;
-                            this.deleteItem('');
-                        }}
-                    >
-                        {this.props.t('ra_Delete (no confirm for 5 mins)')}
-                    </Button>
-                    <Button
-                        variant="contained"
-                        onClick={() => this.deleteItem('')}
-                        color="primary"
-                        autoFocus
-                    >
-                        {this.props.t('ra_Delete')}
-                    </Button>
-                    <Button
-                        variant="contained"
-                        onClick={() => this.setState({ deleteItem: '' })}
-                        color="grey"
-                    >
-                        {this.props.t('ra_Cancel')}
-                    </Button>
-                </DialogActions>
-            </Dialog>;
+            return (
+                <Dialog
+                    key="deleteDialog"
+                    open={!0}
+                    onClose={() => this.setState({ deleteItem: '' })}
+                    aria-labelledby="ar_dialog_file_delete_title"
+                >
+                    <DialogTitle id="ar_dialog_file_delete_title">
+                        {this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop() as string)}
+                    </DialogTitle>
+                    <DialogContent>
+                        <DialogContentText>{this.props.t('ra_Are you sure?')}</DialogContentText>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button
+                            color="grey"
+                            variant="contained"
+                            onClick={() => {
+                                this.suppressDeleteConfirm = Date.now() + 60000 * 5;
+                                this.deleteItem('');
+                            }}
+                        >
+                            {this.props.t('ra_Delete (no confirm for 5 mins)')}
+                        </Button>
+                        <Button
+                            variant="contained"
+                            onClick={() => this.deleteItem('')}
+                            color="primary"
+                            autoFocus
+                        >
+                            {this.props.t('ra_Delete')}
+                        </Button>
+                        <Button
+                            variant="contained"
+                            onClick={() => this.setState({ deleteItem: '' })}
+                            color="grey"
+                        >
+                            {this.props.t('ra_Cancel')}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+            );
         }
-        return false;
+        return null;
     }
 
-    renderViewDialog() {
-        return this.state.viewer ? <FileViewer
-            supportSubscribes={this.supportSubscribes}
-            key={this.state.viewer}
-            href={this.state.viewer}
-            formatEditFile={this.state.formatEditFile}
-            themeType={this.props.themeType}
-            setStateBackgroundImage={this.setStateBackgroundImage}
-            getStyleBackgroundImage={this.getStyleBackgroundImage}
-            t={this.props.t}
-            socket={this.props.socket}
-            lang={this.props.lang}
-            expertMode={this.state.expertMode}
-            onClose={() => this.setState({ viewer: '', formatEditFile: '' })}
-        /> : null;
+    renderViewDialog(): React.JSX.Element | null {
+        return this.state.viewer ? (
+            <FileViewer
+                supportSubscribes={this.supportSubscribes}
+                key={this.state.viewer}
+                href={this.state.viewer}
+                formatEditFile={this.state.formatEditFile}
+                themeType={this.props.themeType}
+                setStateBackgroundImage={this.setStateBackgroundImage}
+                getStyleBackgroundImage={this.getStyleBackgroundImage}
+                t={this.props.t}
+                socket={this.props.socket}
+                lang={this.props.lang}
+                expertMode={this.state.expertMode}
+                onClose={() => this.setState({ viewer: '', formatEditFile: '' })}
+            />
+        ) : null;
     }
 
-    renderError() {
+    renderError(): React.JSX.Element | null {
         if (this.state.errorText) {
-            return <ErrorDialog
-                key="errorDialog"
-                text={this.state.errorText}
-                onClose={() => this.setState({ errorText: '' })}
-            />;
+            return (
+                <ErrorDialog
+                    key="errorDialog"
+                    text={this.state.errorText}
+                    onClose={() => this.setState({ errorText: '' })}
+                />
+            );
         }
         return null;
     }
 
     // used in tabs/Files
     // eslint-disable-next-line react/no-unused-class-component-methods
-    updateItemsAcl(info: FolderOrFileItem[]) {
+    updateItemsAcl(info: FolderOrFileItem[]): void {
         this.cacheFolders = this.cacheFolders || JSON.parse(JSON.stringify(this.state.folders));
         let changed;
 
@@ -2296,7 +2380,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         }
     }
 
-    changeToPath() {
+    changeToPath(): void {
         setTimeout(() => {
             if (this.state.path !== this.state.selected && (!this.lastSelect || Date.now() - this.lastSelect > 100)) {
                 let folder = this.state.path;
@@ -2313,79 +2397,100 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                                         err === NOT_FOUND
                                             ? this.props.t('ra_Cannot find "%s"', folder)
                                             : this.props.t('ra_Cannot read "%s"', folder),
-                                }));
+                                }),
+                            );
                     } else {
                         resolve(true);
                     }
                 })
-                    .then(result =>
-                        result && this.setState({ selected: this.state.path, currentDir: folder, pathFocus: false }));
+                    .then(
+                        result =>
+                            result &&
+                            this.setState({ selected: this.state.path, currentDir: folder, pathFocus: false }),
+                    )
+                    .catch(e => console.error(e));
             } else if (!this.lastSelect || Date.now() - this.lastSelect > 100) {
                 this.setState({ pathFocus: false });
             }
         }, 100);
     }
 
-    renderBreadcrumb() {
+    renderBreadcrumb(): React.JSX.Element {
         const parts = this.state.currentDir.startsWith('/')
             ? this.state.currentDir.split('/')
             : `/${this.state.currentDir}`.split('/');
         const p: string[] = [];
-        return <Breadcrumbs style={{ paddingLeft: 8 }}>
-            {parts.map((part, i) => {
-                if (part) {
-                    p.push(part);
-                }
-                const path = p.join('/');
-                if (i < parts.length - 1) {
-                    return <Box
-                        component="div"
-                        key={`${this.state.selected}_${i}`}
-                        sx={styles.pathDivBreadcrumbDir}
-                        onClick={e => this.changeFolder(e, path || '/')}
-                    >
-                        {part || this.props.t('ra_Root')}
-                    </Box>;
-                }
+        return (
+            <Breadcrumbs style={{ paddingLeft: 8 }}>
+                {parts.map((part, i) => {
+                    if (part) {
+                        p.push(part);
+                    }
+                    const path = p.join('/');
+                    if (i < parts.length - 1) {
+                        return (
+                            <Box
+                                component="div"
+                                key={`${this.state.selected}_${i}`}
+                                sx={styles.pathDivBreadcrumbDir}
+                                onClick={e => this.changeFolder(e, path || '/')}
+                            >
+                                {part || this.props.t('ra_Root')}
+                            </Box>
+                        );
+                    }
 
-                return <div
-                    style={styles.pathDivBreadcrumbSelected}
-                    key={`${this.state.selected}_${i}`}
-                    onClick={() => this.setState({ pathFocus: true })}
-                >
-                    {part}
-                </div>;
-            })}
-        </Breadcrumbs>;
+                    return (
+                        <div
+                            style={styles.pathDivBreadcrumbSelected}
+                            key={`${this.state.selected}_${i}`}
+                            onClick={() => this.setState({ pathFocus: true })}
+                        >
+                            {part}
+                        </div>
+                    );
+                })}
+            </Breadcrumbs>
+        );
     }
 
-    renderPath() {
-        return <Box component="div" key="path" sx={styles.pathDiv}>
-            {this.state.pathFocus ?
-                <Input
-                    value={this.state.path}
-                    onKeyDown={e => {
-                        if (e.key === 'Enter') {
-                            this.changeToPath();
-                        } else if (e.key === 'Escape') {
-                            this.setState({ pathFocus: false });
+    renderPath(): React.JSX.Element {
+        return (
+            <Box
+                component="div"
+                key="path"
+                sx={styles.pathDiv}
+            >
+                {this.state.pathFocus ? (
+                    <Input
+                        value={this.state.path}
+                        onKeyDown={e => {
+                            if (e.key === 'Enter') {
+                                this.changeToPath();
+                            } else if (e.key === 'Escape') {
+                                this.setState({ pathFocus: false });
+                            }
+                        }}
+                        endAdornment={
+                            <IconButton
+                                size="small"
+                                onClick={() => this.changeToPath()}
+                            >
+                                <EnterIcon />
+                            </IconButton>
                         }
-                    }}
-                    endAdornment={
-                        <IconButton size="small" onClick={() => this.changeToPath()}>
-                            <EnterIcon />
-                        </IconButton>
-                    }
-                    onBlur={() => this.changeToPath()}
-                    onChange={e => this.setState({ path: e.target.value })}
-                    style={styles.pathDivInput}
-                />
-                :
-                this.renderBreadcrumb()}
-        </Box>;
+                        onBlur={() => this.changeToPath()}
+                        onChange={e => this.setState({ path: e.target.value })}
+                        style={styles.pathDivInput}
+                    />
+                ) : (
+                    this.renderBreadcrumb()
+                )}
+            </Box>
+        );
     }
 
-    render() {
+    render(): React.JSX.Element {
         if (!this.props.ready) {
             return <LinearProgress />;
         }
@@ -2395,48 +2500,50 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
             setTimeout(() => {
                 this.setState({ loadAllFolders: false, folders: {} }, () => {
                     this.foldersLoading = false;
-                    this.loadFolders()
-                        .catch(error => console.error(`Cannot load folders: ${error}`));
+                    this.loadFolders().catch(error => console.error(`Cannot load folders: ${error}`));
                 });
             }, 300);
         }
 
-        return <div
-            style={{ ...styles.root, ...this.props.style }}
-            className={this.props.className}
-        >
-            {this.props.showToolbar ? this.renderToolbar() : null}
-            {this.state.viewType === TILE ? this.renderPath() : null}
+        return (
             <div
-                style={{
-                    ...styles.filesDiv,
-                    ...styles[`filesDiv${this.state.viewType}`],
-                }}
-                onClick={e => {
-                    if (this.state.viewType !== TABLE) {
-                        if (this.state.selected !== (this.state.currentDir || '/')) {
-                            this.changeFolder(e, this.state.currentDir || '/');
-                        } else {
-                            e.stopPropagation();
-                        }
-                    }
-                }}
+                style={{ ...styles.root, ...this.props.style }}
+                className={this.props.className}
             >
-                {this.state.viewType === TABLE
-                    ? this.renderItems('/')
-                    : this.renderItems(this.state.currentDir || '/')}
-                {this.state.viewType !== TABLE ?
-                    <div style={styles.filesDivHint}>{this.props.t('ra_select_folder_hint')}</div> : null}
+                {this.props.showToolbar ? this.renderToolbar() : null}
+                {this.state.viewType === TILE ? this.renderPath() : null}
+                <div
+                    style={{
+                        ...styles.filesDiv,
+                        ...styles[`filesDiv${this.state.viewType}`],
+                    }}
+                    onClick={e => {
+                        if (this.state.viewType !== TABLE) {
+                            if (this.state.selected !== (this.state.currentDir || '/')) {
+                                this.changeFolder(e, this.state.currentDir || '/');
+                            } else {
+                                e.stopPropagation();
+                            }
+                        }
+                    }}
+                >
+                    {this.state.viewType === TABLE
+                        ? this.renderItems('/')
+                        : this.renderItems(this.state.currentDir || '/')}
+                    {this.state.viewType !== TABLE ? (
+                        <div style={styles.filesDivHint}>{this.props.t('ra_select_folder_hint')}</div>
+                    ) : null}
+                </div>
+                {this.props.allowUpload ? this.renderInputDialog() : null}
+                {this.props.allowUpload ? this.renderUpload() : null}
+                {this.props.allowDelete ? this.renderDeleteDialog() : null}
+                {this.props.allowView ? this.renderViewDialog() : null}
+                {this.state.modalEditOfAccess && this.props.modalEditOfAccessControl
+                    ? this.props.modalEditOfAccessControl(this)
+                    : null}
+                {this.renderError()}
             </div>
-            {this.props.allowUpload ? this.renderInputDialog() : null}
-            {this.props.allowUpload ? this.renderUpload() : null}
-            {this.props.allowDelete ? this.renderDeleteDialog() : null}
-            {this.props.allowView ? this.renderViewDialog() : null}
-            {this.state.modalEditOfAccess && this.props.modalEditOfAccessControl
-                ? this.props.modalEditOfAccessControl(this)
-                : null}
-            {this.renderError()}
-        </div>;
+        );
     }
 }