Componente de carga de archivos PrimeNG de Angular

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente FileUpload en Angular PrimeNG. También aprenderemos sobre las propiedades, eventos, métodos y estilo junto con sus sintaxis que se usarán en el código. 

Componente FileUpload: se utiliza para crear un elemento que permite a los usuarios cargar contenido de archivos.

Propiedades:

• name: Es el nombre del parámetro de solicitud. Es de tipo de datos de string, el valor predeterminado es nulo.
• url: Es la url para subir los archivos. Es de tipo de datos de string, el valor predeterminado es nulo.
• método: Especifica el método HTTP que se utiliza para enviar. Es de tipo de datos de string, el valor predeterminado es publicación.
• múltiple: Se utiliza para seleccionar varios archivos a la vez. Es de tipo de dato booleano, el valor por defecto es false.
• accept: Es el patrón para restringir los tipos de archivos permitidos. Es de tipo de datos de string, el valor predeterminado es falso.
• disabled: se utiliza para deshabilitar la funcionalidad de carga. Es de tipo de dato booleano, el valor por defecto es false.
• auto: especifica si la carga comienza automáticamente después de completar la selección. Es de tipo de dato booleano, el valor por defecto es false.
• maxFileSize: Es el tamaño máximo de archivo permitido en bytes. Es de tipo de dato numérico, el valor por defecto es nulo.
• fileLimit: Es el número máximo de archivos que se pueden subir. Es de tipo de dato numérico, el valor por defecto es nulo.
• invalidFileSizeMessageSummary: Es el mensaje de resumen del tamaño de archivo no válido. Es de tipo de datos de string, el valor predeterminado es {0}: tamaño de archivo no válido.
• invalidFileSizeMessageDetail: Es el mensaje detallado del tamaño del archivo no válido. Es del tipo de datos de string, el valor predeterminado es «el tamaño máximo de carga es {0}».
• invalidFileTypeMessageSummary: Es el mensaje de resumen del tipo de archivo no válido. Es de tipo de datos de string, el valor predeterminado es «{0}: tipo de archivo no válido, «.
• invalidFileLimitMessageDetail: Es el mensaje detallado del tipo de archivo no válido. Es de tipo de datos de string, el valor predeterminado es «el límite es {0} como máximo».
• invalidFileLimitMessageSummary: Es el mensaje de resumen del tipo de archivo no válido. Es de tipo de datos de string, el valor predeterminado es «Número máximo de archivos excedido».
• invalidFileTypeMessageDetail: Es el mensaje detallado del tipo de archivo no válido. Es de tipo de datos de string, el valor predeterminado es «tipos de archivos permitidos: {0}».
• estilo: Se utiliza para especificar el estilo en línea del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• styleClass: Se utiliza para especificar la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• previewWidth: Es el ancho de la miniatura de la imagen en píxeles. Es de tipo de dato numérico, el valor por defecto es 50.
• elegirEtiqueta: Es la etiqueta del botón de elegir. Es de tipo de datos de string, el valor predeterminado es nulo.
• uploadLabel: Es la etiqueta del botón de subir. Es de tipo de datos de string, el valor predeterminado es nulo.
• cancelLabel: Es la etiqueta del botón cancelar. Es de tipo de datos de string, el valor predeterminado es nulo.
• elegirIcono: Es el icono del botón elegir. Es de tipo de datos de string, el valor predeterminado es pi pi-plus.
• uploadIcon: Es el icono del botón de subir. Es de tipo de datos de string, el valor predeterminado es pi pi-upload.
• cancelIcon: Es el icono del botón cancelar. Es de tipo de datos de string, el valor predeterminado es pi pi-times.
• modo: se utiliza para definir la interfaz de usuario del componente. Es de tipo de datos de string, el valor predeterminado es avanzado.
• customUpload: se utiliza para definir si se utiliza la carga predeterminada o una implementación manual definida en la devolución de llamada de uploadHandler. Es de tipo de dato booleano, el valor por defecto es false.
• showUploadButton: Se utiliza para definir la visibilidad del botón de carga. Es de tipo de datos booleano, el valor predeterminado es verdadero.
• showCancelButton: Se utiliza para definir la visibilidad del botón cancelar. Es de tipo de datos booleano, el valor predeterminado es verdadero.
• files: Es la lista de archivos que se proporcionarán a FileUpload externamente. Es de tipo de datos de array, el valor predeterminado es nulo.
• headers: Es la clase HttpHeaders representa las opciones de configuración del encabezado. Es del tipo de datos HttpHeader, el valor predeterminado es nulo.

Eventos:

• onBeforeUpload : es una devolución de llamada que se activa antes de que se inicialice la carga del archivo.
• onSend : es una devolución de llamada que se activa cuando se envía la solicitud al servidor.
• onUpload : es una devolución de llamada que se activa cuando se completa la carga del archivo.
• onError : es una devolución de llamada que se activa si falla la carga del archivo.
• onClear : es una devolución de llamada que se activa cuando los archivos en la cola se eliminan sin cargarlos usando el botón borrar todo.
• onRemove : es una devolución de llamada que se activa cuando se elimina un archivo sin cargarlo usando un botón de borrado de un archivo.
• onSelect : es una devolución de llamada que se activa cuando se seleccionan archivos.
• onProgress: es una devolución de llamada que se activa cuando se cargan archivos.
• uploadHandler: es una devolución de llamada que se activa en el modo de carga personalizado para cargar los archivos manualmente.

Métodos:

• upload : Se utiliza para cargar los archivos seleccionados.
• clear : Se utiliza para borrar la lista de archivos.

Estilo:

• p-fileupload: Es el elemento contenedor.
• p-fileupload-buttonbar: Es la cabecera que contiene los botones.
• p-fileupload-content: Es la sección de contenido.

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

npm install primeng --save
npm install primeicons --save

Estructura del proyecto: se verá así:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente FileUpload.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG FileUpload Component</h5>
<p-fileUpload name="myfile[]"></p-fileUpload>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { FileUploadModule } from "primeng/fileupload";
import { HttpClientModule } from "@angular/common/http";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FileUploadModule,
    HttpClientModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: en este ejemplo, crearemos un elemento de carga que acepte múltiples archivos e imágenes solo mediante el uso de la propiedad múltiple .

<h2>GeeksforGeeks</h2>
<h5>PrimeNG FileUpload Component</h5>
<p-fileUpload
  name="myfile[]"
  multiple="multiple"
  accept="image/*">
</p-fileUpload>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { FileUploadModule } from "primeng/fileupload";
import { HttpClientModule } from "@angular/common/http";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FileUploadModule,
    HttpClientModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/fileupload