src/app/common/components/image-upload/ngx-image-upload.component.ts
upload images component inspired from https://aberezkin.github.io/ng2-image-upload/#/demo
| selector | ngx-image-upload |
| templateUrl | ./ngx-image-upload.component.html |
Methods |
Inputs |
Outputs |
constructor()
|
buttonCaption
|
Type: |
onRemove
|
$event type: EventEmitter
|
onUpload
|
$event type: EventEmitter
|
| onRemoved | ||||||
onRemoved(file: FileHolder)
|
||||||
|
Parameters :
Returns :
void
|
| onUploadFinished | ||||||
onUploadFinished(file: FileHolder)
|
||||||
|
Parameters :
Returns :
void
|
import {Component, EventEmitter, Input, Output} from "@angular/core";
import {FileHolder, UploadMetadata} from "angular2-image-upload";
/**
* upload images component inspired from https://aberezkin.github.io/ng2-image-upload/#/demo
*/
@Component({
selector: 'ngx-image-upload',
templateUrl: './ngx-image-upload.component.html'
})
export class NgxImageUploadComponent {
@Input() buttonCaption: string;
@Output() onUpload = new EventEmitter<any>();
@Output() onRemove = new EventEmitter<any>();
constructor() {
}
onUploadFinished(file: FileHolder): void {
this.onUpload.next(file);
}
onRemoved(file: FileHolder): void {
this.onRemove.next(file);
}
}
<image-upload url="http://localhost:3000/api/upload"
buttonCaption="{{buttonCaption}}"
(uploadFinished)="onUploadFinished($event)"
(removed)="onRemoved($event)"
dropBoxMessage="تصویر خود را اینجا بیندازید"
clearButtonCaption="حذف">
</image-upload>