File Upload / File Management ▸ Toolbar and Context Menu

@(Html.DevExtreme().FileManager()
    .ID("file_manager")
    .FileSystemProvider(new JS("fileSystem"))
    .Permissions(permissions => permissions
        .Create(true)
        .Delete(true)
        .Rename(true)
        .Download(true))
    .Height(450)
    .ItemView(itemView => {
        itemView.Details(details => {
            details.Columns(columns => {
                columns.Add().DataField("thumbnail");
                columns.Add().DataField("name");
                columns.Add().DataField("category").Caption("Category").Width(95);
                columns.Add().DataField("dateModified");
                columns.Add().DataField("size");
            });
        })
        .ShowParentFolder(false);
    })
    .Toolbar(toolbar => {
        toolbar.Items(items => {
            items.Add().Name(FileManagerToolbarItem.ShowNavPane).Visible(true);
            items.Add().Name(FileManagerToolbarItem.Separator);
            items.Add().Name(FileManagerToolbarItem.Create);

            items.Add()
                .Widget(widget => widget.Menu()
                    .Items(menuItems => {
                        menuItems.Add()
                            .Text("Create new file")
                            .Icon("plus")
                            .Items(subItems => {
                                subItems.Add()
                                    .Text("Text Document");
                                subItems.Add()
                                    .Text("RTF Document");
                                subItems.Add()
                                    .Text("Spreadsheet");
                            });
                    })
                    .OnItemClick("onItemClick"))
                .Location(ToolbarItemLocation.Before);

            items.Add().Name(FileManagerToolbarItem.Refresh);
            items.Add().Name(FileManagerToolbarItem.Separator).Location(ToolbarItemLocation.After);
            items.Add().Name(FileManagerToolbarItem.SwitchView);
        });

        toolbar.FileSelectionItems(items => {
            items.Add().Name(FileManagerToolbarItem.Rename);
            items.Add().Name(FileManagerToolbarItem.Separator);
            items.Add().Name(FileManagerToolbarItem.Delete);
            items.Add().Name(FileManagerToolbarItem.Separator);

            items.Add()
                .Widget(widget => widget.Menu()
                    .Items(menuItems => {
                        menuItems.Add()
                            .Text("Category")
                            .Icon("tags")
                            .Items(subItems => {
                                subItems.Add()
                                    .Text("Work");
                                subItems.Add()
                                    .Text("Important");
                                subItems.Add()
                                    .Text("Home");
                                subItems.Add()
                                    .Text("None");
                            });
                    })
                    .OnItemClick("onItemClick"))
                    .Location(ToolbarItemLocation.Before);

            items.Add().Name(FileManagerToolbarItem.Refresh);
            items.Add().Name(FileManagerToolbarItem.ClearSelection);
        });
    })
    .OnContextMenuItemClick("onItemClick")
    .ContextMenu(contextMenu => {
        contextMenu.Items(items => {
            items.Add().Name(FileManagerContextMenuItem.Create);

            items.Add()
                .Text("Create new file")
                .Icon("plus")
                .Items(subItems => {
                    subItems.Add()
                        .Text("Text Document");
                    subItems.Add()
                        .Text("RTF Document");
                    subItems.Add()
                        .Text("Spreadsheet");
                });

            items.Add()
                .Name(FileManagerContextMenuItem.Rename)
                .BeginGroup(true);

            items.Add().Name(FileManagerContextMenuItem.Delete);

            items.Add()
                .Text("Category")
                .Icon("tags")
                .Items(subItems => {
                    subItems.Add()
                        .Text("Work");
                    subItems.Add()
                        .Text("Important");
                    subItems.Add()
                        .Text("Home");
                    subItems.Add()
                        .Text("None");
                })
                .BeginGroup(true);

            items.Add().Name(FileManagerContextMenuItem.Refresh);
        });
    })
)

<script type="text/javascript">
    function onItemClick(args) {
        var fileManager = getFileManager();
        var { extension, category } = getItemInfo(args.itemData.text);

        if(extension) {
            updated = createFile(extension, args.fileSystemItem);
        } else if(category !== undefined) {
            updated = updateCategory(category, args.fileSystemItem, args.viewArea);
        }

        if(updated) {
            fileManager.refresh();
        }
    }

    function createFile(fileExtension, directory) {
        var fileManager = getFileManager();
        var newItem = {
            __KEY__: Date.now(),
            name: "New file" + fileExtension,
            isDirectory: false,
            size: 0
        };

        directory = directory || fileManager.getCurrentDirectory();
        if(!directory.isDirectory) {
            return false;
        }

        var array = null;
        if(!directory.dataItem) {
            array = fileSystem;
        }
        else {
            array = directory.dataItem.items;
            if(!array) {
                directory.dataItem.items = array = [];
            }
        }

        array.push(newItem);
        return true;
    }

    function updateCategory(newCategory, directory, viewArea) {
        var fileManager = getFileManager();
        var items = null;

        if(viewArea === "navPane") {
            items = [directory];
        } else {
            items = fileManager.getSelectedItems();
        }

        items.forEach(function(item) {
            if(item.dataItem) {
                item.dataItem.category = newCategory;
            }
        });

        return items.length > 0;
    }

    function getFileManager() {
        return $("#file_manager").dxFileManager("instance");
    }
</script>

<script src="~/Scripts/data/fileSystem.js"></script>

using DevExtreme.MVC.Demos.Models.FileManagement;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class FileManagerController : Controller {

        public ActionResult UICustomization() {
            return View();
        }

    }
}

var fileSystem = [
    {
        name: "Documents",
        isDirectory: true,
        category: "Work",
        items: [
            {
                name: "Projects",
                isDirectory: true,
                category: "Work",
                items: [
                    {
                        name: "About.rtf",
                        isDirectory: false,
                        size: 1024
                    },
                    {
                        name: "Passwords.rtf",
                        isDirectory: false,
                        category: "Important",
                        size: 2048
                    }
                ]
            },
            {
                name: "About.xml",
                isDirectory: false,
                size: 1024
            },
            {
                name: "Managers.rtf",
                isDirectory: false,
                size: 2048
            },
            {
                name: "ToDo.txt",
                isDirectory: false,
                size: 3072
            }
        ],
    },
    {
        name: "Images",
        isDirectory: true,
        category: "Home",
        items: [
            {
                name: "logo.png",
                isDirectory: false,
                size: 20480
            },
            {
                name: "banner.gif",
                isDirectory: false,
                size: 10240
            }
        ]
    },
    {
        name: "System",
        isDirectory: true,
        category: "Important",
        items: [
            {
                name: "Employees.txt",
                isDirectory: false,
                category: "Important",
                size: 3072
            },
            {
                name: "PasswordList.txt",
                isDirectory: false,
                category: "Important",
                size: 5120
            }
        ]
    },
    {
        name: "Description.rtf",
        isDirectory: false,
        size: 1024
    },
    {
        name: "Description.txt",
        isDirectory: false,
        size: 2048
    }
];