Angular image upload component with preview and cropping features
See demo here: demo
npm install ngx-image-uploader --save
Add image uploader module to your module's imports
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app';
import { ImageUploaderModule } from 'ngx-image-uploader';
@NgModule({
imports: [BrowserModule, ImageUploaderModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}Use it in your component
import { Component } from '@angular/core';
import { ImageUploaderOptions, FileQueueObject } from 'ngx-image-uploader';
@Component({
selector: 'example-app',
template: '<ngx-image-uploader [options]="options" (upload)="onUpload($event)"></ngx-image-uploader>'
})
export class AppComponent {
options: ImageUploaderOptions = {
thumbnailHeight: 150,
thumbnailWidth: 150,
uploadUrl: 'http://some-server.com/upload',
allowedImageTypes: ['image/png', 'image/jpeg'],
maxImageSize: 3
};
onUpload(file: FileQueueObject) {
console.log(file.response);
}
}