UploadFile

1. Demo AstrolUploadFile

Note

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

The AstrolUploadFile component provides the logic for browsing files in the explorer, copying and pasting, as well as dragging and dropping files into the defined area. It also allows for deleting uploaded files before they are saved.

@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;

Supported parameters

Status (bool), defines the visibility of the component.
Draggable (bool), defines whether the component can be moved around the window (default is true).
Resizable (bool), defines whether the size of the component can be modified (default is false).
MultipleFile (bool), defines whether multiple files can be uploaded (default is true).
MaxNumberOfFiles (int), maximum number of files to upload (default is 10 files).
MaxFileSize (long), maximum size per file in MB (default is 5 MB).
TypeStorage (TypeStorage), define the storage measurement unit, (default is TypeStorage.Megabyte).
- Byte (enum)
- Kilobyte (enum)
- Megabyte (enum)
- Gigabyte (enum)
- Terabyte (enum)
- Petabyte (enum)
SupportedExtensions (List<string>), allowed file extensions, if not specified, it allows all types of files).
OnClose (EventCallback<bool>), event triggered when the component is closed.
Save (EventCallback<List<IBrowserFile>>), event triggered when files are saved.
Title (string), title of the component (default is "Subir archivo").
TextClose (string), title of the close button (default is "Cerrar").
TextSave (string), title of the save button (default is "Guardar").
TextFileName (string), title of the file name column (default is "Archivo").
TextFileSize (string), title of the file size column (default is "Tamaño").
TextBrowse (string), text displayed when no file is selected (default is "Busque, copie o arrastre y suelte su archivo aquí.").
TextErrorMaximumNumberFilesAccepted (string), error message for exceeding the maximum number of files (default is "Número máximo de archivos superado.").
TextErrorWrongFileExtension (string), error message for incorrect file extension (default is "Extensión de archivo incorrecta.").
TextErrorFileTooBig (string), error message for file size exceeding the limit (default is "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));