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>

Props

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.