File Manager breadcrumbs navigate to home

0 Answers 91 Views
Breadcrumb FileManager
Anna
Top achievements
Rank 1
Iron
Iron
Iron
Anna asked on 12 Apr 2022, 09:04 PM

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");
	}
	
}

Martin
Telerik team
commented on 15 Apr 2022, 01:43 PM

Hi. Could you please try to reproduce the issue in this Dojo example
Anna
Top achievements
Rank 1
Iron
Iron
Iron
commented on 18 Apr 2022, 08:25 PM | edited

I was unable to reproduce the issue. If I could figure out how the breadcrumb operates and what data it relies on I feel like I could solve the issue.
Martin
Telerik team
commented on 21 Apr 2022, 01:25 PM

If you wish to take a look at the kendo.filemanager.js source code, you can check the _buildBreadcrumbPath function which is called when the navigate event occurs. I hope that would be helpful.
Anna
Top achievements
Rank 1
Iron
Iron
Iron
commented on 21 Apr 2022, 01:49 PM

Will do, thanks!

No answers yet. Maybe you can help?

Tags
Breadcrumb FileManager
Asked by
Anna
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or