Angular 2
Dropzone의 각도 2

드롭 존

Dropzone 용 앵귤러 2 래퍼 라이브러리.

npm은 angular2-dropzone-wrapper를 설치합니다. --save-dev

앱 모듈 용 모듈로드

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://example.com/post',
  maxFilesize: 10,
  acceptedFiles: 'image/*'
};
 
@NgModule({
  ...
  imports: [
    ...
    DropzoneModule.forRoot(DROPZONE_CONFIG)
  ]
})

구성 요소 사용법

간단히 Dropzone에 전달 될 요소를 dropzone 구성 요소로 바꾸기 만하면됩니다.

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

드롭 존 구성 요소 만들기

import {Component} from '@angular/core';
@Component({
    selector: 'app-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);
    }
}