Home
PERENDERnew
Theme
Form
Basic components
PDF viewer
chartsnew
Installation
line
File browser
Rich text
Home
File browser
FileExplorer
FileExplorer

1. Demo AstrolFileExplorer

Note
In this example, notifications, buttons, and the file upload component are implemented, so it is recommended to refer to the respective documentation.

Install the Astrol.Component.FileExplorer package from the AstrolUI NuGet or reference the project in your solution.
Add the NuGet AstrolUi repository in the NuGet Package Manager settings of your Visual Studio.
Source: https://nuget.astrolui.com/v3/index.json (Refer to documentation on how to configure package sources in Visual Studio)

Home
  • Project
  • Downloads
Project
Downloads

Selected item:

Route:
Father:
Item: 
@using Astrol.Component.Basic.Button
@using Astrol.Component.Basic.UploadFile
@using Astrol.Component.FileExplorer.Explorer
@using Astrol.Entities.Basic.UI.FileExplorer
@using Astrol.Entities.Basic.Static.Notification
@using Astrol.Entities.Basic.UI
@using Astrol.JSInterop.Base
@inject AstrolJSInterop jsI
 
<AstrolFileExplorer @ref="@_fileExplorer"
 TItem="FileItem"
 DataList="items"
 PropertyChildrenList="@nameof(FileItem.Children)"
 PropertyId="@nameof(FileItem.Id)"
 PropertyShow="@nameof(FileItem.Text)"
 PropertyIsFolder="@nameof(FileItem.IsFolder)"
 Height="450px"
 TextHome="Home"
 Selected="Selected">
 <Options>
 @{
 bool statusRenameOrDelete = itemSelected != null && itemSelected.ItemSelected != null ? true : false;
 bool statusDowload = itemSelected != null && itemSelected.ItemSelected != null && !itemSelected.ItemSelected.IsFolder ? true : false;
 }
 <AstrolUploadFile Status="@_statusUpload" OnClose="ChangeStatus" Save="UploadFile"/>
 <AstrolUploadFile Status="@_statusUpload"
 Save="UploadFile"
 OnClose="ChangeStatus"
 Title="Upload file"
 TextClose="Close"
 TextSave="Save"
 TextFileName="File"
 TextFileSize="Size"
 TextBrowse="Find, copy or drag and drop your file here."
 TextErrorMaximumNumberFilesAccepted="Maximum number of files exceeded."
 TextErrorWrongFileExtension="Incorrect file extension."
 TextErrorFileTooBig="File too large." />
 <AstrolButton OnClick="AddFolder" Text="New folder" Style="AstrolStyle.Black" Icon="astrol-plus-outline" />
 <AstrolButton OnClick="_=>ChangeStatus(true)" Text="Upload" Style="AstrolStyle.White" Icon="astrol-up-outline" />
 <AstrolButton OnClick="Action" Status="@statusRenameOrDelete" Text="Rename" Style="AstrolStyle.White" Icon="astrol-text-width" />
 <AstrolButton OnClick="Action" Status="@statusDowload" Text="Dowload" Style="AstrolStyle.White" Icon="astrol-down-outline" />
 <AstrolButton OnClick="Action" Status="@statusRenameOrDelete" Text="Delete" Style="AstrolStyle.White" Icon="astrol-trash" />
 </Options>
</AstrolFileExplorer>
@code {
 private bool _statusUpload = false;
 private AstrolFileExplorer<FileItem>? _fileExplorer;
 private FileExploredSelected<FileItem>? itemSelected;
 private async Task Selected(FileExploredSelected<FileItem> item) {
 itemSelected = item;
 }
 private void ChangeStatus(bool newStatus) {
 _statusUpload = newStatus;
 }
 private async Task UploadFile(List<IBrowserFile> files) {
 ChangeStatus(false);
 await Action();
 }
 private void AddFolder() {
 items.Add(new FileItem {
 Text = "New folder",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem { Text = "Example", IsFolder = true, },
 new FileItem { Text = "video.mkv", },
 new FileItem { Text = "note.txt", },
 new FileItem { Text = "sound.mp3", },
 },
 });
 if (_fileExplorer != null) {
 _fileExplorer.DataList = items;
 _fileExplorer?.Refresh();
 }
 }
 private async Task Action() {
 await jsI.Notification($"Implementation, customized based on need.".NotificationInfo());
 }
 private List<FileItem> items = new List<FileItem> {
 new FileItem {
 Text = "Project",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem {
 Text = "Design",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem {
 Text = "Photos",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem { Text = "logo.jpg", },
 new FileItem { Text = "front page.png", },
 },
 },
 new FileItem { Text = "site.psd", },
 },
 },
 new FileItem {
 Text = "Implementation",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem{ Text = "script.js", },
 new FileItem { Text = "index.html", },
 new FileItem { Text = "styles.css", },
 },
 },
 },
 },
 new FileItem {
 Text = "Downloads",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem {
 Text = "January",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem {
 Text = "Photos",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem{ Text = "1.jpg", },
 new FileItem{ Text = "2.png", },
 new FileItem{ Text = "2.gif", },
 }
 },
 new FileItem { Text = "Videos", IsFolder = true,},
 new FileItem { Text = "Documents", IsFolder = true,},
 },
 },
 new FileItem {
 Text = "February",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem { Text = "Photos", IsFolder = true,},
 new FileItem { Text = "Videos", IsFolder = true,},
 new FileItem {
 Text = "Documents",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem{ Text = "Presentation.ppt", },
 new FileItem{ Text = "Calculation.xlsx", },
 }
 },
 },
 },
 },
 },
 };
 public class FileItem {
 public string Id { get; set; } = Guid.NewGuid().ToString();
 public string Text { get; set; }
 public bool IsFolder { get; set; }
 public List<FileItem> Children { get; set; }
 }
}

Supported parameters

  • TItem (object), the represented object.
  • PropertyShow (string), property of the TItem object to display.
  • PropertyId (string), property of the TItem object containing a unique identifier throughout the collection.
  • PropertyIsFolder (string), property of the TItem object specifying through a bool whether the element is a folder or a file.
  • PropertyChildrenList (string), property of the TItem object containing the list of children.
  • DataList (List<TItem>), the total list of TItem objects to represent.
  • Height (string), the height of the component.
  • TextHome (string), text to display as the root in the component's navigation (default is "Inicio").
  • Selected (EventCallback<FileExploredSelected<TItem>>), response after navigating or selecting an item in the component.
  • Options (RenderFragment), space to implement actions based on the specific needs of each implementation.
    • The FileExploredSelected<TItem> object contains:
      • Route (string) current navigation route
      • Parent (TItem) parent of the current position
      • ItemSelected (TItem) selected element

Public methods

  • Refresh: Allows refreshing the component without altering its current state using <AstrolFileExplorer @ref="_fileExplorer" ... />. Declare _fileExplorer within @code { private TreeItem<TItem>? _fileExplorer; }. It is advisable, before invoking the _fileExplorer.Refresh() method, to also assign the updated data list with _fileExplorer.DataList = updateList;.
© 2025 AstrolUI v8.0.4
Se ha producido un error no controlado. Recargar 🗙