DevExtreme React - 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

Create a File Manager

The following code creates the FileManager widget and adds it to your page.

jQuery
index.js
index.html
data.js
$(function () {
    $("#file-manager").dxFileManager({
        fileProvider: fileSystem,
        currentPath: "Documents",
        height: 450,
        permissions: {
            create: true,
            copy: true,
            move: true,
            remove: true,
            rename: true
        }
    });
});
<div id="file-manager"></div>
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 the File Manager Widget to a File System

Create a file provider that allows you to access and modify file systems.

NOTE
In this section, the Object file system is used to quickly bind the FileManager widget to data. Refer to the Bind to File Systems section for more information on supported 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 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
            }
        ],
    },
    //...
];
See Also

Bind to an Object File System