HI,
I am using Kendo jQuery.
FileManager is not showing the folder names , instead it is showing as "undefined".
Version :
<!-- Kendo UI -->
<script src="~/lib/kendo-ui-2023.3.1010/js/kendo.all.min.js"></script>
<script src="~/js/kendo-ui-license.js" type="text/javascript"></script>
Visual Studio C# backend response
c# Code :
public virtual JsonResult OnPostFileManagerRead(string target)
{
try
{
........
........
var files = directoryBrowser.GetFiles(path, Filter);
var directories = directoryBrowser.GetDirectories(path);
var result = files.Concat(directories).Select(f => new
{
Name = f.Name,
Size = f.Size,
Path = VirtualizePathString(f.Path),
Extension = f.Extension,
IsDirectory = f.IsDirectory,
HasDirectories = f.HasDirectories,
Created = f.Created,
CreatedUtc = f.CreatedUtc,
Modified = f.Modified,
ModifiedUtc = f.ModifiedUtc
});
return new JsonResult(result.ToArray());
}
catch (DirectoryNotFoundException)
{
throw new Exception("File Not Found");
}
}
throw new Exception("Forbidden");
}
catch(Exception ex)
{
return new JsonResult(ex);
}
}
Query :
1. What might be the issue ?
2. How can i resolve this issue ?
Hi,
There is an existing issue with File Manger pagination in List Mode (Grid Mode works fine).
The issue is that the paginator does not get updated with total count of items in the folder just opened/expanded. The count remains the same as first/home page.
E.g. On home page of file manager, I have 5 items ( 3 folders, 2 files)... so pager widget reads "1 - 5 of 5 items".
Once I click on a folder (one of the 5 items), it opens to show 50 (of 25000) files. However, the paginator widget stays at "1 -5 of 5 items". Thus leaving the user screwed because there are no pager links to get to next page of items as it thinks it has only 5 items in view when there are actually 50 in view, and it thinks total items are 5 instead of 25,000.
If I switch to Grid mode, it all works perfectly. Both my list and grid views are configured exactly the same.
,
views: {
list: {
pageable: {
alwaysVisible: true,
pageSizes: [10, 20, 50, 100, 200, 300, 500, 1000]
},
pageable: true,
selectable: "single" //allows only single selection int the ListView
},
grid: {
pageable: {
alwaysVisible: true,
pageSizes: [10, 20, 50, 100, 200, 300, 500, 1000]
},
pageable: true,
selectable: "single" //allows only single selection int the ListView
}
So an obvious bug...but when will there be a fix? Or a workaround? Currently I am working on rolling my own here. I have to trap the "open" event (double click)...and the reset the datasource with the correct items for the folder clicked on, and update the datasurce totals...then it works fine...but i have lost context of parent folders by resetting the data source with items at folder level.
The way it is currently, list mode is useless in FileManager...unless your sub folders have less items than your root folder.
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?
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'