How to set the directory path to display of the File Manager
I've read through the docs, but I've been unable to find an example of how to set the Path to specify which folder I want to display in the FileManager component.
I need to be able to specify the path like this-
<SfFileManager TValue="FileManagerDirectoryContent" Path="/5e17e1cc0a7707257427dc2f">
<FileManagerAjaxSettings Url="/api/MFS/FileOperations">
</FileManagerAjaxSettings>
</SfFileManager>
And then to have that path passed to the Controller, where I can then use it to query my Provider.
In the Controller, I can see;
[Route("FileOperations")]
public object FileOperations([FromBody] FileManagerDirectoryContent args)
{
switch (args.Action)
{
// Add your custom action here
case "read":
// Path - Current path;
return this.operation.GetFiles(args.Path, args.ShowHiddenItems);However-
args.Path
Always returns "/" without my directory information?
In the Blazor component template code am I meant to specify the directory in some othe
|
<SfFileManager TValue="FileManagerDirectoryContent" Path="/Pictures/">
<FileManagerAjaxSettings Url="/api/SampleData/FileOperations"
UploadUrl="/api/SampleData/Upload"
DownloadUrl="/api/SampleData/Download"
GetImageUrl="/api/SampleData/GetImage">
</FileManagerAjaxSettings>
</SfFileManager> |
|
[Route("api/[controller]")]
public class FileManagerController : Controller
{
public PhysicalFileProvider operation;
public string basePath = "D:\\Documents\\Files"; // Specify the absolute path where files and folders are available.
public FileManagerController(IHostingEnvironment hostingEnvironment)
{
this.operation = new PhysicalFileProvider();
this.operation.RootFolder(this.basePath);
}
[Route("FileOperations")]
public object FileOperations([FromBody] FileManagerDirectoryContent args)
{
//You can construct the complete path like below.
var fullPath = this.basePath.Replace('\\', '/') + args.Path;
if (args.Action == "delete" || args.Action == "rename")
{ |
Hi Indhumathy,
Thanks for your reply.
But what if in the following case, here are the elements:
- Root path is D:\Documents\Files
This root path contains subfolders like these:
- SubFolder1
- SubFolder2
- SubFolder3
Now I don't want user to access to Root path, but instead ONLY to one of the sub paths mentionned before, but directly, and without seeing other SubFolder1, 2 or 3
How to set dynamically the real and only one target ?
Imagine I am User1 and I am connecting to the file manager and I want to access to D:\Documents\Files\SubFolder1 without seeing rooth path nor SubFolder2 and SubFolder3, is it actually possible please?
Thanks for any help
|
<div class="control-section">
<SfFileManager ID="file-manager" TValue="FileManagerDirectoryContent" View="ViewType.Details" CssClass="filemanager" Path="@path">
...
</SfFileManager>
</div>
@code{
public string path { get; set; }
public string user = "user1";
protected override void OnInitialized()
{
base.OnInitialized();
if (user == "user1")
{
path = "/Subfolder1/";
}}}
<style>
/*Style to hide the root folder from navigation pane*/
.filemanager .e-treeview .e-list-item.e-level-1 > .e-text-content {
display: none;
}
/*Style to hide the root folder from breadcrumb*/
.filemanager .e-address .e-address-list-item:nth-child(1) {
display: none;
}
/*Style to hide the icon from breadcrumb*/
.filemanager .e-address .e-address-list-item:nth-child(2) .e-icons {
display: none;
}
/*Style to hide all other child folders except Subfolder1*/
ul li:nth-of-type(1n+2) {
display: none;
} |
Hi Indhumathy,
Thanks for your reply!
The real purpose was to give a unique folder access as you well guessed, depending on @path parameter given
This does the trick but there is a strange side effect with CSS : all menus (copy/paste...) have disapeared in the sample you've provided, is it normal?
Regards,
Thanks
|
/*Style to hide all other child folders except Subfolder1*/
ul.e-list-parent.e-ul li:nth-of-type(1n+2) {
display: none;
} |
Hello Indhumathy,
Thanks for your reply!
It works as expected :)
I just have to block 'delete' capacity from the 'folder' (left side) of the filemanager, else I can delete SubFolder1 then suddenly SubFolder2 arrives, but it seems logical from the CSS side :)
Regards
Hi Indhumathy ,
There is another bad side effect with the CSS when I create sub folders, I can create as many as I want, but only the 1st one is accessible and presented, as you can see onto the picture below:
Rega
|
/*Style to hide all other child folders except Subfolder1*/
ul.e-list-parent.e-ul .e-level-2:nth-of-type(1n+2) {
display: none;
} |
Thanks Indhumathy,
No actually my situation ( described in the original post ) is different. There is no physical file system, no physical directory structure, no hierarchy.
My file information is coming from a database, which might have thousands of virtual directories. My purpose here is to "attach" files to a database entry, and the "directory" is identified by a unique ID.
In a given Blazor page, when I need to show the files in that folder, I need to pass the folder ID to the SfFileManager, so that it can request that directory from the Provider.
How do I do that?
In the original example I gave at the start of this thread, you can see that I'm trying to pass my required folder ID as the Path, however that information is not coming through to the Provider.
<SfFileManager TValue="FileManagerDirectoryContent" Path="/5e17e1cc0a7707257427dc2f">
<FileManagerAjaxSettings Url="/api/MFS/FileOperations">
</FileManagerAjaxSettings>
</SfFileManager>
The important thing to understand is that there is no root directory at all. In fact in my current implementation there are no subdirectories either. Just database-defined folders containing files.
How do I specify my Folder ID to the SfFileManager so that it will include it in the request to the Provider?
- 10 Replies
- 3 Participants
-
MW Michael Wells
- Oct 7, 2021 08:51 PM UTC
- Oct 18, 2021 12:05 PM UTC
