Configuration de dropzone.js avec Angular 2

Fondamentalement, Dropzone est un librery léger pour télécharger des fichiers. t vous pouvez l’utiliser pour créer votre propre interface utilisateur. La principale caractéristique de Dropzone est ses événements que vous pouvez écouter, afin que vous puissiez réagir à chaque changement. vous pouvez facilement configurer avec Angular 2

Angular2 Dropzone-wrapper pour pêcheur 2

Il s’agit d’une bibliothèque wrapper Angular 2 pour [Dropzone][1].

npm install angular2-dropzone-wrapper –save-dev

Chargez le module pour votre application

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)
  ]
})

UTILISATION DES COMPOSANTS

Remplacez simplement l’élément qui serait normalement passé à Dropzone avec le composant dropzone.

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

Créer un composant dropzone

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);
    }
}

[1] : http://www.dropzonejs.com/