@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/src/Components/FileBrowser.tsx

@@ -1,2414 +1,2550 @@
-/**
- * Copyright 2020-2024, Denis Haev <dogafox@gmail.com>
- *
- * MIT License
- *
- * */
-import React, { Component } from 'react';
-import Dropzone from 'react-dropzone';
-
-import {
-    LinearProgress,
-    ListItemIcon,
-    ListItemText,
-    Menu,
-    MenuItem,
-    Tooltip,
-    CircularProgress,
-    Toolbar,
-    IconButton,
-    Fab,
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogContentText,
-    DialogActions,
-    Button,
-    Input,
-    Breadcrumbs,
-    Box,
-} from '@mui/material';
-
-// MUI Icons
-import {
-    Refresh as RefreshIcon,
-    Close as CloseIcon,
-    Bookmark as JsonIcon,
-    BookmarkBorder as CssIcon,
-    Description as HtmlIcon,
-    Edit as EditIcon,
-    Code as JSIcon,
-    InsertDriveFile as FileIcon,
-    Publish as UploadIcon,
-    MusicNote as MusicIcon,
-    SaveAlt as DownloadIcon,
-    CreateNewFolder as AddFolderIcon,
-    FolderOpen as EmptyFilterIcon,
-    List as IconList,
-    ViewModule as IconTile,
-    ArrowBack as IconBack,
-    Delete as DeleteIcon,
-    Brightness6 as Brightness5Icon,
-    Image as TypeIconImages,
-    FontDownload as TypeIconTxt,
-    AudioFile as TypeIconAudio,
-    Videocam as TypeIconVideo,
-    KeyboardReturn as EnterIcon,
-    FolderSpecial as RestrictedIcon,
-} from '@mui/icons-material';
-
-import type { Connection } from '@iobroker/socket-client';
-
-import ErrorDialog from '../Dialogs/Error';
-import Utils from './Utils';
-import TextInputDialog from '../Dialogs/TextInput';
-
-// Custom Icons
-import IconExpert from '../icons/IconExpert';
-import IconClosed from '../icons/IconClosed';
-import IconOpen from '../icons/IconOpen';
-import IconNoIcon from '../icons/IconNoIcon';
-import Icon from './Icon';
-
-import withWidth from './withWidth';
-import {
-    ThemeName, ThemeType,
-    Translate, IobTheme,
-} from '../types';
-
-import FileViewer, { EXTENSIONS } from './FileViewer';
-
-const ROW_HEIGHT   = 32;
-const BUTTON_WIDTH = 32;
-const TILE_HEIGHT  = 120;
-const TILE_WIDTH   = 64;
-
-const NOT_FOUND = 'Not found';
-
-// Todo: replace with js-controller types
-export interface MetaACL extends ioBroker.ObjectACL {
-    file: number;
-}
-
-// Todo: replace with js-controller types
-export interface MetaObject extends ioBroker.MetaObject {
-    acl: MetaACL;
-}
-
-const FILE_TYPE_ICONS: Record<string, React.FC<{ fontSize?: 'small' }>> = {
-    all: FileIcon,
-    images: TypeIconImages,
-    code: JSIcon,
-    txt: TypeIconTxt,
-    audio: TypeIconAudio,
-    video: TypeIconVideo,
-};
-
-const styles: Record<string, any> = {
-    dialog: (theme: IobTheme) => ({
-        height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
-    }),
-    root: {
-        width: '100%',
-        overflow: 'hidden',
-        height: '100%',
-        position: 'relative',
-    },
-    filesDiv: {
-        width: 'calc(100% - 16px)',
-        overflowX: 'hidden',
-        overflowY: 'auto',
-        padding: 8,
-    },
-    filesDivHint: {
-        position: 'absolute',
-        bottom: 0,
-        left: 20,
-        opacity: 0.7,
-        fontStyle: 'italic',
-        fontSize: 12,
-    },
-    filesDivTable: {
-        height: 'calc(100% - 56px)',
-    },
-    filesDivTile: {
-        height: `calc(100% - ${48 * 2 + 8}px)`,
-        display: 'flex',
-        alignContent: 'flex-start',
-        alignItems: 'stretch',
-        flexWrap: 'wrap',
-        flex: `0 0 ${TILE_WIDTH}px`,
-    },
-
-    itemTile: (theme: IobTheme) => ({
-        position: 'relative',
-        userSelect: 'none',
-        cursor: 'pointer',
-        height: TILE_HEIGHT,
-        width: TILE_WIDTH,
-        display: 'inline-block',
-        textAlign: 'center',
-        opacity: 0.1,
-        transition: 'opacity 1s',
-        margin: 4,
-        '&:hover': {
-            background: theme.palette.secondary.light,
-            color: Utils.invertColor(theme.palette.secondary.main, true),
-        },
-    }),
-    itemNameFolderTile: {
-        fontWeight: 'bold',
-    },
-    itemNameTile: {
-        width: '100%',
-        height: 32,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        fontSize: 12,
-        textAlign: 'center',
-        wordBreak: 'break-all',
-    },
-    itemFolderIconTile: (theme: IobTheme) => ({
-        width: '100%',
-        height: TILE_HEIGHT - 32 - 16 - 8, // name + size
-        display: 'block',
-        pl: 1,
-        color: theme.palette.secondary.main || '#fbff7d',
-    }),
-    itemFolderIconBack: (theme: IobTheme) => ({
-        position: 'absolute',
-        top: 22,
-        left: 18,
-        zIndex: 1,
-        color: theme.palette.mode === 'dark' ? '#FFF' : '#000',
-    }),
-    itemSizeTile: {
-        width: '100%',
-        height: 16,
-        textAlign: 'center',
-        fontSize: 10,
-    },
-    itemImageTile: {
-        width: 'calc(100% - 8px)',
-        height: TILE_HEIGHT - 32 - 16 - 8, // name + size
-        margin: 4,
-        display: 'block',
-        textAlign: 'center',
-        objectFit: 'contain',
-    },
-    itemIconTile: {
-        width: '100%',
-        height: TILE_HEIGHT - 32 - 16 - 8, // name + size
-        display: 'block',
-        objectFit: 'contain',
-    },
-
-    itemSelected: (theme: IobTheme) => ({
-        background: theme.palette.primary.main,
-        color: Utils.invertColor(theme.palette.primary.main, true),
-    }),
-
-    itemTable: (theme: IobTheme) => ({
-        userSelect: 'none',
-        cursor: 'pointer',
-        height: ROW_HEIGHT,
-        display: 'inline-flex',
-        lineHeight: `${ROW_HEIGHT}px`,
-        '&:hover': {
-            background: theme.palette.secondary.light,
-            color: Utils.invertColor(theme.palette.secondary.main, true),
-        },
-    }),
-    itemNameTable: {
-        display: 'inline-block',
-        pl: '10px',
-        fontSize: '1rem',
-        verticalAlign: 'top',
-        flexGrow: 1,
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        '@media screen and (max-width: 500px)': {
-            textAlign: 'end',
-            direction: 'rtl',
-        },
-    },
-    itemNameFolderTable: {
-        fontWeight: 'bold',
-    },
-    itemSizeTable: {
-        display: 'inline-block',
-        width: 60,
-        verticalAlign: 'top',
-        textAlign: 'right',
-        whiteSpace: 'nowrap',
-    },
-    itemAccessTable: {
-        // display: 'inline-block',
-        verticalAlign: 'top',
-        width: 60,
-        textAlign: 'right',
-        paddingRight: 5,
-        display: 'flex',
-        justifyContent: 'center',
-    },
-    itemImageTable: {
-        display: 'inline-block',
-        width: 30,
-        marginTop: 1,
-        objectFit: 'contain',
-        maxHeight: 30,
-    },
-    itemNoImageTable: {
-        marginTop: 6,
-    },
-    itemIconTable: {
-        display: 'inline-block',
-        marginTop: 1,
-        width: 30,
-        height: 30,
-    },
-    itemFolderTable: {
-
-    },
-    itemFolderTemp: {
-        opacity: 0.4,
-    },
-    itemFolderIconTable: (theme: IobTheme) => ({
-        marginTop: 1,
-        marginLeft: 8,
-        display: 'inline-block',
-        width: 30,
-        height: 30,
-        color: theme.palette.secondary.main || '#fbff7d',
-    }),
-    itemDownloadButtonTable: (theme: IobTheme) => ({
-        display: 'inline-block',
-        width: BUTTON_WIDTH,
-        height: ROW_HEIGHT,
-        minWidth: BUTTON_WIDTH,
-        verticalAlign: 'middle',
-        textAlign: 'center',
-        padding: 0,
-        borderRadius: `${BUTTON_WIDTH / 2}px`,
-        '&:hover': {
-            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)',
-        },
-        '& span': {
-            pt: '9px',
-        },
-        '& svg': {
-            width: 14,
-            height: 14,
-            fontSize: '1rem',
-            mt: '-3px',
-            verticalAlign: 'middle',
-            color: theme.palette.mode === 'dark' ? '#EEE' : '#111',
-        },
-    }),
-    itemDownloadEmptyTable: {
-        display: 'inline-block',
-        width: BUTTON_WIDTH,
-        height: ROW_HEIGHT,
-        minWidth: BUTTON_WIDTH,
-        padding: 0,
-    },
-    itemAclButtonTable: {
-        width: BUTTON_WIDTH,
-        height: ROW_HEIGHT,
-        minWidth: BUTTON_WIDTH,
-        verticalAlign: 'top',
-        padding: 0,
-        fontSize: 12,
-        display: 'flex',
-    },
-    itemDeleteButtonTable: {
-        display: 'inline-block',
-        width: BUTTON_WIDTH,
-        height: ROW_HEIGHT,
-        minWidth: BUTTON_WIDTH,
-        verticalAlign: 'top',
-        padding: 0,
-        '& svg': {
-            width: 18,
-            height: 18,
-            fontSize: '1.5rem',
-        },
-    },
-
-    uploadDiv: {
-        top: 0,
-        zIndex: 1,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        position: 'absolute',
-        opacity: 0.9,
-        textAlign: 'center',
-        background: '#FFFFFF',
-    },
-    uploadDivDragging: {
-        opacity: 1,
-    },
-
-    uploadCenterDiv: (theme: IobTheme) => ({
-        m: '20px',
-        border: '3px dashed grey',
-        borderRadius: '30px',
-        width: 'calc(100% - 40px)',
-        height: 'calc(100% - 40px)',
-        position: 'relative',
-        color: theme.palette.mode === 'dark' ? '#222' : '#CCC',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    }),
-    uploadCenterIcon: {
-        width: '25%',
-        height: '25%',
-    },
-    uploadCenterText: {
-        fontSize: 24,
-        fontWeight: 'bold',
-    },
-    uploadCloseButton: {
-        zIndex: 2,
-        position: 'absolute',
-        top: 30,
-        right: 30,
-    },
-    uploadCenterTextAndIcon: {
-        position: 'absolute',
-        height: '30%',
-        width: '100%',
-        margin: 'auto',
-        opacity: 0.3,
-    },
-    menuButtonExpertActive: {
-        color: '#c00000',
-    },
-    menuButtonRestrictActive: {
-        color: '#c05000',
-    },
-    pathDiv: (theme: IobTheme) => ({
-        display: 'flex',
-        width: 'calc(100% - 16px)',
-        ml: 1,
-        mr: 1,
-        textOverflow: 'clip',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        backgroundColor: theme.palette.secondary.main,
-    }),
-    pathDivInput: {
-        width: '100%',
-    },
-    pathDivBreadcrumbDir: (theme: IobTheme) => ({
-        pl: '2px',
-        pr: '2px',
-        cursor: 'pointer',
-        '&:hover': {
-            background: theme.palette.primary.main,
-        },
-    }),
-    backgroundImageLight: {
-        background: 'white',
-    },
-    backgroundImageDark: {
-        background: 'black',
-    },
-    backgroundImageColored: {
-        background: 'silver',
-    },
-    specialFolder: (theme: IobTheme) => ({
-        color: theme.palette.mode === 'dark' ? '#229b0f' : '#5dd300',
-    }),
-    tooltip: {
-        pointerEvents: 'none',
-    },
-};
-
-const USER_DATA = '0_userdata.0';
-
-function getParentDir(dir: string | null): string {
-    const parts = (dir || '').split('/');
-    if (parts.length) {
-        parts.pop();
-    }
-    return parts.join('/');
-}
-
-function isFile(path: string): boolean {
-    const ext = Utils.getFileExtension(path);
-    return !!(ext?.toLowerCase().match(/[a-z]+/) && ext.length < 5);
-}
-
-const TABLE = 'Table';
-const TILE = 'Tile';
-
-export interface FileBrowserProps {
-    /** The key to identify this component. */
-    key?: string;
-    /** Additional styling for this component. */
-    style?: React.CSSProperties;
-    /** The CSS class name. */
-    className?: string;
-    /** Translation function. */
-    t: Translate;
-    /** The selected language. */
-    lang: ioBroker.Languages;
-    /** The socket connection. */
-    socket: Connection;
-    /** Is the component data ready. */
-    ready?: boolean;
-    /** Is expert mode enabled? (default: false) */
-    expertMode?: boolean;
-    /** Show the toolbar? (default: false) */
-    showToolbar?: boolean;
-    /** If defined, allow selecting only files from this folder and subfolders */
-    limitPath?: string;
-    /** Allow upload of new files? (default: false) */
-    allowUpload?: boolean;
-    /** Allow download of files? (default: false) */
-    allowDownload?: boolean;
-    /** Allow creation of new folders? (default: false) */
-    allowCreateFolder?: boolean;
-    /** Allow deleting files? (default: false) */
-    allowDelete?: boolean;
-    /** Allow viewing files? (default: false) */
-    allowView?: boolean;
-    /** Prefix (default: '.') */
-    imagePrefix?: string;
-    /** Show the expert button? */
-    showExpertButton?: boolean;
-    /** Type of view */
-    viewType?: 'Table' | 'Tile';
-    /** Show the buttons to switch the view from table to tile? (default: false) */
-    showViewTypeButton?: boolean;
-    /** The ID of the selected file. */
-    selected?: string | string[];
-    /** The file extensions to show, like ['png', 'svg', 'bmp', 'jpg', 'jpeg', 'gif']. */
-    filterFiles?: string[];
-    /** The file extension categories to show. */
-    filterByType?: 'images' | 'code' | 'txt';
-    /** Callback for file selection. */
-    onSelect?: (id: string | string[], isDoubleClick?: boolean, isFolder?: boolean) => void;
-    /** Theme name */
-    themeName?: ThemeName;
-    /** Theme type. */
-    themeType?: ThemeType;
-    /** Theme object. */
-    theme: IobTheme;
-
-    /** Padding in pixels for folder levels */
-    levelPadding?: number;
-
-    restrictToFolder?: string;
-
-    // eslint-disable-next-line no-use-before-define
-    modalEditOfAccessControl?: (obj: FileBrowserClass) => React.JSX.Element | null;
-
-    allowNonRestricted?: boolean;
-
-    showTypeSelector?: boolean;
-}
-
-export interface FolderOrFileItem {
-    id: string;
-    level: number;
-    name: string;
-    folder: boolean;
-    temp?: boolean;
-
-    size?: number | undefined;
-    ext?: string | null;
-    modified?: number;
-    title?: ioBroker.StringOrTranslated;
-    meta?: boolean;
-    from?: string;
-    ts?: number;
-    color?: string;
-    icon?: string;
-    acl?: ioBroker.EvaluatedFileACL | MetaACL;
-}
-
-export type Folders = Record<string, FolderOrFileItem[]>;
-
-function sortFolders(a: FolderOrFileItem, b: FolderOrFileItem) {
-    if (a.folder && b.folder) {
-        return a.name > b.name ? 1 : (a.name < b.name ? -1 : 0);
-    }
-    if (a.folder) {
-        return -1;
-    }
-    if (b.folder) {
-        return 1;
-    }
-    return a.name > b.name ? 1 : (a.name < b.name ? -1 : 0);
-}
-
-interface FileBrowserState {
-    viewType: string;
-    folders: Folders;
-    filterEmpty: boolean;
-    expanded: string[];
-    currentDir: string;
-    expertMode: boolean;
-    addFolder: boolean;
-    uploadFile: boolean | 'dragging';
-    deleteItem: string;
-    viewer: string;
-    formatEditFile: string | null;
-    path: string;
-    selected: string;
-    errorText: string;
-    modalEditOfAccess: boolean;
-    backgroundImage: string | null;
-    queueLength: number;
-    loadAllFolders: boolean;
-    fileErrors: string[];
-    filterByType: string;
-    showTypesMenu: HTMLButtonElement | null;
-    restrictToFolder: string;
-    pathFocus: boolean;
-}
-
-export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserState> {
-    private readonly imagePrefix: string;
-
-    private readonly levelPadding: number;
-
-    private mounted: boolean;
-
-    private suppressDeleteConfirm: number;
-
-    private browseList:
-        | {
-              processing?: boolean;
-              resolve: null | ((files: ioBroker.ReadDirResult[]) => void);
-              reject: null | ((e: any) => void);
-              adapter: string | null;
-              relPath: string | null;
-          }[]
-        | null;
-
-    private browseListRunning: boolean;
-
-    private initialReadFinished: boolean;
-
-    private supportSubscribes: boolean | null;
-
-    private _tempTimeout: Record<string, ReturnType<typeof setTimeout>>;
-
-    private readonly limitToObjectID: string | null = null;
-
-    private readonly limitToPath: string | null = null;
-
-    private lastSelect: number | null = null;
-
-    private setOpacityTimer: ReturnType<typeof setTimeout> | null = null;
-
-    private cacheFoldersTimeout: ReturnType<typeof setTimeout> | null = null;
-
-    private foldersLoading: boolean | null = null;
-
-    private cacheFolders: Folders | null = null;
-
-    private readonly localStorage: Storage;
-
-    constructor(props: FileBrowserProps) {
-        super(props);
-
-        this.localStorage = ((window as any)._localStorage || window.localStorage);
-        const expandedStr = this.localStorage.getItem('files.expanded') || '[]';
-
-        if (this.props.limitPath) {
-            const parts = this.props.limitPath.split('/');
-            this.limitToObjectID = parts[0];
-            this.limitToPath = !parts.length ? null : parts.length === 1 && parts[0] === '' ? null : parts.join('/');
-            if (this.limitToPath && this.limitToPath.endsWith('/')) {
-                this.limitToPath.substring(0, this.limitToPath.length - 1);
-            }
-        }
-
-        let expanded: string[];
-        try {
-            expanded = JSON.parse(expandedStr);
-            if (this.limitToPath) {
-                expanded = expanded.filter(id => id.startsWith(`${this.limitToPath}/`) ||
-                    id === this.limitToPath || this.limitToPath?.startsWith(`${id}/`));
-            }
-        } catch {
-            expanded = [];
-        }
-
-        let viewType;
-        if (this.props.showViewTypeButton) {
-            viewType = this.localStorage.getItem('files.viewType') || TABLE;
-        } else {
-            viewType = TABLE;
-        }
-
-        let selected =
-            this.props.selected ||
-            this.localStorage.getItem('files.selected') ||
-            USER_DATA;
-
-        let currentDir: string;
-
-        if (props.restrictToFolder) {
-            selected = props.restrictToFolder;
-            currentDir = props.restrictToFolder;
-            const parts = props.restrictToFolder.split('/');
-            expanded = [];
-            let path = '';
-            for (let i = 0; i < parts.length; i++) {
-                path += (path ? '/' : '') + parts[i];
-                expanded.push(path);
-            }
-        } else {
-            // TODO: Now we do not support multiple selection
-            if (Array.isArray(selected)) {
-                selected = selected[0];
-            }
-
-            if (isFile(selected)) {
-                currentDir = getParentDir(selected);
-            } else {
-                currentDir = selected;
-            }
-        }
-        const backgroundImage =
-            this.localStorage.getItem('files.backgroundImage') || null;
-
-        this.state = {
-            viewType,
-            folders: {},
-            filterEmpty: this.localStorage.getItem('files.empty') !== 'false',
-            expanded,
-            currentDir,
-            expertMode: !!props.expertMode,
-            addFolder: false,
-            uploadFile: false,
-            deleteItem: '',
-            // marked: [],
-            viewer: '',
-            formatEditFile: '',
-            path: selected,
-            selected,
-            errorText: '',
-            modalEditOfAccess: false,
-            backgroundImage,
-            queueLength: 0,
-            loadAllFolders: false,
-            // allFoldersLoaded: false,
-            fileErrors: [],
-            filterByType: props.filterByType || window.localStorage.getItem('files.filterByType') || '',
-            showTypesMenu: null,
-            restrictToFolder: props.restrictToFolder || '',
-            pathFocus: false,
-        };
-
-        this.imagePrefix = this.props.imagePrefix || './files/';
-
-        this.levelPadding = this.props.levelPadding || 20;
-        this.mounted = true;
-        this.suppressDeleteConfirm = 0;
-
-        this.browseList = [];
-        this.browseListRunning = false;
-        this.initialReadFinished = false;
-        this.supportSubscribes = null;
-        this._tempTimeout = {};
-    }
-
-    static getDerivedStateFromProps(
-        props: FileBrowserProps,
-        state: FileBrowserState,
-    ): Partial<FileBrowserState> | null {
-        if (props.expertMode !== undefined && props.expertMode !== state.expertMode) {
-            return { expertMode: props.expertMode, loadAllFolders: true };
-        }
-
-        return null;
-    }
-
-    async loadFolders() {
-        this.initialReadFinished = false;
-
-        let folders = (await this.browseFolder('/')) as unknown as Folders;
-
-        if (this.state.viewType === TABLE) {
-            folders = (await this.browseFolders([...this.state.expanded], folders)) as unknown as Folders;
-        } else if (
-            this.state.currentDir &&
-            this.state.currentDir !== '/' &&
-            (!this.limitToObjectID || this.state.currentDir.startsWith(this.limitToObjectID))
-        ) {
-            folders = (await this.browseFolder(this.state.currentDir, folders)) as unknown as Folders;
-        }
-
-        this.setState({ folders }, () => {
-            if (this.state.viewType === TABLE && !this.findItem(this.state.selected)) {
-                const parts = this.state.selected.split('/');
-                while (parts.length && !this.findItem(parts.join('/'))) {
-                    parts.pop();
-                }
-                let selected;
-                if (parts.length) {
-                    selected = parts.join('/');
-                } else {
-                    selected = USER_DATA;
-                }
-                this.setState({ selected, path: selected, pathFocus: false }, () => this.scrollToSelected());
-            } else {
-                this.scrollToSelected();
-            }
-            this.initialReadFinished = true;
-        });
-    }
-
-    scrollToSelected() {
-        if (this.mounted) {
-            const el = document.getElementById(this.state.selected);
-            el?.scrollIntoView();
-        }
-    }
-
-    async componentDidMount() {
-        this.mounted = true;
-        this.loadFolders()
-            .catch(error => console.error(`Cannot load folders: ${error}`));
-
-        this.supportSubscribes = await this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT');
-        if (this.supportSubscribes) {
-            await this.props.socket.subscribeFiles('*', '*', this.onFileChange);
-        }
-    }
-
-    componentWillUnmount() {
-        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));
-        this._tempTimeout = {};
-    }
-
-    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}`))
-                    .then(() => {
-                        setTimeout(() => this.browseFoldersCb(foldersList, newFoldersNotNull, cb), 0);
-                    });
-            } else {
-                setTimeout(() => this.browseFoldersCb(foldersList, newFoldersNotNull, cb), 0);
-            }
-        }
-    }
-
-    browseFolders(
-        foldersList: string[],
-        _newFolders?: Folders | null,
-    ): Promise<Folders> {
-        let newFoldersNotNull: Folders;
-        if (!_newFolders) {
-            newFoldersNotNull = {};
-            Object.keys(this.state.folders).forEach(folder => (newFoldersNotNull[folder] = this.state.folders[folder]));
-        } else {
-            newFoldersNotNull = _newFolders;
-        }
-
-        if (!foldersList?.length) {
-            return Promise.resolve(newFoldersNotNull);
-        }
-        return new Promise(resolve => {
-            this.browseFoldersCb(foldersList, newFoldersNotNull, resolve);
-        });
-    }
-
-    readDirSerial(adapter: string, relPath: string): Promise<ioBroker.ReadDirResult[]> {
-        return new Promise((resolve, reject) => {
-            if (this.browseList) {
-                // if component still mounted
-                this.browseList.push({
-                    resolve: resolve as unknown as (files: ioBroker.ReadDirResult[]) => void,
-                    reject,
-                    adapter,
-                    relPath,
-                });
-                if (!this.browseListRunning) {
-                    this.processBrowseList();
-                }
-            }
-        });
-    }
-
-    processBrowseList(level: number = 0): void {
-        if (!this.browseListRunning && this.browseList && this.browseList.length) {
-            this.browseListRunning = true;
-            if (this.browseList.length > 10) {
-                // not too often
-                if (!(this.browseList.length % 10)) {
-                    this.setState({ queueLength: this.browseList.length });
-                }
-            } else {
-                this.setState({ queueLength: this.browseList.length });
-            }
-
-            this.browseList[0].processing = true;
-            this.props.socket
-                .readDir(this.browseList[0].adapter, this.browseList[0].relPath as string)
-                .then(files => {
-                    if (this.browseList) {
-                        // if component still mounted
-                        const item = this.browseList.shift();
-                        if (item) {
-                            const resolve = item.resolve;
-                            item.resolve = null;
-                            item.reject  = null;
-                            item.adapter = null;
-                            item.relPath = null;
-                            resolve && resolve(files);
-                            this.browseListRunning = false;
-                            if (this.browseList.length) {
-                                if (level < 5) {
-                                    this.processBrowseList(level + 1);
-                                } else {
-                                    setTimeout(() => this.processBrowseList(0), 0);
-                                }
-                            } else {
-                                this.setState({ queueLength: 0 });
-                            }
-                        } else {
-                            this.setState({ queueLength: 0 });
-                        }
-                    }
-                })
-                .catch(e => {
-                    if (this.browseList) {
-                        // if component still mounted
-                        const item = this.browseList.shift();
-                        if (item) {
-                            const reject = item.reject;
-                            item.resolve = null;
-                            item.reject = null;
-                            item.adapter = null;
-                            item.relPath = null;
-                            reject && reject(e);
-                            this.browseListRunning = false;
-                            if (this.browseList.length) {
-                                if (level < 5) {
-                                    this.processBrowseList(level + 1);
-                                } else {
-                                    setTimeout(() => this.processBrowseList(0), 0);
-                                }
-                            } else {
-                                this.setState({ queueLength: 0 });
-                            }
-                        } else {
-                            this.setState({ queueLength: 0 });
-                        }
-                    }
-                });
-        }
-    }
-
-    async browseFolder(
-        folderId: string,
-        _newFolders?: Folders | null,
-        _checkEmpty?: boolean,
-        force?: boolean,
-    ): Promise<Folders> {
-        let newFoldersNotNull: Folders;
-        if (!_newFolders) {
-            newFoldersNotNull = {};
-            Object.keys(this.state.folders).forEach(folder => {
-                newFoldersNotNull[folder] = this.state.folders[folder];
-            });
-        } else {
-            newFoldersNotNull = _newFolders;
-        }
-
-        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)))
-                        .then(() => resolve(newFoldersNotNull))
-                        .catch(error => reject(error));
-                });
-            }
-
-            return Promise.resolve(newFoldersNotNull);
-        }
-
-        // if root folder
-        if (!folderId || folderId === '/') {
-            try {
-                let objs = (await this.props.socket.readMetaItems()) as MetaObject[];
-                const _folders: FolderOrFileItem[] = [];
-                let userData = null;
-
-                if (this.state.restrictToFolder) {
-                    const adapter = this.state.restrictToFolder.split('/')[0];
-                    objs = objs.filter(obj => obj._id === adapter);
-                } else if (!this.state.expertMode) {
-                    // load only adapter.admin and not other meta files like hm-rpc.0.devices.blablabla
-                    objs = objs.filter(obj => !obj._id.endsWith('.admin'));
-                }
-
-                const pos = objs.findIndex(obj => obj._id === 'system.meta.uuid');
-                if (pos !== -1) {
-                    objs.splice(pos, 1);
-                }
-
-                objs.forEach(obj => {
-                    if (this.limitToObjectID && this.limitToObjectID !== obj._id) {
-                        return;
-                    }
-
-                    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,
-                        folder: true,
-                        acl:    obj.acl,
-                        level:  0,
-                    };
-
-                    if (item.id === USER_DATA) {
-                        // user data must be first
-                        userData = item;
-                    } else {
-                        _folders.push(item);
-                    }
-                });
-
-                _folders.sort((a, b) => (a.id > b.id ? 1 : (a.id < b.id ? -1 : 0)));
-                if (!this.limitToObjectID || this.limitToObjectID === USER_DATA) {
-                    userData && _folders.unshift(userData);
-                }
-
-                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);
-                }
-            } catch (e) {
-                this.initialReadFinished && window.alert(`Cannot read meta items: ${e}`);
-                newFoldersNotNull[folderId || '/'] = [];
-            }
-            return newFoldersNotNull;
-        }
-
-        const parts = folderId.split('/');
-        const level = parts.length;
-        const adapter = parts.shift();
-        const relPath = parts.join('/');
-
-        // make all requests here serial
-        const files = await this.readDirSerial(adapter || '', relPath);
-        try {
-            const _folders: FolderOrFileItem[] = [];
-
-            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,
-                    modified: file.modifiedAt,
-                    acl:      file.acl,
-                    level,
-                };
-
-                if (this.state.restrictToFolder) {
-                    if (
-                        item.folder &&
-                        (item.id.startsWith(`${this.state.restrictToFolder}/`) ||
-                            item.id === this.state.restrictToFolder ||
-                            this.state.restrictToFolder.startsWith(`${item.id}/`))
-                    ) {
-                        _folders.push(item);
-                    } else if (item.id.startsWith(`${this.state.restrictToFolder}/`)) {
-                        _folders.push(item);
-                    }
-                } else if (this.limitToPath) {
-                    if (
-                        item.folder &&
-                        (item.id.startsWith(`${this.limitToPath}/`) ||
-                            item.id === this.limitToPath ||
-                            this.limitToPath.startsWith(`${item.id}/`))
-                    ) {
-                        _folders.push(item);
-                    } else if (item.id.startsWith(`${this.limitToPath}/`)) {
-                        _folders.push(item);
-                    }
-                } else {
-                    _folders.push(item);
-                }
-            });
-
-            _folders.sort(sortFolders);
-            newFoldersNotNull[folderId] = _folders;
-
-            if (!_checkEmpty) {
-                return Promise.all(_folders
-                    .filter(item => item.folder)
-                    .map(item => this.browseFolder(item.id, newFoldersNotNull, true)))
-                    .then(() => newFoldersNotNull);
-            }
-        } catch (e) {
-            this.initialReadFinished && window.alert(`Cannot read ${adapter}${relPath ? `/${relPath}` : ''}: ${e}`);
-            newFoldersNotNull[folderId] = [];
-        }
-
-        return newFoldersNotNull;
-    }
-
-    toggleFolder(item: FolderOrFileItem, e: React.MouseEvent<Element>) {
-        e?.stopPropagation();
-        const expanded = [...this.state.expanded];
-        const pos = expanded.indexOf(item.id);
-        if (pos === -1) {
-            expanded.push(item.id);
-            expanded.sort();
-
-            this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
-
-            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),
-                    ));
-            } else {
-                this.setState({ expanded });
-            }
-        } else {
-            expanded.splice(pos, 1);
-            this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
-            this.setState({ expanded });
-        }
-    }
-
-    onFileChange = (id: string, fileName: string, size: number | null) => {
-        const key = `${id}/${fileName}`;
-        const pos = key.lastIndexOf('/');
-        const folder = key.substring(0, pos);
-        console.log(`File changed ${key}[${size}]`);
-
-        if (this.state.folders[folder]) {
-            this._tempTimeout[folder] && clearTimeout(this._tempTimeout[folder]);
-
-            this._tempTimeout[folder] = setTimeout(() => {
-                delete this._tempTimeout[folder];
-
-                this.browseFolder(folder, null, false, true)
-                    .then(folders => this.setState({ folders }));
-            }, 300);
-        }
-    };
-
-    changeFolder(e: React.MouseEvent<HTMLDivElement>, folder?: string) {
-        e && e.stopPropagation();
-
-        this.lastSelect = Date.now();
-
-        let _folder = folder || getParentDir(this.state.currentDir);
-
-        if (_folder === '/') {
-            _folder = '';
-        }
-
-        this.localStorage.setItem('files.currentDir', _folder);
-
-        if (folder && e && (e.altKey || e.shiftKey || e.ctrlKey || e.metaKey)) {
-            return this.setState({ selected: _folder });
-        }
-
-        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(''),
-                ));
-        }
-
-        return this.setState(
-            {
-                currentDir: _folder,
-                selected: _folder,
-                path: _folder,
-                pathFocus: false,
-            },
-            () => this.props.onSelect && this.props.onSelect(''),
-        );
-    }
-
-    select(id: string, e?: React.MouseEvent<HTMLDivElement> | null, cb?: () => void) {
-        e && e.stopPropagation();
-        this.lastSelect = Date.now();
-
-        this.localStorage.setItem('files.selected', id);
-
-        this.setState({ selected: id, path: id, pathFocus: false }, () => {
-            if (this.props.onSelect) {
-                const ext = Utils.getFileExtension(id);
-                if (
-                    (!this.props.filterFiles || (ext && this.props.filterFiles.includes(ext))) &&
-                    (!this.state.filterByType ||
-                        (ext && (EXTENSIONS as Record<string, string[]>)[this.state.filterByType].includes(ext)))
-                ) {
-                    this.props.onSelect(id, false, !!this.state.folders[id]);
-                } else {
-                    this.props.onSelect('');
-                }
-            }
-            cb && cb();
-        });
-    }
-
-    getText(text?: ioBroker.StringOrTranslated | null): string | undefined {
-        if (text) {
-            if (typeof text === 'object') {
-                return text[this.props.lang] || text.en || undefined;
-            }
-            return text;
-        }
-        return undefined;
-    }
-
-    renderFolder(item: FolderOrFileItem, expanded?: boolean): React.JSX.Element | null {
-        if (
-            this.state.viewType === TABLE &&
-            this.state.filterEmpty &&
-            (!this.state.folders[item.id] || !this.state.folders[item.id].length) &&
-            item.id !== USER_DATA &&
-            !item.temp
-        ) {
-            return null;
-        }
-        const IconEl = expanded ? IconOpen : IconClosed;
-        const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
-        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}
-            />
-
-            <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"
-                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.allowDownload ?
-                <div style={styles[`itemDownloadEmpty${this.state.viewType}`]} /> : null}
-
-            {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>;
-    }
-
-    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} />
-
-            <Box
-                component="div"
-                sx={Utils.getStyle(
-                    this.props.theme,
-                    styles[`itemName${this.state.viewType}`],
-                    styles[`itemNameFolder${this.state.viewType}`],
-                )}
-            >
-                ..
-            </Box>
-        </Box>;
-    }
-
-    formatSize(size: number | null | undefined) {
-        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;
-        let accessStr: string;
-        if (access) {
-            accessStr = access.toString(16).padStart(3, '0');
-        } else {
-            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>;
-    }
-
-    getFileIcon(ext: string | null) {
-        switch (ext) {
-            case 'json':
-            case 'json5':
-                return <JsonIcon style={styles[`itemIcon${this.state.viewType}`]} />;
-
-            case 'css':
-                return <CssIcon style={styles[`itemIcon${this.state.viewType}`]} />;
-
-            case 'js':
-            case 'ts':
-                return <JSIcon style={styles[`itemIcon${this.state.viewType}`]} />;
-
-            case 'html':
-            case 'md':
-                return <HtmlIcon style={styles[`itemIcon${this.state.viewType}`]} />;
-
-            case 'mp3':
-            case 'ogg':
-            case 'wav':
-            case 'm4a':
-            case 'mp4':
-            case 'flac':
-                return <MusicIcon style={styles[`itemIcon${this.state.viewType}`]} />;
-
-            default:
-                return <FileIcon style={styles[`itemIcon${this.state.viewType}`]} />;
-        }
-    }
-
-    static getEditFile(ext: string | null): boolean {
-        switch (ext) {
-            case 'json':
-            case 'json5':
-            case 'js':
-            case 'html':
-            case 'txt':
-            case 'css':
-            case 'log':
-                return true;
-            default:
-                return false;
-        }
-    }
-
-    setStateBackgroundImage = () => {
-        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],
-                );
-                return { backgroundImage: array[array.indexOf(backgroundImage) + 1] };
-            }
-            this.localStorage.setItem('files.backgroundImage', array[0]);
-            return { backgroundImage: array[0] };
-        });
-    };
-
-    getStyleBackgroundImage = () => {
-        // ['light', 'dark', 'colored', 'delete']
-        switch (this.state.backgroundImage) {
-            case 'light':
-                return styles.backgroundImageLight;
-            case 'dark':
-                return styles.backgroundImageDark;
-            case 'colored':
-                return styles.backgroundImageColored;
-            case 'delete':
-                return null;
-            default:
-                return null;
-        }
-    };
-
-    renderFile(item: FolderOrFileItem): React.JSX.Element {
-        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>
-            <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>
-            {/* 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)[] {
-        if (this.state.folders && this.state.folders[folderId]) {
-            // tile
-            if (this.state.viewType === TILE) {
-                const res: (React.JSX.Element | null)[] = [];
-                if (folderId && folderId !== '/') {
-                    res.push(this.renderBackFolder());
-                }
-                this.state.folders[folderId].forEach(item => {
-                    if (item.folder) {
-                        res.push(this.renderFolder(item));
-                    } 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)))
-                    ) {
-                        res.push(this.renderFile(item));
-                    }
-                });
-                return res;
-            }
-
-            const totalResult: (React.JSX.Element | null)[] = [];
-            this.state.folders[folderId].forEach(item => {
-                if (item.folder) {
-                    const expanded = this.state.expanded.includes(item.id);
-
-                    const folders = this.renderFolder(item, expanded);
-                    if (Array.isArray(folders)) {
-                        folders.forEach(folder => totalResult.push(folder));
-                    } else {
-                        totalResult.push(folders);
-                    }
-                    if (this.state.folders[item.id] && expanded) {
-                        const items = this.renderItems(item.id);
-                        if (Array.isArray(items)) {
-                            items.forEach(_item => totalResult.push(_item));
-                        } else {
-                            totalResult.push(items);
-                        }
-                    }
-                } 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)))
-                ) {
-                    totalResult.push(this.renderFile(item));
-                }
-            });
-
-            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}
-            </div>
-        </div>;
-    }
-
-    renderToolbar() {
-        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"
-            >
-                <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();
-                        }
-                    });
-                }}
-                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')} componentsProps={{ 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')} componentsProps={{ 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')}
-                componentsProps={{ 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,
-    ) {
-        folders = folders || this.state.folders;
-        if (!folders) {
-            return null;
-        }
-        const parts = id.split('/');
-        parts.pop();
-        const parentFolder = parts.join('/') || '/';
-        if (!folders[parentFolder]) {
-            return null;
-        }
-        return folders[parentFolder].find(item => item.id === id);
-    }
-
-    renderInputDialog() {
-        if (this.state.addFolder) {
-            const parentFolder = this.findFirstFolder(this.state.selected);
-
-            if (!parentFolder) {
-                window.alert(this.props.t('ra_Invalid parent folder!'));
-                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 });
-                    }
-                }}
-                replace={(text: string) => text.replace(/[^-_\w]/, '_')}
-            />;
-        }
-        return null;
-    }
-
-    componentDidUpdate(/* prevProps , prevState, snapshot */) {
-        this.setOpacityTimer && clearTimeout(this.setOpacityTimer);
-        this.setOpacityTimer = setTimeout(() => {
-            this.setOpacityTimer = null;
-            const items = window.document.getElementsByClassName('browserItem');
-            for (let i = 0; i < items.length; i++) {
-                (items[i] as HTMLElement).style.opacity = '1';
-            }
-        }, 100);
-    }
-
-    findFirstFolder(id: string) {
-        let parentFolder = id;
-        const item = this.findItem(parentFolder);
-        // find folder
-        if (item && !item.folder) {
-            const parts = parentFolder.split('/');
-            parts.pop();
-            parentFolder = '';
-            while (parts.length) {
-                const _item = this.findItem(parts.join('/'));
-                if (_item?.folder) {
-                    parentFolder = parts.join('/');
-                    break;
-                }
-                parts.pop();
-            }
-            if (!parts.length) {
-                return null;
-            }
-        }
-
-        return parentFolder;
-    }
-
-    async uploadFile(fileName: string, data: string): Promise<void> {
-        const parts: string[] = fileName.split('/');
-        const adapterName = parts.shift();
-        try {
-            await this.props.socket.writeFile64(adapterName || '', parts.join('/'), data);
-        } catch (e) {
-            window.alert(`Cannot write file: ${e}`);
-        }
-    }
-
-    renderUpload() {
-        if (this.state.uploadFile) {
-            return [
-                <Fab
-                    key="close"
-                    color="primary"
-                    aria-label="close"
-                    style={styles.uploadCloseButton}
-                    onClick={() => this.setState({ uploadFile: false })}
-                >
-                    <CloseIcon />
-                </Fab>,
-                <Dropzone
-                    key="dropzone"
-                    onDragEnter={() => this.setState({ uploadFile: 'dragging' })}
-                    onDragLeave={() => this.setState({ uploadFile: true })}
-                    onDrop={acceptedFiles => {
-                        let count = acceptedFiles.length;
-
-                        acceptedFiles.forEach(file => {
-                            const reader = new FileReader();
-
-                            reader.onabort = () => console.log('file reading was aborted');
-                            reader.onerror = () => console.log('file reading has failed');
-                            reader.onload = () => {
-                                const parentFolder = this.findFirstFolder(this.state.selected);
-
-                                if (!parentFolder) {
-                                    window.alert(this.props.t('ra_Invalid parent folder!'));
-                                } 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,
-                                                        );
-                                                    }
-                                                });
-                                            }
-                                        });
-                                }
-                            };
-
-                            reader.readAsArrayBuffer(file);
-                        });
-                    }}
-                >
-                    {({ 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>
-                        </Box>
-                    </div>}
-                </Dropzone>,
-            ];
-        }
-        return null;
-    }
-
-    deleteRecursive(id: string): Promise<void> {
-        const item = this.findItem(id);
-        if (item?.folder) {
-            return (
-                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 }));
-                            }
-                        });
-                    }
-                });
-        }
-
-        const parts = id.split('/');
-        const adapter = parts.shift();
-        if (parts.length) {
-            return this.props.socket
-                .deleteFile(adapter || '', parts.join('/'))
-                .catch(e => window.alert(`Cannot delete file: ${e}`));
-        }
-        return Promise.resolve();
-    }
-
-    deleteItem(deleteItem: string) {
-        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;
-                    }
-
-                    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 = {};
-
-                        Object.keys(this.state.folders).forEach(name => {
-                            if (name !== parentFolder && !name.startsWith(`${parentFolder}/`)) {
-                                folders[name] = this.state.folders[name];
-                            }
-                        });
-
-                        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);
-                    }
-                }));
-    }
-
-    renderDeleteDialog() {
-        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 false;
-    }
-
-    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;
-    }
-
-    renderError() {
-        if (this.state.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[]) {
-        this.cacheFolders = this.cacheFolders || JSON.parse(JSON.stringify(this.state.folders));
-        let changed;
-
-        info.forEach(it => {
-            const item = this.findItem(it.id, this.cacheFolders);
-            if (item && JSON.stringify(item.acl) !== JSON.stringify(it.acl)) {
-                item.acl = it.acl;
-                changed = true;
-            }
-        });
-        if (changed) {
-            this.cacheFoldersTimeout && clearTimeout(this.cacheFoldersTimeout);
-            this.cacheFoldersTimeout = setTimeout(() => {
-                this.cacheFoldersTimeout = null;
-                const folders = this.cacheFolders || {};
-                this.cacheFolders = null;
-                this.setState({ folders });
-            }, 200);
-        }
-    }
-
-    changeToPath() {
-        setTimeout(() => {
-            if (this.state.path !== this.state.selected && (!this.lastSelect || Date.now() - this.lastSelect > 100)) {
-                let folder = this.state.path;
-                if (isFile(this.state.path)) {
-                    folder = getParentDir(this.state.path);
-                }
-                new Promise(resolve => {
-                    if (!this.state.folders[folder]) {
-                        this.browseFolder(folder)
-                            .then(folders => this.setState({ folders }, () => resolve(true)))
-                            .catch(err =>
-                                this.setState({
-                                    errorText:
-                                        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 }));
-            } else if (!this.lastSelect || Date.now() - this.lastSelect > 100) {
-                this.setState({ pathFocus: false });
-            }
-        }, 100);
-    }
-
-    renderBreadcrumb() {
-        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) => {
-                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>;
-    }
-
-    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 });
-                        }
-                    }}
-                    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>;
-    }
-
-    render() {
-        if (!this.props.ready) {
-            return <LinearProgress />;
-        }
-
-        if (this.state.loadAllFolders && !this.foldersLoading) {
-            this.foldersLoading = true;
-            setTimeout(() => {
-                this.setState({ loadAllFolders: false, folders: {} }, () => {
-                    this.foldersLoading = false;
-                    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}
-            <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>;
-    }
-}
-
-export default withWidth()(FileBrowserClass);
+/**
+ * Copyright 2020-2024, Denis Haev <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ */
+import React, { Component } from 'react';
+import Dropzone from 'react-dropzone';
+
+import {
+    LinearProgress,
+    ListItemIcon,
+    ListItemText,
+    Menu,
+    MenuItem,
+    Tooltip,
+    CircularProgress,
+    Toolbar,
+    IconButton,
+    Fab,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogContentText,
+    DialogActions,
+    Button,
+    Input,
+    Breadcrumbs,
+    Box,
+} from '@mui/material';
+
+// MUI Icons
+import {
+    Refresh as RefreshIcon,
+    Close as CloseIcon,
+    Bookmark as JsonIcon,
+    BookmarkBorder as CssIcon,
+    Description as HtmlIcon,
+    Edit as EditIcon,
+    Code as JSIcon,
+    InsertDriveFile as FileIcon,
+    Publish as UploadIcon,
+    MusicNote as MusicIcon,
+    SaveAlt as DownloadIcon,
+    CreateNewFolder as AddFolderIcon,
+    FolderOpen as EmptyFilterIcon,
+    List as IconList,
+    ViewModule as IconTile,
+    ArrowBack as IconBack,
+    Delete as DeleteIcon,
+    Brightness6 as Brightness5Icon,
+    Image as TypeIconImages,
+    FontDownload as TypeIconTxt,
+    AudioFile as TypeIconAudio,
+    Videocam as TypeIconVideo,
+    KeyboardReturn as EnterIcon,
+    FolderSpecial as RestrictedIcon,
+} from '@mui/icons-material';
+
+import type { Connection } from '@iobroker/socket-client';
+
+import ErrorDialog from '../Dialogs/Error';
+import Utils from './Utils';
+import TextInputDialog from '../Dialogs/TextInput';
+
+// Custom Icons
+import IconExpert from '../icons/IconExpert';
+import IconClosed from '../icons/IconClosed';
+import IconOpen from '../icons/IconOpen';
+import IconNoIcon from '../icons/IconNoIcon';
+import Icon from './Icon';
+
+import withWidth from './withWidth';
+import type { ThemeName, ThemeType, Translate, IobTheme } from '../types';
+
+import FileViewer, { EXTENSIONS } from './FileViewer';
+
+const ROW_HEIGHT = 32;
+const BUTTON_WIDTH = 32;
+const TILE_HEIGHT = 120;
+const TILE_WIDTH = 64;
+
+const NOT_FOUND = 'Not found';
+
+// Todo: replace with js-controller types
+export interface MetaACL extends ioBroker.ObjectACL {
+    file: number;
+}
+
+// Todo: replace with js-controller types
+export interface MetaObject extends ioBroker.MetaObject {
+    acl: MetaACL;
+}
+
+const FILE_TYPE_ICONS: Record<string, React.FC<{ fontSize?: 'small' }>> = {
+    all: FileIcon,
+    images: TypeIconImages,
+    code: JSIcon,
+    txt: TypeIconTxt,
+    audio: TypeIconAudio,
+    video: TypeIconVideo,
+};
+
+const styles: Record<string, any> = {
+    dialog: (theme: IobTheme) => ({
+        height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
+    }),
+    root: {
+        width: '100%',
+        overflow: 'hidden',
+        height: '100%',
+        position: 'relative',
+    },
+    filesDiv: {
+        width: 'calc(100% - 16px)',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        padding: 8,
+    },
+    filesDivHint: {
+        position: 'absolute',
+        bottom: 0,
+        left: 20,
+        opacity: 0.7,
+        fontStyle: 'italic',
+        fontSize: 12,
+    },
+    filesDivTable: {
+        height: 'calc(100% - 56px)',
+    },
+    filesDivTile: {
+        height: `calc(100% - ${48 * 2 + 8}px)`,
+        display: 'flex',
+        alignContent: 'flex-start',
+        alignItems: 'stretch',
+        flexWrap: 'wrap',
+        flex: `0 0 ${TILE_WIDTH}px`,
+    },
+
+    itemTile: (theme: IobTheme) => ({
+        position: 'relative',
+        userSelect: 'none',
+        cursor: 'pointer',
+        height: TILE_HEIGHT,
+        width: TILE_WIDTH,
+        display: 'inline-block',
+        textAlign: 'center',
+        opacity: 0.1,
+        transition: 'opacity 1s',
+        margin: 4,
+        '&:hover': {
+            background: theme.palette.secondary.light,
+            color: Utils.invertColor(theme.palette.secondary.main, true),
+        },
+    }),
+    itemNameFolderTile: {
+        fontWeight: 'bold',
+    },
+    itemNameTile: {
+        width: '100%',
+        height: 32,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontSize: 12,
+        textAlign: 'center',
+        wordBreak: 'break-all',
+    },
+    itemFolderIconTile: (theme: IobTheme) => ({
+        width: '100%',
+        height: TILE_HEIGHT - 32 - 16 - 8, // name + size
+        display: 'block',
+        pl: 1,
+        color: theme.palette.secondary.main || '#fbff7d',
+    }),
+    itemFolderIconBack: (theme: IobTheme) => ({
+        position: 'absolute',
+        top: 22,
+        left: 18,
+        zIndex: 1,
+        color: theme.palette.mode === 'dark' ? '#FFF' : '#000',
+    }),
+    itemSizeTile: {
+        width: '100%',
+        height: 16,
+        textAlign: 'center',
+        fontSize: 10,
+    },
+    itemImageTile: {
+        width: 'calc(100% - 8px)',
+        height: TILE_HEIGHT - 32 - 16 - 8, // name + size
+        margin: 4,
+        display: 'block',
+        textAlign: 'center',
+        objectFit: 'contain',
+    },
+    itemIconTile: {
+        width: '100%',
+        height: TILE_HEIGHT - 32 - 16 - 8, // name + size
+        display: 'block',
+        objectFit: 'contain',
+    },
+
+    itemSelected: (theme: IobTheme) => ({
+        background: theme.palette.primary.main,
+        color: Utils.invertColor(theme.palette.primary.main, true),
+    }),
+
+    itemTable: (theme: IobTheme) => ({
+        userSelect: 'none',
+        cursor: 'pointer',
+        height: ROW_HEIGHT,
+        display: 'inline-flex',
+        lineHeight: `${ROW_HEIGHT}px`,
+        '&:hover': {
+            background: theme.palette.secondary.light,
+            color: Utils.invertColor(theme.palette.secondary.main, true),
+        },
+    }),
+    itemNameTable: {
+        display: 'inline-block',
+        pl: '10px',
+        fontSize: '1rem',
+        verticalAlign: 'top',
+        flexGrow: 1,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        '@media screen and (max-width: 500px)': {
+            textAlign: 'end',
+            direction: 'rtl',
+        },
+    },
+    itemNameFolderTable: {
+        fontWeight: 'bold',
+    },
+    itemSizeTable: {
+        display: 'inline-block',
+        width: 60,
+        verticalAlign: 'top',
+        textAlign: 'right',
+        whiteSpace: 'nowrap',
+    },
+    itemAccessTable: {
+        // display: 'inline-block',
+        verticalAlign: 'top',
+        width: 60,
+        textAlign: 'right',
+        paddingRight: 5,
+        display: 'flex',
+        justifyContent: 'center',
+    },
+    itemImageTable: {
+        display: 'inline-block',
+        width: 30,
+        marginTop: 1,
+        objectFit: 'contain',
+        maxHeight: 30,
+    },
+    itemNoImageTable: {
+        marginTop: 6,
+    },
+    itemIconTable: {
+        display: 'inline-block',
+        marginTop: 1,
+        width: 30,
+        height: 30,
+    },
+    itemFolderTable: {},
+    itemFolderTemp: {
+        opacity: 0.4,
+    },
+    itemFolderIconTable: (theme: IobTheme) => ({
+        marginTop: 1,
+        marginLeft: 8,
+        display: 'inline-block',
+        width: 30,
+        height: 30,
+        color: theme.palette.secondary.main || '#fbff7d',
+    }),
+    itemDownloadButtonTable: (theme: IobTheme) => ({
+        display: 'inline-block',
+        width: BUTTON_WIDTH,
+        height: ROW_HEIGHT,
+        minWidth: BUTTON_WIDTH,
+        verticalAlign: 'middle',
+        textAlign: 'center',
+        padding: 0,
+        borderRadius: `${BUTTON_WIDTH / 2}px`,
+        '&:hover': {
+            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)',
+        },
+        '& span': {
+            pt: '9px',
+        },
+        '& svg': {
+            width: 14,
+            height: 14,
+            fontSize: '1rem',
+            mt: '-3px',
+            verticalAlign: 'middle',
+            color: theme.palette.mode === 'dark' ? '#EEE' : '#111',
+        },
+    }),
+    itemDownloadEmptyTable: {
+        display: 'inline-block',
+        width: BUTTON_WIDTH,
+        height: ROW_HEIGHT,
+        minWidth: BUTTON_WIDTH,
+        padding: 0,
+    },
+    itemAclButtonTable: {
+        width: BUTTON_WIDTH,
+        height: ROW_HEIGHT,
+        minWidth: BUTTON_WIDTH,
+        verticalAlign: 'top',
+        padding: 0,
+        fontSize: 12,
+        display: 'flex',
+    },
+    itemDeleteButtonTable: {
+        display: 'inline-block',
+        width: BUTTON_WIDTH,
+        height: ROW_HEIGHT,
+        minWidth: BUTTON_WIDTH,
+        verticalAlign: 'top',
+        padding: 0,
+        '& svg': {
+            width: 18,
+            height: 18,
+            fontSize: '1.5rem',
+        },
+    },
+
+    uploadDiv: {
+        top: 0,
+        zIndex: 1,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        position: 'absolute',
+        opacity: 0.9,
+        textAlign: 'center',
+        background: '#FFFFFF',
+    },
+    uploadDivDragging: {
+        opacity: 1,
+    },
+
+    uploadCenterDiv: (theme: IobTheme) => ({
+        m: '20px',
+        border: '3px dashed grey',
+        borderRadius: '30px',
+        width: 'calc(100% - 40px)',
+        height: 'calc(100% - 40px)',
+        position: 'relative',
+        color: theme.palette.mode === 'dark' ? '#222' : '#CCC',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }),
+    uploadCenterIcon: {
+        width: '25%',
+        height: '25%',
+    },
+    uploadCenterText: {
+        fontSize: 24,
+        fontWeight: 'bold',
+    },
+    uploadCloseButton: {
+        zIndex: 2,
+        position: 'absolute',
+        top: 30,
+        right: 30,
+    },
+    uploadCenterTextAndIcon: {
+        position: 'absolute',
+        height: '30%',
+        width: '100%',
+        margin: 'auto',
+        opacity: 0.3,
+    },
+    menuButtonExpertActive: {
+        color: '#c00000',
+    },
+    menuButtonRestrictActive: {
+        color: '#c05000',
+    },
+    pathDiv: (theme: IobTheme) => ({
+        display: 'flex',
+        width: 'calc(100% - 16px)',
+        ml: 1,
+        mr: 1,
+        textOverflow: 'clip',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        backgroundColor: theme.palette.secondary.main,
+    }),
+    pathDivInput: {
+        width: '100%',
+    },
+    pathDivBreadcrumbDir: (theme: IobTheme) => ({
+        pl: '2px',
+        pr: '2px',
+        cursor: 'pointer',
+        '&:hover': {
+            background: theme.palette.primary.main,
+        },
+    }),
+    backgroundImageLight: {
+        background: 'white',
+    },
+    backgroundImageDark: {
+        background: 'black',
+    },
+    backgroundImageColored: {
+        background: 'silver',
+    },
+    specialFolder: (theme: IobTheme) => ({
+        color: theme.palette.mode === 'dark' ? '#229b0f' : '#5dd300',
+    }),
+    tooltip: {
+        pointerEvents: 'none',
+    },
+};
+
+const USER_DATA = '0_userdata.0';
+
+function getParentDir(dir: string | null): string {
+    const parts = (dir || '').split('/');
+    if (parts.length) {
+        parts.pop();
+    }
+    return parts.join('/');
+}
+
+function isFile(path: string): boolean {
+    const ext = Utils.getFileExtension(path);
+    return !!(ext?.toLowerCase().match(/[a-z]+/) && ext.length < 5);
+}
+
+const TABLE = 'Table';
+const TILE = 'Tile';
+
+export interface FileBrowserProps {
+    /** The key to identify this component. */
+    key?: string;
+    /** Additional styling for this component. */
+    style?: React.CSSProperties;
+    /** The CSS class name. */
+    className?: string;
+    /** Translation function. */
+    t: Translate;
+    /** The selected language. */
+    lang: ioBroker.Languages;
+    /** The socket connection. */
+    socket: Connection;
+    /** Is the component data ready. */
+    ready?: boolean;
+    /** Is expert mode enabled? (default: false) */
+    expertMode?: boolean;
+    /** Show the toolbar? (default: false) */
+    showToolbar?: boolean;
+    /** If defined, allow selecting only files from this folder and subfolders */
+    limitPath?: string;
+    /** Allow upload of new files? (default: false) */
+    allowUpload?: boolean;
+    /** Allow download of files? (default: false) */
+    allowDownload?: boolean;
+    /** Allow creation of new folders? (default: false) */
+    allowCreateFolder?: boolean;
+    /** Allow deleting files? (default: false) */
+    allowDelete?: boolean;
+    /** Allow viewing files? (default: false) */
+    allowView?: boolean;
+    /** Prefix (default: '.') */
+    imagePrefix?: string;
+    /** Show the expert button? */
+    showExpertButton?: boolean;
+    /** Type of view */
+    viewType?: 'Table' | 'Tile';
+    /** Show the buttons to switch the view from table to tile? (default: false) */
+    showViewTypeButton?: boolean;
+    /** The ID of the selected file. */
+    selected?: string | string[];
+    /** The file extensions to show, like ['png', 'svg', 'bmp', 'jpg', 'jpeg', 'gif']. */
+    filterFiles?: string[];
+    /** The file extension categories to show. */
+    filterByType?: 'images' | 'code' | 'txt';
+    /** Callback for file selection. */
+    onSelect?: (id: string | string[], isDoubleClick?: boolean, isFolder?: boolean) => void;
+    /** Theme name */
+    themeName?: ThemeName;
+    /** Theme type. */
+    themeType?: ThemeType;
+    /** Theme object. */
+    theme: IobTheme;
+
+    /** Padding in pixels for folder levels */
+    levelPadding?: number;
+
+    restrictToFolder?: string;
+
+    modalEditOfAccessControl?: (obj: FileBrowserClass) => React.JSX.Element | null;
+
+    allowNonRestricted?: boolean;
+
+    showTypeSelector?: boolean;
+}
+
+export interface FolderOrFileItem {
+    id: string;
+    level: number;
+    name: string;
+    folder: boolean;
+    temp?: boolean;
+
+    size?: number | undefined;
+    ext?: string | null;
+    modified?: number;
+    title?: ioBroker.StringOrTranslated;
+    meta?: boolean;
+    from?: string;
+    ts?: number;
+    color?: string;
+    icon?: string;
+    acl?: ioBroker.EvaluatedFileACL | MetaACL;
+}
+
+export type Folders = Record<string, 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;
+    }
+    if (a.folder) {
+        return -1;
+    }
+    if (b.folder) {
+        return 1;
+    }
+    return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
+}
+
+interface FileBrowserState {
+    viewType: string;
+    folders: Folders;
+    filterEmpty: boolean;
+    expanded: string[];
+    currentDir: string;
+    expertMode: boolean;
+    addFolder: boolean;
+    uploadFile: boolean | 'dragging';
+    deleteItem: string;
+    viewer: string;
+    formatEditFile: string | null;
+    path: string;
+    selected: string;
+    errorText: string;
+    modalEditOfAccess: boolean;
+    backgroundImage: string | null;
+    queueLength: number;
+    loadAllFolders: boolean;
+    fileErrors: string[];
+    filterByType: string;
+    showTypesMenu: HTMLButtonElement | null;
+    restrictToFolder: string;
+    pathFocus: boolean;
+}
+
+export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserState> {
+    private readonly imagePrefix: string;
+
+    private readonly levelPadding: number;
+
+    private mounted: boolean;
+
+    private suppressDeleteConfirm: number;
+
+    private browseList:
+        | {
+              processing?: boolean;
+              resolve: null | ((files: ioBroker.ReadDirResult[]) => void);
+              reject: null | ((e: any) => void);
+              adapter: string | null;
+              relPath: string | null;
+          }[]
+        | null;
+
+    private browseListRunning: boolean;
+
+    private initialReadFinished: boolean;
+
+    private supportSubscribes: boolean | null;
+
+    private _tempTimeout: Record<string, ReturnType<typeof setTimeout>>;
+
+    private readonly limitToObjectID: string | null = null;
+
+    private readonly limitToPath: string | null = null;
+
+    private lastSelect: number | null = null;
+
+    private setOpacityTimer: ReturnType<typeof setTimeout> | null = null;
+
+    private cacheFoldersTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    private foldersLoading: boolean | null = null;
+
+    private cacheFolders: Folders | null = null;
+
+    private readonly localStorage: Storage;
+
+    constructor(props: FileBrowserProps) {
+        super(props);
+
+        this.localStorage = (window as any)._localStorage || window.localStorage;
+        const expandedStr = this.localStorage.getItem('files.expanded') || '[]';
+
+        if (this.props.limitPath) {
+            const parts = this.props.limitPath.split('/');
+            this.limitToObjectID = parts[0];
+            this.limitToPath = !parts.length ? null : parts.length === 1 && parts[0] === '' ? null : parts.join('/');
+            if (this.limitToPath && this.limitToPath.endsWith('/')) {
+                this.limitToPath.substring(0, this.limitToPath.length - 1);
+            }
+        }
+
+        let expanded: string[];
+        try {
+            expanded = JSON.parse(expandedStr);
+            if (this.limitToPath) {
+                expanded = expanded.filter(
+                    id =>
+                        id.startsWith(`${this.limitToPath}/`) ||
+                        id === this.limitToPath ||
+                        this.limitToPath?.startsWith(`${id}/`),
+                );
+            }
+        } catch {
+            expanded = [];
+        }
+
+        let viewType;
+        if (this.props.showViewTypeButton) {
+            viewType = this.localStorage.getItem('files.viewType') || TABLE;
+        } else {
+            viewType = TABLE;
+        }
+
+        let selected = this.props.selected || this.localStorage.getItem('files.selected') || USER_DATA;
+
+        let currentDir: string;
+
+        if (props.restrictToFolder) {
+            selected = props.restrictToFolder;
+            currentDir = props.restrictToFolder;
+            const parts = props.restrictToFolder.split('/');
+            expanded = [];
+            let path = '';
+            for (let i = 0; i < parts.length; i++) {
+                path += (path ? '/' : '') + parts[i];
+                expanded.push(path);
+            }
+        } else {
+            // TODO: Now we do not support multiple selection
+            if (Array.isArray(selected)) {
+                selected = selected[0];
+            }
+
+            if (isFile(selected)) {
+                currentDir = getParentDir(selected);
+            } else {
+                currentDir = selected;
+            }
+        }
+        const backgroundImage = this.localStorage.getItem('files.backgroundImage') || null;
+
+        this.state = {
+            viewType,
+            folders: {},
+            filterEmpty: this.localStorage.getItem('files.empty') !== 'false',
+            expanded,
+            currentDir,
+            expertMode: !!props.expertMode,
+            addFolder: false,
+            uploadFile: false,
+            deleteItem: '',
+            // marked: [],
+            viewer: '',
+            formatEditFile: '',
+            path: selected,
+            selected,
+            errorText: '',
+            modalEditOfAccess: false,
+            backgroundImage,
+            queueLength: 0,
+            loadAllFolders: false,
+            // allFoldersLoaded: false,
+            fileErrors: [],
+            filterByType: props.filterByType || window.localStorage.getItem('files.filterByType') || '',
+            showTypesMenu: null,
+            restrictToFolder: props.restrictToFolder || '',
+            pathFocus: false,
+        };
+
+        this.imagePrefix = this.props.imagePrefix || './files/';
+
+        this.levelPadding = this.props.levelPadding || 20;
+        this.mounted = true;
+        this.suppressDeleteConfirm = 0;
+
+        this.browseList = [];
+        this.browseListRunning = false;
+        this.initialReadFinished = false;
+        this.supportSubscribes = null;
+        this._tempTimeout = {};
+    }
+
+    static getDerivedStateFromProps(
+        props: FileBrowserProps,
+        state: FileBrowserState,
+    ): Partial<FileBrowserState> | null {
+        if (props.expertMode !== undefined && props.expertMode !== state.expertMode) {
+            return { expertMode: props.expertMode, loadAllFolders: true };
+        }
+
+        return null;
+    }
+
+    async loadFolders(): Promise<void> {
+        this.initialReadFinished = false;
+
+        let folders = (await this.browseFolder('/')) as unknown as Folders;
+
+        if (this.state.viewType === TABLE) {
+            folders = (await this.browseFolders([...this.state.expanded], folders)) as unknown as Folders;
+        } else if (
+            this.state.currentDir &&
+            this.state.currentDir !== '/' &&
+            (!this.limitToObjectID || this.state.currentDir.startsWith(this.limitToObjectID))
+        ) {
+            folders = (await this.browseFolder(this.state.currentDir, folders)) as unknown as Folders;
+        }
+
+        this.setState({ folders }, () => {
+            if (this.state.viewType === TABLE && !this.findItem(this.state.selected)) {
+                const parts = this.state.selected.split('/');
+                while (parts.length && !this.findItem(parts.join('/'))) {
+                    parts.pop();
+                }
+                let selected;
+                if (parts.length) {
+                    selected = parts.join('/');
+                } else {
+                    selected = USER_DATA;
+                }
+                this.setState({ selected, path: selected, pathFocus: false }, () => this.scrollToSelected());
+            } else {
+                this.scrollToSelected();
+            }
+            this.initialReadFinished = true;
+        });
+    }
+
+    scrollToSelected(): void {
+        if (this.mounted) {
+            const el = document.getElementById(this.state.selected);
+            el?.scrollIntoView();
+        }
+    }
+
+    async componentDidMount(): Promise<void> {
+        this.mounted = true;
+        this.loadFolders().catch(error => console.error(`Cannot load folders: ${error}`));
+
+        this.supportSubscribes = await this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT');
+        if (this.supportSubscribes) {
+            await this.props.socket.subscribeFiles('*', '*', this.onFileChange);
+        }
+    }
+
+    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));
+        this._tempTimeout = {};
+    }
+
+    browseFoldersCb(foldersList: string[], newFoldersNotNull: Folders, cb: (folders: Folders) => void): void {
+        if (!foldersList?.length) {
+            cb(newFoldersNotNull);
+        } else {
+            const folder = foldersList.shift();
+            if (folder) {
+                void this.browseFolder(folder, newFoldersNotNull)
+                    .catch((e: Error) => console.error(`Cannot read folder ${folder}: ${e.message}`))
+                    .then(() => {
+                        setTimeout(() => this.browseFoldersCb(foldersList, newFoldersNotNull, cb), 0);
+                    });
+            } else {
+                setTimeout(() => this.browseFoldersCb(foldersList, newFoldersNotNull, cb), 0);
+            }
+        }
+    }
+
+    browseFolders(foldersList: string[], _newFolders?: Folders | null): Promise<Folders> {
+        let newFoldersNotNull: Folders;
+        if (!_newFolders) {
+            newFoldersNotNull = {};
+            Object.keys(this.state.folders).forEach(folder => (newFoldersNotNull[folder] = this.state.folders[folder]));
+        } else {
+            newFoldersNotNull = _newFolders;
+        }
+
+        if (!foldersList?.length) {
+            return Promise.resolve(newFoldersNotNull);
+        }
+        return new Promise(resolve => {
+            this.browseFoldersCb(foldersList, newFoldersNotNull, resolve);
+        });
+    }
+
+    readDirSerial(adapter: string, relPath: string): Promise<ioBroker.ReadDirResult[]> {
+        return new Promise((resolve, reject) => {
+            if (this.browseList) {
+                // if component still mounted
+                this.browseList.push({
+                    resolve: resolve as unknown as (files: ioBroker.ReadDirResult[]) => void,
+                    reject,
+                    adapter,
+                    relPath,
+                });
+                if (!this.browseListRunning) {
+                    this.processBrowseList();
+                }
+            }
+        });
+    }
+
+    processBrowseList(level: number = 0): void {
+        if (!this.browseListRunning && this.browseList && this.browseList.length) {
+            this.browseListRunning = true;
+            if (this.browseList.length > 10) {
+                // not too often
+                if (!(this.browseList.length % 10)) {
+                    this.setState({ queueLength: this.browseList.length });
+                }
+            } else {
+                this.setState({ queueLength: this.browseList.length });
+            }
+
+            this.browseList[0].processing = true;
+            this.props.socket
+                .readDir(this.browseList[0].adapter, this.browseList[0].relPath as string)
+                .then(files => {
+                    if (this.browseList) {
+                        // if component still mounted
+                        const item = this.browseList.shift();
+                        if (item) {
+                            const resolve = item.resolve;
+                            item.resolve = null;
+                            item.reject = null;
+                            item.adapter = null;
+                            item.relPath = null;
+                            if (resolve) {
+                                resolve(files);
+                            }
+                            this.browseListRunning = false;
+                            if (this.browseList.length) {
+                                if (level < 5) {
+                                    this.processBrowseList(level + 1);
+                                } else {
+                                    setTimeout(() => this.processBrowseList(0), 0);
+                                }
+                            } else {
+                                this.setState({ queueLength: 0 });
+                            }
+                        } else {
+                            this.setState({ queueLength: 0 });
+                        }
+                    }
+                })
+                .catch(e => {
+                    if (this.browseList) {
+                        // if component still mounted
+                        const item = this.browseList.shift();
+                        if (item) {
+                            const reject = item.reject;
+                            item.resolve = null;
+                            item.reject = null;
+                            item.adapter = null;
+                            item.relPath = null;
+                            if (reject) {
+                                reject(e);
+                            }
+                            this.browseListRunning = false;
+                            if (this.browseList.length) {
+                                if (level < 5) {
+                                    this.processBrowseList(level + 1);
+                                } else {
+                                    setTimeout(() => this.processBrowseList(0), 0);
+                                }
+                            } else {
+                                this.setState({ queueLength: 0 });
+                            }
+                        } else {
+                            this.setState({ queueLength: 0 });
+                        }
+                    }
+                });
+        }
+    }
+
+    async browseFolder(
+        folderId: string,
+        _newFolders?: Folders | null,
+        _checkEmpty?: boolean,
+        force?: boolean,
+    ): Promise<Folders> {
+        let newFoldersNotNull: Folders;
+        if (!_newFolders) {
+            newFoldersNotNull = {};
+            Object.keys(this.state.folders).forEach(folder => {
+                newFoldersNotNull[folder] = this.state.folders[folder];
+            });
+        } else {
+            newFoldersNotNull = _newFolders;
+        }
+
+        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)),
+                    )
+                        .then(() => resolve(newFoldersNotNull))
+                        .catch(error => reject(new Error(error)));
+                });
+            }
+
+            return Promise.resolve(newFoldersNotNull);
+        }
+
+        // if root folder
+        if (!folderId || folderId === '/') {
+            try {
+                let objs = (await this.props.socket.readMetaItems()) as MetaObject[];
+                const _folders: FolderOrFileItem[] = [];
+                let userData = null;
+
+                if (this.state.restrictToFolder) {
+                    const adapter = this.state.restrictToFolder.split('/')[0];
+                    objs = objs.filter(obj => obj._id === adapter);
+                } else if (!this.state.expertMode) {
+                    // load only adapter.admin and not other meta files like hm-rpc.0.devices.blablabla
+                    objs = objs.filter(obj => !obj._id.endsWith('.admin'));
+                }
+
+                const pos = objs.findIndex(obj => obj._id === 'system.meta.uuid');
+                if (pos !== -1) {
+                    objs.splice(pos, 1);
+                }
+
+                objs.forEach(obj => {
+                    if (this.limitToObjectID && this.limitToObjectID !== obj._id) {
+                        return;
+                    }
+
+                    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,
+                        folder: true,
+                        acl: obj.acl,
+                        level: 0,
+                    };
+
+                    if (item.id === USER_DATA) {
+                        // user data must be first
+                        userData = item;
+                    } else {
+                        _folders.push(item);
+                    }
+                });
+
+                _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);
+                    }
+                }
+
+                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);
+                }
+            } catch (e: unknown) {
+                const knownError = e as Error;
+                if (this.initialReadFinished) {
+                    window.alert(`Cannot read meta items: ${knownError.message}`);
+                }
+                newFoldersNotNull[folderId || '/'] = [];
+            }
+            return newFoldersNotNull;
+        }
+
+        const parts = folderId.split('/');
+        const level = parts.length;
+        const adapter = parts.shift();
+        const relPath = parts.join('/');
+
+        // make all requests here serial
+        const files = await this.readDirSerial(adapter || '', relPath);
+        try {
+            const _folders: FolderOrFileItem[] = [];
+
+            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,
+                    modified: file.modifiedAt,
+                    acl: file.acl,
+                    level,
+                };
+
+                if (this.state.restrictToFolder) {
+                    if (
+                        item.folder &&
+                        (item.id.startsWith(`${this.state.restrictToFolder}/`) ||
+                            item.id === this.state.restrictToFolder ||
+                            this.state.restrictToFolder.startsWith(`${item.id}/`))
+                    ) {
+                        _folders.push(item);
+                    } else if (item.id.startsWith(`${this.state.restrictToFolder}/`)) {
+                        _folders.push(item);
+                    }
+                } else if (this.limitToPath) {
+                    if (
+                        item.folder &&
+                        (item.id.startsWith(`${this.limitToPath}/`) ||
+                            item.id === this.limitToPath ||
+                            this.limitToPath.startsWith(`${item.id}/`))
+                    ) {
+                        _folders.push(item);
+                    } else if (item.id.startsWith(`${this.limitToPath}/`)) {
+                        _folders.push(item);
+                    }
+                } else {
+                    _folders.push(item);
+                }
+            });
+
+            _folders.sort(sortFolders);
+            newFoldersNotNull[folderId] = _folders;
+
+            if (!_checkEmpty) {
+                return Promise.all(
+                    _folders
+                        .filter(item => item.folder)
+                        .map(item => this.browseFolder(item.id, newFoldersNotNull, true)),
+                ).then(() => newFoldersNotNull);
+            }
+        } catch (e: unknown) {
+            const knownError = e as Error;
+            if (this.initialReadFinished) {
+                window.alert(`Cannot read ${adapter}${relPath ? `/${relPath}` : ''}: ${knownError?.message}`);
+            }
+            newFoldersNotNull[folderId] = [];
+        }
+
+        return newFoldersNotNull;
+    }
+
+    toggleFolder(item: FolderOrFileItem, e: React.MouseEvent<Element>): void {
+        e?.stopPropagation();
+        const expanded = [...this.state.expanded];
+        const pos = expanded.indexOf(item.id);
+        if (pos === -1) {
+            expanded.push(item.id);
+            expanded.sort();
+
+            this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
+
+            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),
+                        ),
+                    );
+            } else {
+                this.setState({ expanded });
+            }
+        } else {
+            expanded.splice(pos, 1);
+            this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
+            this.setState({ expanded });
+        }
+    }
+
+    onFileChange = (id: string, fileName: string, size: number | null): void => {
+        const key = `${id}/${fileName}`;
+        const pos = key.lastIndexOf('/');
+        const folder = key.substring(0, pos);
+        console.log(`File changed ${key}[${size}]`);
+
+        if (this.state.folders[folder]) {
+            if (this._tempTimeout[folder]) {
+                clearTimeout(this._tempTimeout[folder]);
+            }
+
+            this._tempTimeout[folder] = setTimeout(() => {
+                delete this._tempTimeout[folder];
+
+                this.browseFolder(folder, null, false, true)
+                    .then(folders => this.setState({ folders }))
+                    .catch(e => console.error(`Cannot read folder: ${e.message}`));
+            }, 300);
+        }
+    };
+
+    changeFolder(e: React.MouseEvent<HTMLDivElement>, folder?: string): void {
+        if (e) {
+            e.stopPropagation();
+        }
+
+        this.lastSelect = Date.now();
+
+        let _folder = folder || getParentDir(this.state.currentDir);
+
+        if (_folder === '/') {
+            _folder = '';
+        }
+
+        this.localStorage.setItem('files.currentDir', _folder);
+
+        if (folder && e && (e.altKey || e.shiftKey || e.ctrlKey || e.metaKey)) {
+            return this.setState({ selected: _folder });
+        }
+
+        if (_folder && !this.state.folders[_folder]) {
+            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(
+            {
+                currentDir: _folder,
+                selected: _folder,
+                path: _folder,
+                pathFocus: false,
+            },
+            () => this.props.onSelect && this.props.onSelect(''),
+        );
+    }
+
+    select(id: string, e?: React.MouseEvent<HTMLDivElement> | null, cb?: () => void): void {
+        if (e) {
+            e.stopPropagation();
+        }
+        this.lastSelect = Date.now();
+
+        this.localStorage.setItem('files.selected', id);
+
+        this.setState({ selected: id, path: id, pathFocus: false }, () => {
+            if (this.props.onSelect) {
+                const ext = Utils.getFileExtension(id);
+                if (
+                    (!this.props.filterFiles || (ext && this.props.filterFiles.includes(ext))) &&
+                    (!this.state.filterByType ||
+                        (ext && (EXTENSIONS as Record<string, string[]>)[this.state.filterByType].includes(ext)))
+                ) {
+                    this.props.onSelect(id, false, !!this.state.folders[id]);
+                } else {
+                    this.props.onSelect('');
+                }
+            }
+            if (cb) {
+                cb();
+            }
+        });
+    }
+
+    getText(text?: ioBroker.StringOrTranslated | null): string | undefined {
+        if (text) {
+            if (typeof text === 'object') {
+                return text[this.props.lang] || text.en || undefined;
+            }
+            return text;
+        }
+        return undefined;
+    }
+
+    renderFolder(item: FolderOrFileItem, expanded?: boolean): React.JSX.Element | null {
+        if (
+            this.state.viewType === TABLE &&
+            this.state.filterEmpty &&
+            (!this.state.folders[item.id] || !this.state.folders[item.id].length) &&
+            item.id !== USER_DATA &&
+            !item.temp
+        ) {
+            return null;
+        }
+        const IconEl = expanded ? IconOpen : IconClosed;
+        const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
+        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
+                    }
+                />
+
+                <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"
+                    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.allowDownload ? (
+                    <div style={styles[`itemDownloadEmpty${this.state.viewType}`]} />
+                ) : null}
+
+                {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>
+        );
+    }
+
+    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[`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>
+        );
+    }
+
+    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): 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');
+        } else {
+            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>
+        );
+    }
+
+    getFileIcon(ext: string | null): React.JSX.Element {
+        switch (ext) {
+            case 'json':
+            case 'json5':
+                return <JsonIcon style={styles[`itemIcon${this.state.viewType}`]} />;
+
+            case 'css':
+                return <CssIcon style={styles[`itemIcon${this.state.viewType}`]} />;
+
+            case 'js':
+            case 'ts':
+                return <JSIcon style={styles[`itemIcon${this.state.viewType}`]} />;
+
+            case 'html':
+            case 'md':
+                return <HtmlIcon style={styles[`itemIcon${this.state.viewType}`]} />;
+
+            case 'mp3':
+            case 'ogg':
+            case 'wav':
+            case 'm4a':
+            case 'mp4':
+            case 'flac':
+                return <MusicIcon style={styles[`itemIcon${this.state.viewType}`]} />;
+
+            default:
+                return <FileIcon style={styles[`itemIcon${this.state.viewType}`]} />;
+        }
+    }
+
+    static getEditFile(ext: string | null): boolean {
+        switch (ext) {
+            case 'json':
+            case 'json5':
+            case 'js':
+            case 'html':
+            case 'txt':
+            case 'css':
+            case 'log':
+                return true;
+            default:
+                return false;
+        }
+    }
+
+    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]);
+                return { backgroundImage: array[array.indexOf(backgroundImage) + 1] };
+            }
+            this.localStorage.setItem('files.backgroundImage', array[0]);
+            return { backgroundImage: array[0] };
+        });
+    };
+
+    getStyleBackgroundImage = (): React.CSSProperties | null => {
+        // ['light', 'dark', 'colored', 'delete']
+        switch (this.state.backgroundImage) {
+            case 'light':
+                return styles.backgroundImageLight;
+            case 'dark':
+                return styles.backgroundImageDark;
+            case 'colored':
+                return styles.backgroundImageColored;
+            case 'delete':
+                return null;
+            default:
+                return null;
+        }
+    };
+
+    renderFile(item: FolderOrFileItem): React.JSX.Element {
+        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>
+                <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="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)[] {
+        if (this.state.folders && this.state.folders[folderId]) {
+            // tile
+            if (this.state.viewType === TILE) {
+                const res: (React.JSX.Element | null)[] = [];
+                if (folderId && folderId !== '/') {
+                    res.push(this.renderBackFolder());
+                }
+                this.state.folders[folderId].forEach(item => {
+                    if (item.folder) {
+                        res.push(this.renderFolder(item));
+                    } 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)))
+                    ) {
+                        res.push(this.renderFile(item));
+                    }
+                });
+                return res;
+            }
+
+            const totalResult: (React.JSX.Element | null)[] = [];
+            this.state.folders[folderId].forEach(item => {
+                if (item.folder) {
+                    const expanded = this.state.expanded.includes(item.id);
+
+                    const folders = this.renderFolder(item, expanded);
+                    if (Array.isArray(folders)) {
+                        folders.forEach(folder => totalResult.push(folder));
+                    } else {
+                        totalResult.push(folders);
+                    }
+                    if (this.state.folders[item.id] && expanded) {
+                        const items = this.renderItems(item.id);
+                        if (Array.isArray(items)) {
+                            items.forEach(_item => totalResult.push(_item));
+                        } else {
+                            totalResult.push(items);
+                        }
+                    }
+                } 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)))
+                ) {
+                    totalResult.push(this.renderFile(item));
+                }
+            });
+
+            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}
+                </div>
+            </div>
+        );
+    }
+
+    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"
+                    >
+                        <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();
+                                }
+                            });
+                        }}
+                        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}
+                                    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): null | FolderOrFileItem {
+        folders = folders || this.state.folders;
+        if (!folders) {
+            return null;
+        }
+        const parts = id.split('/');
+        parts.pop();
+        const parentFolder = parts.join('/') || '/';
+        if (!folders[parentFolder]) {
+            return null;
+        }
+        return folders[parentFolder].find(item => item.id === id) || null;
+    }
+
+    renderInputDialog(): React.JSX.Element | null {
+        if (this.state.addFolder) {
+            const parentFolder = this.findFirstFolder(this.state.selected);
+
+            if (!parentFolder) {
+                window.alert(this.props.t('ra_Invalid parent folder!'));
+                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 });
+                        }
+                    }}
+                    replace={(text: string) => text.replace(/[^-_\w]/, '_')}
+                />
+            );
+        }
+        return null;
+    }
+
+    componentDidUpdate(/* prevProps , prevState, snapshot */): void {
+        if (this.setOpacityTimer) {
+            clearTimeout(this.setOpacityTimer);
+        }
+        this.setOpacityTimer = setTimeout(() => {
+            this.setOpacityTimer = null;
+            const items = window.document.getElementsByClassName('browserItem');
+            for (let i = 0; i < items.length; i++) {
+                (items[i] as HTMLElement).style.opacity = '1';
+            }
+        }, 100);
+    }
+
+    findFirstFolder(id: string): string | null {
+        let parentFolder = id;
+        const item = this.findItem(parentFolder);
+        // find folder
+        if (item && !item.folder) {
+            const parts = parentFolder.split('/');
+            parts.pop();
+            parentFolder = '';
+            while (parts.length) {
+                const _item = this.findItem(parts.join('/'));
+                if (_item?.folder) {
+                    parentFolder = parts.join('/');
+                    break;
+                }
+                parts.pop();
+            }
+            if (!parts.length) {
+                return null;
+            }
+        }
+
+        return parentFolder;
+    }
+
+    async uploadFile(fileName: string, data: string): Promise<void> {
+        const parts: string[] = fileName.split('/');
+        const adapterName = parts.shift();
+        try {
+            await this.props.socket.writeFile64(adapterName || '', parts.join('/'), data);
+        } catch (e: unknown) {
+            const knownError = e as Error;
+            window.alert(`Cannot write file: ${knownError?.message}`);
+        }
+    }
+
+    renderUpload(): React.JSX.Element[] | null {
+        if (this.state.uploadFile) {
+            return [
+                <Fab
+                    key="close"
+                    color="primary"
+                    aria-label="close"
+                    style={styles.uploadCloseButton}
+                    onClick={() => this.setState({ uploadFile: false })}
+                >
+                    <CloseIcon />
+                </Fab>,
+                <Dropzone
+                    key="dropzone"
+                    onDragEnter={() => this.setState({ uploadFile: 'dragging' })}
+                    onDragLeave={() => this.setState({ uploadFile: true })}
+                    onDrop={acceptedFiles => {
+                        let count = acceptedFiles.length;
+
+                        acceptedFiles.forEach(file => {
+                            const reader = new FileReader();
+
+                            reader.onabort = () => console.log('file reading was aborted');
+                            reader.onerror = () => console.log('file reading has failed');
+                            reader.onload = () => {
+                                const parentFolder = this.findFirstFolder(this.state.selected);
+
+                                if (!parentFolder) {
+                                    window.alert(this.props.t('ra_Invalid parent folder!'));
+                                } else {
+                                    const id = `${parentFolder}/${file.name}`;
+
+                                    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,
+                                                    );
+                                                }
+                                            });
+                                        }
+                                    });
+                                }
+                            };
+
+                            reader.readAsArrayBuffer(file);
+                        });
+                    }}
+                >
+                    {({ 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>
+                            </Box>
+                        </div>
+                    )}
+                </Dropzone>,
+            ];
+        }
+        return null;
+    }
+
+    deleteRecursive(id: string): Promise<void> {
+        const item = this.findItem(id);
+        if (item?.folder) {
+            return (
+                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();
+                    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('/');
+        const adapter = parts.shift();
+        if (parts.length) {
+            return this.props.socket
+                .deleteFile(adapter || '', parts.join('/'))
+                .catch(e => window.alert(`Cannot delete file: ${e}`));
+        }
+        return Promise.resolve();
+    }
+
+    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;
+                }
+
+                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 = {};
+
+                    Object.keys(this.state.folders).forEach(name => {
+                        if (name !== parentFolder && !name.startsWith(`${parentFolder}/`)) {
+                            folders[name] = this.state.folders[name];
+                        }
+                    });
+
+                    newState.folders = folders;
+
+                    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(): 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 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(): React.JSX.Element | null {
+        if (this.state.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[]): void {
+        this.cacheFolders = this.cacheFolders || JSON.parse(JSON.stringify(this.state.folders));
+        let changed;
+
+        info.forEach(it => {
+            const item = this.findItem(it.id, this.cacheFolders);
+            if (item && JSON.stringify(item.acl) !== JSON.stringify(it.acl)) {
+                item.acl = it.acl;
+                changed = true;
+            }
+        });
+        if (changed) {
+            if (this.cacheFoldersTimeout) {
+                clearTimeout(this.cacheFoldersTimeout);
+            }
+            this.cacheFoldersTimeout = setTimeout(() => {
+                this.cacheFoldersTimeout = null;
+                const folders = this.cacheFolders || {};
+                this.cacheFolders = null;
+                this.setState({ folders });
+            }, 200);
+        }
+    }
+
+    changeToPath(): void {
+        setTimeout(() => {
+            if (this.state.path !== this.state.selected && (!this.lastSelect || Date.now() - this.lastSelect > 100)) {
+                let folder = this.state.path;
+                if (isFile(this.state.path)) {
+                    folder = getParentDir(this.state.path);
+                }
+                new Promise(resolve => {
+                    if (!this.state.folders[folder]) {
+                        this.browseFolder(folder)
+                            .then(folders => this.setState({ folders }, () => resolve(true)))
+                            .catch(err =>
+                                this.setState({
+                                    errorText:
+                                        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 }),
+                    )
+                    .catch(e => console.error(e));
+            } else if (!this.lastSelect || Date.now() - this.lastSelect > 100) {
+                this.setState({ pathFocus: false });
+            }
+        }, 100);
+    }
+
+    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 (
+                        <div
+                            style={styles.pathDivBreadcrumbSelected}
+                            key={`${this.state.selected}_${i}`}
+                            onClick={() => this.setState({ pathFocus: true })}
+                        >
+                            {part}
+                        </div>
+                    );
+                })}
+            </Breadcrumbs>
+        );
+    }
+
+    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>
+                        }
+                        onBlur={() => this.changeToPath()}
+                        onChange={e => this.setState({ path: e.target.value })}
+                        style={styles.pathDivInput}
+                    />
+                ) : (
+                    this.renderBreadcrumb()
+                )}
+            </Box>
+        );
+    }
+
+    render(): React.JSX.Element {
+        if (!this.props.ready) {
+            return <LinearProgress />;
+        }
+
+        if (this.state.loadAllFolders && !this.foldersLoading) {
+            this.foldersLoading = true;
+            setTimeout(() => {
+                this.setState({ loadAllFolders: false, folders: {} }, () => {
+                    this.foldersLoading = false;
+                    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}
+                <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>
+        );
+    }
+}
+
+export default withWidth()(FileBrowserClass);