UploadFile

1. Demo AstrolUploadFile

Nota
En este ejemplo se implementan notificaciones y botones, por lo que se recomienda ver las documentaciones correspondientes.
El componente AstrolUploadFile brinda la lógica para buscar ficheros en el explorador, copiar y pegar así como arrastrar y soltar un archivos en el área definida. De igual modo permite eliminar los archivos cargados antes de ser guardados.

@using Astrol.Component.Basic.Button

@using Astrol.Component.Basic.UploadFile

@using Astrol.Entities.Basic.Static.Notification

@using Astrol.Entities.Basic.UI

@using Astrol.JSInterop.Base

@inject AstrolJSInterop jsI

<AstrolButton OnClick="_=>ChangeStatus(true)"

 Icon="astrol-upload-cloud"

 Text="Upload file"

 Style="AstrolStyle.Blue" />

<AstrolUploadFile Status="@_statusUpload"

 SupportedExtensions="@(new List<string> {".jpg",".png",".pdf",".xlsx"})"

 Save="SaveFile"

 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." />

@code {

 private bool _statusUpload = false;

 private async Task SaveFile(List<IBrowserFile> files) {

 ChangeStatus(false);

 await jsI.Notification($"Attaching {files.Count} file.".NotificationSucces("astrol-upload-cloud", false));

 private void ChangeStatus(bool newStatus) {

 _statusUpload = newStatus;

Parámetros que admite

Status (bool), define la visibilidad del componente.
Drogable (bool), define si el componente se puede desplazar por la ventana, (por defecto es true).
Resizable (bool), define si se puede modificar el tamaño del componente, (por defecto es false).
MultipleFile (bool), define si se pueden cargar múltiples archivos, (por defecto es true).
MaxNumberOfFiles (int), cantidad máxima de archivos a cargar (por defecto es de 10 archivos).
MaxFileSize (long), tamaño máximo en MB por archivo, (por defecto es de 5 MB).
TypeStorage (TypeStorage), defina la unidad de medida del almacenamiento, (por defecto es TypeStorage.Megabyte).
- Byte (enum)
- Kilobyte (enum)
- Megabyte (enum)
- Gigabyte (enum)
- Terabyte (enum)
- Petabyte (enum)
SupportedExtensions (List<string>), extensiones de archivo permitidas, si no se especifica nada, admite todo tipo de archivos).
OnClose (EventCallback<bool>), evento que se detona cuando se cerrar el componente.
Save (EventCallback<List<IBrowserFile>>), evento que se detona cuando se guardan los archivos.
Title (string), título del componente, (por defecto es "Subir archivo").
TextClose (string), título del componente, (por defecto es "Cerrar").
TextSave (string), título del componente, (por defecto es "Guardar").
TextFileName (string), título del componente, (por defecto es "Archivo").
TextFileSize (string), título del componente, (por defecto es "Tamaño").
TextBrowse (string), título del componente, (por defecto es "Busque, copie o arrastre y suelte su archivo aquí.").
TextErrorMaximumNumberFilesAccepted (string), título del componente, (por defecto es "Número máximo de archivos superado.").
TextErrorWrongFileExtension (string), título del componente, (por defecto es "Extensión de archivo incorrecta.").
TextErrorFileTooBig (string), título del componente, por defecto es "Archivo demasiado grande.").

2. Demo AstrolUploadFileEmbedded

Find, copy or drag and drop your file here.

@using Astrol.Component.Basic.UploadFile

@using Astrol.Entities.Basic.Static.Notification

@using Astrol.Entities.Basic.Enums

@using Astrol.Entities.Basic.UI

@using Astrol.JSInterop.Base

@inject AstrolJSInterop jsI

<AstrolUploadFileEmbedded MaxFileSize="5"

 TypeStorage="TypeStorage.Megabyte"

 MaxNumberOfFiles="10"

 MultipleFile="true"

 SupportedExtensions="@(new List<string> {".jpg",".png",".pdf",".xlsx"})"

 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."

 OnChange="OnChange" />

@code {

 private async Task OnChange(List<IBrowserFile> files) {

 await jsI.Notification($"Attaching {files.Count} file.".NotificationSucces("astrol-upload-cloud", false));