/** * DevExtreme (ui/file_manager.d.ts) * Version: 25.1.7 * Build date: Mon Nov 10 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import { UserDefinedElement, DxElement, } from '../core/element'; import { DxPromise, } from '../core/utils/deferred'; import { Cancelable, EventInfo, NativeEventInfo, InitializedEventInfo, ChangedOptionInfo, } from '../events'; import FileSystemItem from '../file_management/file_system_item'; import { Item as dxContextMenuItem, } from './context_menu'; import { Item as dxToolbarItem, } from './toolbar'; import Widget, { WidgetOptions, } from './widget/ui.widget'; import { template, DataType, SingleOrMultiple, HorizontalAlignment, SortOrder, ToolbarItemLocation, } from '../common'; /** * * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface ActionEventInfo { /** * */ errorCode?: number; /** * */ errorText: string; /** * */ cancel: boolean | PromiseLike; } export { DataType, SingleOrMultiple, HorizontalAlignment, SortOrder, ToolbarItemLocation, }; /** * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export type FileManagerItemViewMode = 'details' | 'thumbnails'; export type FileManagerPredefinedContextMenuItem = 'create' | 'upload' | 'refresh' | 'download' | 'move' | 'copy' | 'rename' | 'delete'; export type FileManagerPredefinedToolbarItem = 'showNavPane' | 'create' | 'upload' | 'refresh' | 'switchView' | 'download' | 'move' | 'copy' | 'rename' | 'delete' | 'clearSelection' | 'separator'; /** * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export type FileManagerViewArea = 'navPane' | 'itemView'; /** * The type of the contentReady event handler's argument. */ export type ContentReadyEvent = EventInfo; /** * The type of the contextMenuItemClick event handler's argument. */ export type ContextMenuItemClickEvent = NativeEventInfo & { /** * */ readonly itemData: any; /** * */ readonly itemElement: DxElement; /** * */ readonly itemIndex: number; /** * */ readonly fileSystemItem?: FileSystemItem; /** * */ readonly viewArea: FileManagerViewArea; }; /** * The type of the contextMenuShowing event handler's argument. */ export type ContextMenuShowingEvent = Cancelable & NativeEventInfo & { /** * */ readonly fileSystemItem?: FileSystemItem; /** * */ readonly targetElement?: DxElement; /** * */ readonly viewArea: FileManagerViewArea; }; /** * The type of the currentDirectoryChanged event handler's argument. */ export type CurrentDirectoryChangedEvent = EventInfo & { /** * */ readonly directory: FileSystemItem; }; /** * The type of the disposing event handler's argument. */ export type DisposingEvent = EventInfo; /** * The type of the errorOccurred event handler's argument. */ export type ErrorOccurredEvent = EventInfo & { /** * */ readonly errorCode?: number; /** * */ errorText?: string; /** * */ readonly fileSystemItem?: FileSystemItem; }; /** * The type of the focusedItemChanged event handler's argument. */ export type FocusedItemChangedEvent = EventInfo & { /** * */ readonly item?: FileSystemItem; /** * */ readonly itemElement?: DxElement; }; /** * The type of the initialized event handler's argument. */ export type InitializedEvent = InitializedEventInfo; /** * The type of the optionChanged event handler's argument. */ export type OptionChangedEvent = EventInfo & ChangedOptionInfo; /** * The type of the selectedFileOpened event handler's argument. */ export type SelectedFileOpenedEvent = EventInfo & { /** * */ readonly file: FileSystemItem; }; /** * The type of the selectionChanged event handler's argument. */ export type SelectionChangedEvent = EventInfo & { /** * */ readonly currentSelectedItemKeys: Array; /** * */ readonly currentDeselectedItemKeys: Array; /** * */ readonly selectedItems: Array; /** * */ readonly selectedItemKeys: Array; }; /** * The type of the toolbarItemClick event handler's argument. */ export type ToolbarItemClickEvent = NativeEventInfo & { /** * */ readonly itemData: any; /** * */ readonly itemElement: DxElement; /** * */ readonly itemIndex: number; }; /** * The type of the directoryCreating event handler's argument. */ export type DirectoryCreatingEvent = EventInfo & ActionEventInfo & { /** * */ readonly parentDirectory: FileSystemItem; /** * */ readonly name: string; }; /** * The type of the directoryCreated event handler's argument. */ export type DirectoryCreatedEvent = EventInfo & { /** * */ readonly parentDirectory: FileSystemItem; /** * */ readonly name: string; }; /** * The type of the itemRenaming event handler's argument. */ export type ItemRenamingEvent = EventInfo & ActionEventInfo & { /** * */ readonly item: FileSystemItem; /** * */ readonly newName: string; }; /** * The type of the itemRenamed event handler's argument. */ export type ItemRenamedEvent = EventInfo & { /** * */ readonly sourceItem: FileSystemItem; /** * */ readonly itemName: string; }; /** * The type of the itemMoving event handler's argument. */ export type ItemMovingEvent = EventInfo & ActionEventInfo & { /** * */ readonly item: FileSystemItem; /** * */ readonly destinationDirectory: FileSystemItem; }; /** * The type of the itemMoved event handler's argument. */ export type ItemMovedEvent = EventInfo & { /** * */ readonly sourceItem: FileSystemItem; /** * */ readonly parentDirectory: FileSystemItem; /** * */ readonly itemName: string; /** * */ readonly itemPath: string; }; /** * The type of the itemCopying event handler's argument. */ export type ItemCopyingEvent = EventInfo & ActionEventInfo & { /** * */ readonly item: FileSystemItem; /** * */ readonly destinationDirectory: FileSystemItem; }; /** * The type of the itemCopied event handler's argument. */ export type ItemCopiedEvent = EventInfo & { /** * */ readonly sourceItem: FileSystemItem; /** * */ readonly parentDirectory: FileSystemItem; /** * */ readonly itemName: string; /** * */ readonly itemPath: string; }; /** * The type of the itemDeleting event handler's argument. */ export type ItemDeletingEvent = EventInfo & ActionEventInfo & { /** * */ readonly item: FileSystemItem; }; /** * The type of the itemDeleted event handler's argument. */ export type ItemDeletedEvent = EventInfo & { /** * */ readonly item: FileSystemItem; }; /** * The type of the fileUploading event handler's argument. */ export type FileUploadingEvent = EventInfo & ActionEventInfo & { /** * */ readonly fileData: File; /** * */ readonly destinationDirectory: FileSystemItem; }; /** * The type of the fileUploaded event handler's argument. */ export type FileUploadedEvent = EventInfo & { /** * */ readonly fileData: File; /** * */ readonly parentDirectory: FileSystemItem; }; /** * The type of the itemDownloading event handler's argument. */ export type ItemDownloadingEvent = EventInfo & ActionEventInfo & { /** * */ readonly item: FileSystemItem; }; /** * * @deprecated * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxFileManagerOptions extends WidgetOptions { /** * Specifies the allowed upload file extensions. */ allowedFileExtensions?: Array; /** * Configures the context menu settings. */ contextMenu?: dxFileManagerContextMenu; /** * Specifies the path that is used when the FileManager is initialized. */ currentPath?: string; /** * Specifies an array of path keys to the current location. */ currentPathKeys?: Array; /** * Customizes columns in details view. Applies only if itemView.mode is 'details'. */ customizeDetailColumns?: ((columns: Array) => Array); /** * Allows you to provide custom icons to be used as thumbnails. */ customizeThumbnail?: ((fileSystemItem: FileSystemItem) => string); /** * Specifies the file system provider. */ fileSystemProvider?: any; /** * Configures the file and directory view. */ itemView?: { /** * Configures the 'Details' file system representation mode. */ details?: { /** * Configures the columns. */ columns?: Array; }; /** * Specifies the file system representation mode. */ mode?: FileManagerItemViewMode; /** * Specifies whether to display folders in the view. When this property is false, folders are displayed in the navigation pane only. */ showFolders?: boolean; /** * Specifies whether to display the parent directory in the view. */ showParentFolder?: boolean; }; /** * Configures notification settings. */ notifications?: { /** * Specifies whether to show the progress panel. */ showPanel?: boolean; /** * Specifies whether to show the pop-up notification window. */ showPopup?: boolean; }; /** * A function that is executed when a context menu item is clicked. */ onContextMenuItemClick?: ((e: ContextMenuItemClickEvent) => void); /** * A function that is executed before a context menu is displayed. */ onContextMenuShowing?: ((e: ContextMenuShowingEvent) => void); /** * A function that is executed when the current directory is changed. */ onCurrentDirectoryChanged?: ((e: CurrentDirectoryChangedEvent) => void); /** * A function that is executed when the selected file is opened. */ onSelectedFileOpened?: ((e: SelectedFileOpenedEvent) => void); /** * A function that is executed when a file system item is selected or selection is canceled. */ onSelectionChanged?: ((e: SelectionChangedEvent) => void); /** * A function that is executed when a toolbar item is clicked. */ onToolbarItemClick?: ((e: ToolbarItemClickEvent) => void); /** * A function that is executed when the focused item is changed. */ onFocusedItemChanged?: ((e: FocusedItemChangedEvent) => void); /** * A function that is executed when an error occurs. */ onErrorOccurred?: ((e: ErrorOccurredEvent) => void); /** * A function that is executed before a directory is created. */ onDirectoryCreating?: ((e: DirectoryCreatingEvent) => void); /** * A function that is executed when a directory is created. */ onDirectoryCreated?: ((e: DirectoryCreatedEvent) => void); /** * A function that is executed before a file or directory is renamed. */ onItemRenaming?: ((e: ItemRenamingEvent) => void); /** * A function that is executed when a file or directory is renamed. */ onItemRenamed?: ((e: ItemRenamedEvent) => void); /** * A function that is executed before a file or directory is moved. */ onItemMoving?: ((e: ItemMovingEvent) => void); /** * A function that is executed when a file or directory is moved. */ onItemMoved?: ((e: ItemMovedEvent) => void); /** * A function that is executed before a file or directory is copied. */ onItemCopying?: ((e: ItemCopyingEvent) => void); /** * A function that is executed when a file or directory is copied. */ onItemCopied?: ((e: ItemCopiedEvent) => void); /** * A function that is executed before a file or directory is deleted. */ onItemDeleting?: ((e: ItemDeletingEvent) => void); /** * A function that is executed when a file or directory is deleted. */ onItemDeleted?: ((e: ItemDeletedEvent) => void); /** * A function that is executed before the file is uploaded. */ onFileUploading?: ((e: FileUploadingEvent) => void); /** * A function that is executed when a file is successfully uploaded. */ onFileUploaded?: ((e: FileUploadedEvent) => void); /** * A function that is executed before a file is downloaded. */ onItemDownloading?: ((e: ItemDownloadingEvent) => void); /** * Specifies actions that a user is allowed to perform on files and directories. */ permissions?: { /** * Specifies whether a user is allowed to copy files and directories. */ copy?: boolean; /** * Specifies whether a user is allowed to create files and directories. */ create?: boolean; /** * Specifies whether a user is allowed to download files. */ download?: boolean; /** * Specifies whether a user is allowed to move files and directories. */ move?: boolean; /** * Specifies whether a user is allowed to delete files and directories. */ delete?: boolean; /** * Specifies whether a user is allowed to rename files and directories. */ rename?: boolean; /** * Specifies whether a user is allowed to upload files. */ upload?: boolean; }; /** * Specifies the root directory display name. */ rootFolderName?: string; /** * Specifies whether a user can select a single or multiple files and directories in the item view simultaneously. */ selectionMode?: SingleOrMultiple; /** * Contains an array of initially or currently selected files and directories' keys. */ selectedItemKeys?: Array; /** * Specifies a key of the initially or currently focused item. */ focusedItemKey?: string; /** * Configures toolbar settings. */ toolbar?: dxFileManagerToolbar; /** * Configures upload settings. */ upload?: { /** * Specifies the maximum upload file size, in bytes. */ maxFileSize?: number; /** * Specifies a chunk size, in bytes. */ chunkSize?: number; }; } /** * The FileManager is a UI component that allows users to upload, select, and manage files and directories in different file storages. */ export default class dxFileManager extends Widget { /** * Gets the current directory object. */ getCurrentDirectory(): any; /** * Gets the selected items. */ getSelectedItems(): Array; /** * Reloads data and repaints the UI component. */ refresh(): DxPromise; } /** * Configures the context menu. * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxFileManagerContextMenu { /** * Configures context menu items' settings. */ items?: Array; } export type ContextMenuItem = dxFileManagerContextMenuItem; /** * @deprecated Use ContextMenuItem instead * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxFileManagerContextMenuItem extends dxContextMenuItem { /** * Configures settings of a context menu item's subitems. */ items?: Array; /** * Specifies the context menu item's name. */ name?: FileManagerPredefinedContextMenuItem | string; /** * Specifies the context menu item's visibility. */ visible?: boolean | undefined; /** * */ template?: template | (() => string | UserDefinedElement); } /** * Configures the toolbar. * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxFileManagerToolbar { /** * Configures settings of the toolbar items that are visible when users select files. */ fileSelectionItems?: Array; /** * Configures toolbar items' settings. */ items?: Array; } export type ToolbarItem = dxFileManagerToolbarItem; /** * @deprecated Use ToolbarItem instead * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxFileManagerToolbarItem extends dxToolbarItem { /** * Specifies the icon to be displayed on the toolbar item. */ icon?: string; /** * Specifies the toolbar item's location. */ location?: ToolbarItemLocation; /** * Specifies the toolbar item's name. */ name?: FileManagerPredefinedToolbarItem | string; /** * Specifies the toolbar item's visibility. */ visible?: boolean | undefined; /** * */ html?: string; /** * */ template?: template | (() => string | UserDefinedElement); /** * */ menuItemTemplate?: template | (() => string | UserDefinedElement); } /** * Configures the column. * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxFileManagerDetailsColumn { /** * Specifies the column alignment. */ alignment?: HorizontalAlignment | undefined; /** * Specifies the column caption. */ caption?: string | undefined; /** * Specifies a CSS class to be applied to the column. */ cssClass?: string | undefined; /** * Specifies which data field provides data for the column. */ dataField?: string | undefined; /** * Casts column values to a specific data type. */ dataType?: DataType | undefined; /** * Specifies the order in which columns are hidden when the UI component adapts to the screen or container size. */ hidingPriority?: number | undefined; /** * Specifies the order in which the column is sorted. */ sortIndex?: number | undefined; /** * Specifies the sort order of column values. */ sortOrder?: SortOrder | undefined; /** * Specifies the column visibility. */ visible?: boolean; /** * Specifies the position of the column in the resulting UI component. */ visibleIndex?: number | undefined; /** * Specifies the column width. */ width?: number | string | undefined; } export type Properties = dxFileManagerOptions; /** * @deprecated use Properties instead * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export type Options = dxFileManagerOptions;