Custom Thumbnails
The FileManager widget allows you to provide custom thumbnails. Handle the customizeThumbnail event to specify how the widget presents files in folders.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(function () {
$("#file-manager").dxFileManager({
name: "fileManager",
fileProvider: fileSystem,
itemView: {
mode: "thumbnails"
},
height: 450,
permissions: {
create: true,
copy: true,
move: true,
remove: true,
rename: true
},
customizeThumbnail: function (fileManagerItem) {
if (fileManagerItem.isDirectory)
return "../../../../images/thumbnails/folder.svg";
var fileExtension = fileManagerItem.getExtension();
switch (fileExtension) {
case ".txt":
return "../../../../images/thumbnails/doc-txt.svg";
break;
case ".rtf":
return "../../../../images/thumbnails/doc-rtf.svg";
break;
case ".xml":
return "../../../../images/thumbnails/doc-xml.svg";
break;
}
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.light.css" />
<link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.android5.light.css" />
<link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.ios7.default.css" />
<link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.win10.black.css" />
<link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.win10.white.css" />
<script src="https://cdn3.devexpress.com/jslib/19.1.3/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="data.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="file-manager"></div>
</div>
</body>
</html>
.dx-filemanager-details-item-thumbnail {
height: 18px;
width: 18px;
}
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
}
],
},
{
name: "Images",
isDirectory: true,
items: [
{
name: "logo.png",
isDirectory: false,
size: 20480
},
{
name: "banner.gif",
isDirectory: false,
size: 10240
}
]
},
{
name: "System",
isDirectory: true,
items: [
{
name: "Employees.txt",
isDirectory: false,
size: 3072
},
{
name: "PasswordList.txt",
isDirectory: false,
size: 5120
}
]
},
{
name: "Description.rtf",
isDirectory: false,
size: 1024
},
{
name: "Description.txt",
isDirectory: false,
size: 2048
}
];