Hi Team,
I am using file manager and I wanted to sort tree view elements in file manager based on some custom logic. Now by default it is sorting based on name. Is there any way to implement custom sorting?
How do I restrict the files I'm about to upload by Size and Type?
Ideally, that shall be done on the client side. Please provide a clear snippet.
I am having an issue with the breadcrumb feature in the File Manager widget. No matter which breadcrumb link I click, it always takes me to the home directory. When I inspect the link, href is set to "#" for all of them. I'm not sure what I'm missing to make this work correctly. I've included my javascript, controller, and view. If other code is needed I can provide it. Thanks in advance for any help!
Javascript:
function loadFileManager() {
$("#fileManager").kendoFileManager({
draggable: false,
resizable: true,
dataSource: {
transport: {
read: {
url: $('#urlHolders').data('readFilesUrl'),
method: "POST"
},
create: {
url: $('#urlHolders').data('createFileUrl'),
method: "POST"
},
update: {
url: $('#urlHolders').data('updateFileUrl'),
method: "POST"
},
destroy: {
url: $('#urlHolders').data('destroyFileUrl'),
method: "POST"
}
}
},
uploadUrl: $('#urlHolders').data('uploadFileUrl'),
toolbar: {
items: [
{ name: "upload" },
{ name: "sortDirection" },
{ name: "sortField" },
{ name: "changeView" },
{ name: "spacer" },
{ name: "details" },
{ name: "search" }
]
},
contextMenu: {
items: [
{ name: "rename" },
{ name: "delete" },
{ name: "download", text: "Download", command: "DownloadCommand", spriteCssClass: "k-icon k-i-download" }
],
open: function (e) {
//Executes when an item is right-clicked, before the context menu opens
//We only want context menu actions to be available for files, not folders. So we intercept that here
//Check whether the clicked item was a treeview item (folder)
var isTreeviewItem = $(e.target).hasClass('k-treeview-item');
//Check the clicked item for the folder icon class
var isFolder = e.target.querySelector('.k-i-folder') != null;
//if the clicked item a folder, do not open the context menu
if (isTreeviewItem || isFolder) {
e.preventDefault();
}
}
}
});
var fileManager = $("#fileManager").getKendoFileManager();
fileManager.executeCommand({ command: "TogglePaneCommand", options: { type: "preview" } });
fileManager.toolbar.fileManagerDetailsToggle.switchInstance.toggle();
var filemanagerNS = kendo.ui.filemanager;
filemanagerNS.commands.DownloadCommand = filemanagerNS.FileManagerCommand.extend({
exec: function () {
var that = this,
filemanager = that.filemanager, // get the kendo.ui.FileManager instance
options = that.options, // get the options passed through the tool
target = options.target // options.target is available only when command is executed from the context menu
selectedFiles = filemanager.getSelected(); // get the selected files
window.location = '/FileManager/Download?path=' + selectedFiles[0].path;
}
});
}
View:
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">File Manager</h1>
</div>
<div id="fileManagerContainer" class="wrapper">
<div id="fileManagerContent">
<div id="fileManager" class="rounded"></div>
</div>
</div>
@section scripts {
<script type="text/javascript">
$(function () {
loadFileManager();
});
</script>
}
Controller:
public class HomeController
{
private readonly FileContentBrowser directoryBrowser;
private const string contentFolderRoot = @"C:\Users\anna\Desktop\FileManagerContent";
public HomeController(IPatientListService patientListService)
{
directoryBrowser = new FileContentBrowser(patientListService); // Helper utility for the FileManager controller
}
public ActionResult Index()
{
_auditService.LogEvent(new AuditEventModel
{
EventDef = EventDefinitions.PageOpened,
EventItemName = AuditHelper.PageOpenedEventItemName(this.ControllerContext.RouteData)
});
return View("Index");
}
#region File Manager
/// <summary>
/// Gets the valid file extensions by which served files will be filtered.
/// </summary>
public string Filter
{
get
{
return "*.*";
}
}
public JsonResult Read(string target)
{
var path = (string.IsNullOrWhiteSpace(target)) ? contentFolderRoot : target;
int userId = User.Identity.GetUserId();
try
{
directoryBrowser.Server = Server;
var result = directoryBrowser.GetFiles(path, Filter).Concat(directoryBrowser.GetDirectories(path, userId));
return Json(result, JsonRequestBehavior.AllowGet);
}
catch (DirectoryNotFoundException)
{
throw new HttpException(404, "File Not Found");
}
throw new HttpException(403, "Forbidden");
}
/// <summary>
/// Updates an entry with a given entry.
/// </summary>
/// <param name="target">The path to the parent folder in which the folder should be created.</param>
/// <param name="entry">The entry.</param>
/// <returns>An empty <see cref="ContentResult"/>.</returns>
/// <exception cref="HttpException">Forbidden</exception>
public ActionResult Update(string target, FileManagerEntry entry)
{
FileManagerEntry newEntry;
newEntry = RenameEntry(entry);
return Json(newEntry);
}
public FileManagerEntry RenameEntry(FileManagerEntry entry)
{
var path = entry.Path;
var physicalTarget = EnsureUniqueName(Path.GetDirectoryName(path), entry);
FileManagerEntry newEntry;
var file = new FileInfo(path);
System.IO.File.Move(file.FullName, physicalTarget);
newEntry = directoryBrowser.GetFile(physicalTarget);
return newEntry;
}
public string EnsureUniqueName(string target, FileManagerEntry entry)
{
//Remove any extra file extensions that the user may have typed
while (entry.Name.EndsWith(entry.Extension))
{
entry.Name = entry.Name.Remove(entry.Name.Length - entry.Extension.Length);
}
var fileName = entry.Name + entry.Extension;
int sequence = 0;
var physicalTarget = Path.Combine(target, fileName);
//If the file name already exists, tack on a sequence #
while (System.IO.File.Exists(physicalTarget))
{
fileName = entry.Name + String.Format("({0})", ++sequence) + entry.Extension;
physicalTarget = Path.Combine(target, fileName);
}
return physicalTarget;
}
[HttpGet]
public FileResult Download(string path)
{
FileInfo file = new FileInfo(path);
System.Net.Mime.ContentDisposition cd = new System.Net.Mime.ContentDisposition
{
FileName = file.Name,
Inline = false
};
Response.Headers.Add("Content-Disposition", cd.ToString());
Response.Headers.Add("X-Content-Type-Options", "nosniff");
string contentType = MimeMapping.GetMimeMapping(file.Name);
var readStream = System.IO.File.ReadAllBytes(path);
return File(readStream, contentType);
}
public ActionResult Destroy(FileManagerEntry entry)
{
var path = entry.Path;
if (!string.IsNullOrEmpty(path))
{
DeleteFile(path);
return Json(new object[0]);
}
throw new HttpException(404, "File Not Found");
}
public void DeleteFile(string path)
{
if (System.IO.File.Exists(path))
{
System.IO.File.Delete(path);
}
}
/// <summary>
/// Uploads a file to a given path.
/// </summary>
/// <param name="path">The path to which the file should be uploaded.</param>
/// <param name="file">The file which should be uploaded.</param>
/// <returns>A <see cref="JsonResult"/> containing the uploaded file's size and name.</returns>
/// <exception cref="HttpException">Forbidden</exception>
[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult Upload(string path, HttpPostedFileBase file)
{
var fileName = Path.GetFileName(file.FileName);
if (true)
{
file.SaveAs(Path.Combine(path, fileName));
return Json(new
{
size = file.ContentLength,
name = fileName,
type = "f"
}, "text/plain");
}
throw new HttpException(403, "Forbidden");
}
}
I was configuration a directory in a directory by used File Manager.
After that whenever click the sub directory, parent directory move to left (created 'k-treeview-toggle').
What's that?
DEMO: multiple click the 'folder2'
I have been working on the FileManager control with Kendo using jQuery & it feels very slow in initial loading when the file count increases to 5000+. I tried searching for custom paging, lazy loading, etc. for FileManager but no help. Do anyone knows how to achieve it? Any help will be highly appreciated.
Thanks.
Hi Telerik Team,
I'm testing with ~2k images with FileManager. Setted pageable and pageSize to File Manager's data source, grid and list view config. In grid view mode, pagination working well, but in listview mode, there're no pagination bar shown. Tried with outside pager but it not help.
Please advise.
Hi
I am using FileManager Jquery component that get the list of the files from an external rest api (json format) but the response object does not follow the default kendo.data.schemas.filemanager.
for example, rest api give file name field as "fileName" instead of "name".
Please let me know if there is a standard way to do this mapping.
Thanks
I copied the demonstration code and controller ( from GitHub) and slightly modified to suit.
The view is very simple
<body>
<div id="example">
<div id="filemanager"></div>
<script>
$("#filemanager").kendoFileManager({
dataSource: {
schema: kendo.data.schemas.filemanager,
transport: {
read: {
url: '@Url.Action("Read", "FileManager")',
method: "POST"
}
}
},
toolbar: {
items: [
{ name: "createFolder" },
{ name: "upload" },
{ name: "sortDirection" },
{ name: "sortField" },
{ name: "changeView" },
{ name: "spacer" },
{ name: "details" },
{ name: "search" }
]
},
contextMenu: {
items: [
{ name: "rename" },
{ name: "delete" }
]
},
draggable: true,
resizable: true
});
$(document).ready(function () {
var filemanager = $("#filemanager").getKendoFileManager();
filemanager.executeCommand({ command: "TogglePaneCommand", options: { type: "preview" } });
filemanager.toolbar.fileManagerDetailsToggle.switchInstance.toggle();
})
</script>
</div>
</body>
</html>
The Data returned from the controller is this ( copy and paste from the browser)
[{"name":"English","size":0,"path":"English","extension":"","isDirectory":true,"hasDirectories":false,"created":"\/Date(1638409250788)\/","createdUtc":"\/Date(1638409250788)\/","modified":"\/Date(1638834574019)\/","modifiedUtc":"\/Date(1638834574019)\/"},{"name":"Swedish","size":0,"path":"Swedish","extension":"","isDirectory":true,"hasDirectories":false,"created":"\/Date(1638409251098)\/","createdUtc":"\/Date(1638409251098)\/","modified":"\/Date(1638501536659)\/","modifiedUtc":"\/Date(1638501536659)\/"}]
I have tried viewing a folder with lots of file.. the number of File is always right.. but something is going wrong with the reading of the data being returned The initial controller code I used set path as a path and filename. I changed it to above to match what I can see returning for the examples provided.
So now I believe the JSON being returned from the online samples that are using the same backend are identical to what I am returning.
I am using 2021.1.330. The only thing I can think of is that there was a change in the Schema between versions? But I cannot find anything about this
I haven't got much hair left these days... would really appreciate a pointer to at least what I could be checking.
Many thanks
Rob
Hi all,
Is it possible to disable en hide the treeview in filemanger?
Greetings Maxime
Hi,
We are trying to integrate FileManager component into our WEBUI solution.
We are using non JAX-RS Java back-end implementation.
Our “root” folder on the back-end side contains thousands of items (files and folders), so the “local” data source definition does not fits our needs.
I would like to know if it is possible to define “Read” HTTP Request body on the following Remote data source definition
dataSource: {
pageSize: 7,
schema: kendo.data.schemas.filemanager,
transport: {
read: {
url: "/kendo-ui/service/FileManager/Read",
method: "POST"
},
You are more than welcome to advise any other solution.
Regards,
Oleg