Getting Started with File Manager

NOTE
Before starting the tutorial, make sure that you have installed DevExtreme in your application as described in the Installation section (for JavaScript libraries), the Getting Started article (for ASP.NET MVC 5 Controls), or the Configure a Visual Studio Project article (for ASP.NET Core Controls).

The FileManager widget allows users to manage files and folders.

DevExtreme File Manager - Getting Started

NOTE
DevExtreme FileManager is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please email your comments to support@devexpress.com.

View Demo

The following code adds the FileManager widget to your page.

jQuery
index.js
data.js
$(function () {
    $("#file-manager").dxFileManager({
        name: "fileManager",
        fileProvider: fileSystem,
        currentPath: "Documents",
        height: 450,
        permissions: {
            create: true,
            copy: true,
            move: true,
            remove: true,
            rename: true
        }
    });
});
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
            }
        ],
    },
    // ...
];      

Bind to Hierarchical Structure

–°reate a file provider that allows you to access and modify file systems.

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

The Array file provider automatically binds data objects to the widget if the data objects have the default 'name', 'size', 'dateModified', etc. fields in its structure. For example:

{
    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 field with conventional names:

jQuery
index.js
data.js
$(function() {
    $("#file-manager").dxFileManager({
        name: "fileManager",
        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 properties when you specify the file system item's name, size, and so on.

jQuery
index.js
data.js
$(function() {
    $("#file-manager").dxFileManager({
        name: "fileManager",
        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
            }
        ],
    },
    //...
];