DevExtreme jQuery/JS - Bind to File Systems

The FileManager widget uses file providers to access and modify different file systems. This topic describes how to work with all supported file systems.

Object File System

The FileManager widget provides the Array file provider to manage files and folders in an in-memory array of JSON objects.

FileManager - Hierarchical Data Structure

Create an Array file provider and assign the array of hierarchical JSON objects to the provider's data option to bind the FileManager widget to a hierarchical data structure.

The provider automatically binds data objects to the widget if the data objects have default fields in their structure. For example:

var fileSystem = [
{
    name: "MyFile.jpg",
    size: 1024,
    dateModified: "2019/05/08",
    thumbnail: "/thumbnails/images/jpeg.ico",
    isDirectory: true,
    items: [
        // ...
        // Nested data objects with the same structure
        // ...
    ]
},
// ...
];

In the example below, the FileManager widget displays hierarchical data stored in an in-memory array that contains fields with conventional names.

jQuery
index.js
data.js
$(function() {
    $("#file-manager").dxFileManager({            
        fileProvider: fileSystem,
        // ...
    });
});
var fileSystem = [
{
    name: "Documents",
    isDirectory: true,
    items: [
        {
            name: "Projects",
            isDirectory: true,
            items: [
                {
                    name: "About.rtf",
                    isDirectory: false,
                    size: 1024
                },
                {
                    name: "Passwords.rtf",
                    isDirectory: false,
                    size: 2048
                }
            ]
        },
        {
            name: "About.xml",
            isDirectory: false,
            size: 1024
        },
        {
            name: "Managers.rtf",
            isDirectory: false,
            size: 2048
        },
        {
            name: "ToDo.txt",
            isDirectory: false,
            size: 3072
        }
    ],
},
//...
];

If the data source's field names differ from the standard field names mentioned above, use the [fieldName]Expr options when you specify the file system item's name, size, and so on.

jQuery
index.js
data.js
$(function() {
    $("#file-manager").dxFileManager({            
        fileProvider: fileSystem,
        isDirectoryExpr: "isFolder",
        sizeExpr: "itemSize",
        // ...
    });
});
var fileSystem = [
    {
        name: "Documents",
        isFolder: true,
        items: [
            {
                name: "Projects",
                isFolder: true,
                items: [
                    {
                        name: "About.rtf",
                        isFolder: false,
                        itemSize: 1024
                    },
                    {
                        name: "Passwords.rtf",
                        isFolder: false,
                        itemSize: 2048
                    }
                ]
            },
            {
                name: "About.xml",
                isFolder: false,
                itemSize: 1024
            },
            {
                name: "Managers.rtf",
                isFolder: false,
                itemSize: 2048
            },
            {
                name: "ToDo.txt",
                isFolder: false,
                itemSize: 3072
            }
        ],
    },
    //...
];

View Demo

Remote File System

The FileManager widget provides the Remote file provider to access files and folders located on the server.

Assign the Remote file provider to the fileProvider option to connect the widget to a file system located on the server. The Remote file provider exposes APIs to get the file system hierarchy and to manage items.

Set the endpointUrl option to the Url of an endpoint used to access and modify a file system.

You can also use helpers for ASP.NET Core and ASP.NET MVC to access different file systems on the server side according to the protocol the FileManager widget uses. Refer to the online documentation and online demos to get more information about the helpers.

The data object, which is sent back from the server, contains attributes that store the file system items' key, name, size, modification date and so on. If these attribute names differ from the conventional names, use the [fieldName]Expr options to map item properties.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({            
        fileProvider: new DevExpress.fileProviders.Remote({
            endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts"
        }),
        allowedFileExtensions: [".js", ".json", ".css"]
        // ...
    });
});
Angular
TypeScript
HTML
import { DxFileManagerModule } from 'devextreme-angular';
import RemoteFileProvider from 'devextreme/ui/file_manager/file_provider/remote';
// ...
export class AppComponent {
    allowedFileExtensions: string[];
    remoteProvider: RemoteFileProvider;

    constructor() {
        this.allowedFileExtensions = [".js", ".json", ".css"];
        this.remoteProvider = new RemoteFileProvider({
            endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts"
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxFileManagerModule
    ],
    // ...
})
<dx-file-manager id="fileManager"
    [fileProvider]="remoteProvider"
    [allowedFileExtensions]="allowedFileExtensions">
    // ...
</dx-file-manager>
Vue
<template>
    <DxFileManager
        :file-provider="remoteFileProvider"
        :allowed-file-extensions="allowedFileExtensions" >
        // ...
    </DxFileManager>
</template>

<script>
import { DxFileManager, DxPermissions } from 'devextreme-vue/file-manager';
import RemoteFileProvider from 'devextreme/ui/file_manager/file_provider/remote';

const remoteFileProvider = new RemoteFileProvider({
    endpointUrl: 'https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts'
});
const allowedFileExtensions = ['.js', '.json', '.css'];
export default {
    components: {
        DxFileManager,
        DxPermissions
    },
    data() {
        return {
            remoteFileProvider,
            allowedFileExtensions
        };
    }
};
</script>
React
import React from 'react';
import FileManager, { Permissions } from 'devextreme-react/file-manager';
import RemoteFileProvider from 'devextreme/ui/file_manager/file_provider/remote';

const remoteFileProvider = new RemoteFileProvider({
    endpointUrl: 'https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts'
});
const allowedFileExtensions = ['.js', '.json', '.css'];
class App extends React.Component {
    render() {
        return (
            <FileManager fileProvider={remoteFileProvider} allowedFileExtensions={allowedFileExtensions}>
                // ...
            </FileManager>
        );
    }
}
export default App;

View Demo

Custom File System

Use the FileManager widget's Custom file provider to implement custom APIs to access and manage file systems. This provider allows you to handle each file operation manually. Use the custom provider when it's necessary to connect the widget to an API service with a custom request or response format.

FileManager - Custom Provider

Assign the Custom file provider to the fileProvider option to implement a custom file provider and bind the FileManager widget to it.

jQuery
JavaScript
$("#file-manager").dxFileManager({
    fileProvider: new DevExpress.fileProviders.Custom({
        // your code
    }),        
});

Use the getItems option to get file system items. The [fieldName]Expr options specify the attribute names that store file system item keys, names, sizes, modification dates, and etc.

jQuery
JavaScript
$("#file-manager").dxFileManager({
    fileProvider: new DevExpress.fileProviders.Custom({
        getItems: function (pathInfo) {
            // your code
        }         
    }),        
});

Implement APIs to handle file operations (add, delete, rename, and etc).

jQuery
JavaScript
$("#file-manager").dxFileManager({
    fileProvider: new DevExpress.fileProviders.Custom({
        // ...
        createDirectory: createDirectory,
        deleteItem: deleteItem,
        // your code
    }),        
});
function createDirectory(parentDirectory, name) {
    // your code
}
function deleteItem(item) {
    // your code
}

View Demo