Configuración de dropzone.js con Angular 2

Básicamente, Dropzone es una librería liviana para cargar archivos. Puede usarlo para crear su propia interfaz de usuario. La característica principal de Dropzone son sus eventos que puede escuchar, para que pueda reaccionar ante cada cambio. puedes configurar fácilmente con Angular 2

Angular2 Dropzone-wrapper para el pescador 2 #

Esta es una biblioteca contenedora de Angular 2 para Dropzone.

npm install angular2-dropzone-wrapper –save-dev

Carga el módulo para tu aplicación

import { DropzoneModule } from 'angular2-dropzone-wrapper';
import { DropzoneConfigInterface } from 'angular2-dropzone-wrapper';
 
const DROPZONE_CONFIG: DropzoneConfigInterface = {
  // Change this to your upload POST address: 
  server: 'https://httpbin.org/post',
  maxFilesize: 50,
  acceptedFiles: 'image/*'
};
 
@NgModule({
  ...
  imports: [
    ...
    DropzoneModule.forRoot(DROPZONE_CONFIG)
  ]
})

USO DE COMPONENTES

Simplemente reemplace el elemento que normalmente se pasaría a Dropzone con el componente dropzone.

<dropzone [config]="config" [message]="'Click or drag images here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>

Crear componente de zona de descenso

import {Component} from '@angular/core';
@Component({
    selector: 'neon-new-media',
    templateUrl: './dropzone.component.html',
    styleUrls: ['./dropzone.component.scss']
})
export class DropZoneComponent {

 
    onUploadError(args: any) {
        console.log('onUploadError:', args);
    }

    onUploadSuccess(args: any) {
        console.log('onUploadSuccess:', args);
    }
}