File Upload / File Management ▸ Custom Thumbnails

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(new JS("fileSystem"))
    .ItemView(view => view.Mode(FileManagerItemViewMode.Thumbnails))
    .CustomizeThumbnail(@<text>
        function(fileManagerItem) {
            if(fileManagerItem.isDirectory)
                return '@Url.Content("~/Content/images/thumbnails/folder.svg")';

            var fileExtension = fileManagerItem.getFileExtension();
            if(fileExtension === ".txt")
                return '@Url.Content("~/Content/images/thumbnails/doc-txt.svg")';
            if(fileExtension === ".rtf")
                return '@Url.Content("~/Content/images/thumbnails/doc-rtf.svg")';
            if(fileExtension === ".xml")
                return '@Url.Content("~/Content/images/thumbnails/doc-xml.svg")';

            return null;
        }
    </text>)
    .Permissions(permissions => permissions
        .Create(true)
        .Copy(true)
        .Move(true)
        .Delete(true)
        .Rename(true)
        .Upload(true)
        .Download(true))
    .Height(450))

<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 CustomThumbnails() {
            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
    }
];