Guajiritos Drag And Drop

Guajiritos Drag And Drop es una librería para Angular que proporciona un componente para la carga de archivos.

Instalación

Con npm

npm i @guajiritos/drag-and-drop --save

Con yarn

yarn add @guajiritos/drag-and-drop

Con pnpm

pnpm add @guajiritos/drag-and-drop

Importar la dependencia en tu proyecto.

import { GuajiritosDragAndDrop } from '@guajiritos/drag-and-drop';

@NgModule({
  imports: [
    GuajiritosGeneralAutocomplete
  ]
})

Importar la etiqueta en el componente correspondiente.

<guajiritos-drag-and-drop></guajiritos-drag-and-drop>

Entrada de datos

Como elementos opcionales se pueden introducir los siguientes campos:

• accept - Corresponde a los valores que permite la carga de archivos.
• multiple - Define si permite la carga de archivos multiples.
• exportBase64Files - Define si devuelve un archivo de tipo File o un arreglo de elementos Base64ExportFile.

<guajiritos-drag-and-drop [multiple]="true"></guajiritos-drag-and-drop>

Interfaz de objetos

interface Base64ExportFile {
  name: string;
  base64: string;
  type: string;
}

Entrada de datos usando formularios reactivos

Este componente permite la entrada de un formulario reactivo para el manejo de los valores.

<guajiritos-drag-and-drop [formControl]="control"></guajiritos-drag-and-drop>

o

<guajiritos-drag-and-drop formControlName="controlName"></guajiritos-drag-and-drop>

import { UntypedFormControl } from '@angular/forms';

export class DragAndDropTest {
  public form: UntypedFormControl = new UntypedFormControl({value: [], disabled: false});

  public reactToChanges(): void {
    this.form.valueChanges
      .subscribe({
        next: (files: File[]): void => {
          // Arreglo de archivos
        }
      });
  }
}

Salida

Si el parámetro exportBase64Files está activo la librería siempre devolverá un arreglo de elementos de tipo Base64ExportFile. De lo contrario devolverá un arreglo de tipo File.

En caso de no usar un formulario reactivo puedes obtener la lista de archivos con la salida del evento files.

<guajiritos-drag-and-drop (files)="getFiles($event)"></guajiritos-drag-and-drop>

export class DragAndDropTest {
  public getFiles(files: File[]): void {
    // Arreglo de archivos
  }
}

Si está activo el parámetro exportBase64Files.

<guajiritos-drag-and-drop (files)="getFiles($event)" [exportBase64Files]="true"></guajiritos-drag-and-drop>

export class DragAndDropTest {
  public getFiles(files: Base64ExportFile[]): void {
    // Arreglo de archivos en base64
  }
}