Inicio
PERENDERnew
Tema
Form
Componentes básicos
Visor de PDF
chartsnew
Instalación
line
Explorador de archivos
Texto enriquecido
Inicio
Explorador de archivos
FileExplorer
FileExplorer

1. Demo AstrolFileExplorer

Nota
En este ejemplo se implementan notificaciones, botones y el componente para carga de archivos, por lo que se recomienda ver las documentaciones correspondientes.
El componente AstrolFileExplorer brinda una lógica similar a un explorador de archivos en cuanto a como se muestra y su navegación. Es responsabilidad del usuario implementar dentro de las opciones la lógica o cada botón que necesite en su proyecto.
Home
  • Project
  • Downloads
Project
Downloads

Elemento seleccionado:

Ruta:
Padre:
Elemento: 
@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; }
 }
}

Parámetros que admite

  • TItem (objeto), objeto que se representa.
  • PropertyShow (string), propiedad del objeto TItem a mostrar.
  • PropertyId (string), propiedad del objeto TItem que contiene un identificador único en toda la colección.
  • PropertyIsFolder (string), propiedad del objeto TItem que especifica mediante un bool si el elemento es una carpeta o un fichero.
  • PropertyChildrenList (string), propiedad del objeto TItem que contiene la lista de hijos.
  • DataList (List<TItem>), lista total de objetos TItem a representar.
  • Height (string), altura del componente.
  • TextHome (string), texto a mostrar como raíz en la navegación del componente (por defecto es Inicio).
  • Selected (EventCallback<FileExploredSelected<TItem>>), respuesta tras acción de navegación o selección de un elemento en el componente.
  • Options (RenderFragment), espacio para que se implemente las acciones en base a la necesidad específica de cada implementación.
    • El objeto FileExploredSelected<TItem> contiene:
      • Route (string) ruta de navegación actual
      • Parent (TItem) padre de la posición actual
      • ItemSelected (TItem) elemento seleccionado

Métodos públicos

  • Refresh, perimite mediante <AstrolFileExplorer @ref="_fileExplorer" ... /> refrescar el componente sin alterar el estado actual del mismo, declare _fileExplorer dentro de @code { private TreeItem<TItem>? _fileExplorer; }. Es recomendable antes de invocar al método _fileExplorer.Refresh() asignar de igual modo la lista de datos actualizada _fileExplorer.DataList = updateList;.
© 2025 AstrolUI v8.0.4
Se ha producido un error no controlado. Recargar 🗙