Vue FileManager - Custom.Configuration
abortFileUpload
A Promise that is resolved after the file upload in aborted. It is a native Promise or a jQuery.Promise when you use jQuery.
- <template>
- <DxFileManager
- :file-system-provider="fileSystemProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileSystemProvider: new CustomFileSystemProvider({
- abortFileUpload,
- // ...
- }),
- };
- }
- };
- function abortFileUpload(fileData, chunksInfo, destinationDir) {
- // ...
- }
- // other functions
- </script>
copyItem
A Promise that is resolved after the file system item is copied. It is a native Promise or a jQuery.Promise when you use jQuery.
- <template>
- <DxFileManager
- :file-system-provider="fileSystemProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileSystemProvider: new CustomFileSystemProvider({
- copyItem,
- // ...
- }),
- };
- }
- };
- function copyItem(item, destinationDir) {
- // ...
- }
- // other functions
- </script>
createDirectory
A Promise that is resolved after a new directory is created. It is a native Promise or a jQuery.Promise when you use jQuery.
- <template>
- <DxFileManager
- :file-system-provider="fileSystemProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileSystemProvider: new CustomFileSystemProvider({
- createDirectory,
- // ...
- }),
- };
- }
- };
- function createDirectory(parentDir, name) {
- // ...
- }
- // other functions
- </script>
deleteItem
A Promise that is resolved after a file system item is deleted. It is a native Promise or a jQuery.Promise when you use jQuery.
- <template>
- <DxFileManager
- :file-system-provider="fileSystemProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileSystemProvider: new CustomFileSystemProvider({
- deleteItem,
- // ...
- }),
- };
- }
- };
- function deleteItem(item) {
- // ...
- }
- // other functions
- </script>
downloadItems
- <template>
- <DxFileManager
- :file-system-provider="fileSystemProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileSystemProvider: new CustomFileSystemProvider({
- downloadItems,
- // ...
- }),
- };
- }
- };
- function downloadItems(Array<FileManagerItem>) {
- // ...
- }
- // other functions
- </script>
getItems
A Promise that is resolved after file system items are obtained. It is a native Promise or a jQuery.Promise when you use jQuery.
The getItems function returns data items and then passes them to the dataItem fields of the FileSystemItem objects. You can call the getItems method to get these file system items.
- <template>
- <DxFileManager
- :file-system-provider="fileSystemProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileSystemProvider: new CustomFileSystemProvider({
- getItems,
- // ...
- }),
- };
- }
- };
- function getItems(pathInfo) {
- // ...
- }
- // other functions
- </script>
getItemsContent
A Promise that is resolved after the content of the file system items is obtained. It is a native Promise or a jQuery.Promise when you use jQuery.
- <template>
- <DxFileManager
- :file-system-provider="fileSystemProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileSystemProvider: new CustomFileSystemProvider({
- getItemsContent,
- // ...
- }),
- };
- }
- };
- function getItemsContent(pathInfo) {
- // ...
- }
- // other functions
- </script>
hasSubDirectoriesExpr
A function or the name of a data source field that provides information on whether a file or folder contains sub directories.
- <template>
- <DxFileManager
- :file-system-provider="fileSystemProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileSystemProvider: new CustomFileSystemProvider({
- hasSubDirectoriesExpr: "hasSubDirectoriesExpr",
- }),
- };
- }
- };
- </script>
moveItem
A Promise that is resolved after the file system item is moved. It is a native Promise or a jQuery.Promise when you use jQuery.
- <template>
- <DxFileManager
- :file-system-provider="fileSystemProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileSystemProvider: new CustomFileSystemProvider({
- moveItem,
- // ...
- }),
- };
- }
- };
- function moveItem(item, destinationDir) {
- // ...
- }
- // other functions
- </script>
renameItem
A Promise that is resolved after the file system item is renamed. It is a native Promise or a jQuery.Promise when you use jQuery.
- <template>
- <DxFileManager
- :file-system-provider="fileSystemProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileSystemProvider: new CustomFileSystemProvider({
- renameItem,
- // ...
- }),
- };
- }
- };
- function renameItem(item, name) {
- // ...
- }
- // other functions
- </script>
thumbnailExpr
The data field can contain one of the following:
- The icon's URL
- The icon's name if the icon is from the DevExtreme icon library
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
- The icon in the Base64 format
uploadFileChunk
A Promise that is resolved after the file system item is uploaded. It is a native Promise or a jQuery.Promise when you use jQuery.
- <template>
- <DxFileManager
- :file-system-provider="fileSystemProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileSystemProvider: new CustomFileSystemProvider({
- uploadFileChunk,
- // ...
- }),
- };
- }
- };
- function uploadFileChunk(fileData, chunksInfo, destinationDir) {
- // ...
- }
- // other functions
- </script>
If you have technical questions, please create a support ticket in the DevExpress Support Center.