Vue FileManager - Custom

A custom file system provider allows you to implement custom APIs to access and use file systems.

import CustomFileSystemProvider from "devextreme/file_management/custom_provider"

Use the custom provider's methods to handle file operations (add, delete, rename, and so on).

The following code shows how to create a custom file system provider and bind the FileManager UI component to it:

jQuery
index.js
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 
            getItems: function(pathInfo) { 
                // Your code goes here
            }, 
            renameItem: function(item, name) { 
                // Your code goes here
            }, 
            createDirectory: function(parentDir, name) { 
                // Your code goes here
            }, 
            deleteItem: function(item) { 
                // Your code goes here
            }, 
            // ...
        }) 
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-file-manager 
    [fileSystemProvider]="fileSystemProvider">
</dx-file-manager>
import { Component } from '@angular/core';
import CustomFileSystemProvider from 'devextreme/file_management/custom_provider'; 

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    fileSystemProvider: CustomFileSystemProvider;
    constructor(http: HttpClient) {
        this.fileSystemProvider = new CustomFileSystemProvider({
            getItems,
            createDirectory,
            renameItem,
            deleteItem,
            // ...
        });
    }
}

function getItems(parentDirectory) {
    // ...
}
// other functions
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileManagerModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileManagerModule
    ],
    //...
})
export class AppModule { }
Vue
App.vue
<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,
                createDirectory,
                renameItem,
                deleteItem,
                // ...
            }),
        };
    }
};

function getItems(parentDirectory) {
    // ...
}
// other functions

</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import FileManager from 'devextreme-react/file-manager';
import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';

class App extends React.Component {
    render() {
        constructor() {
            super();
            this.fileSystemProvider = new CustomFileSystemProvider({
                getItems,
                createDirectory,
                renameItem,
                deleteItem,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function getItems(parentDirectory) {
    // ...
}
// other functions

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .GetItems("getItems")
        .CreateDirectory("createDirectory")
        .RenameItem("renameItem")
        .DeleteItem("deleteItem")
        // ...
    )    
)

<script>
    function getItems(parentDirectory) {
        // ...
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .GetItems("getItems")
        .CreateDirectory("createDirectory")
        .RenameItem("renameItem")
        .DeleteItem("deleteItem")
        // ...
    )    
)

<script>
    function getItems(parentDirectory) {
        // ...
    }
    // other functions
</script>

Configuration

This section describes properties that configure a custom file system provider.

Name Description
abortFileUpload

A function that cancels the file upload.

copyItem

A function that copies files or directories.

createDirectory

A function that creates a directory.

dateModifiedExpr

Specifies which data field provides timestamps that indicate when a file was last modified.

deleteItem

A function that deletes a file or directory.

downloadItems

A function that downloads files.

getItems

A function that gets file system items.

getItemsContent

A function that get items content.

hasSubDirectoriesExpr

A function or the name of a data source field that provides information on whether a file or directory contains sub directories.

isDirectoryExpr

Specifies which data field provides information about whether a file system item is a directory.

keyExpr

Specifies the data field that provides keys.

moveItem

A function that moves files and directories.

nameExpr

Specifies which data field provides file and directory names.

renameItem

A function that renames files and directories.

sizeExpr

Specifies which data field provides file sizes.

thumbnailExpr

Specifies which data field provides icons to be used as thumbnails.

uploadFileChunk

A function that uploads a file in chunks.

Methods

This section describes members used to manage file system items.

Name Description
abortFileUpload()

Cancels the file upload.

copyItems()

Copies files or directories.

createDirectory()

Creates a directory.

deleteItems()

Deletes files or directories.

downloadItems()

Downloads files.

getItems()

Gets file system items.

getItemsContent()

Gets items content.

moveItems()

Moves files and directories.

renameItem()

Renames a file or directory.

uploadFileChunk()

Uploads a file in chunks.