ngx-upload-image v0.0.4
Getting Started
Installation
npm install ngx-upload-image --save
Usage
In your app.module.ts import it using @NgModule decorator.
import { NgxUploadImageModule } from 'ngxUploadImage';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxUploadImageModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Dependencies
Also import font-awesome into your application
Then in HTML
<ngx-ImageUpload
(getImage)="saveImage($event)">
</ngx-ImageUpload>
You will get all the images saved by the user, one at a time with getImage event.
Customization
<ngx-ImageUpload
[extensions]="['image/jpeg']"
[wrongExtensionTypeMessage]="'Please enter image of correct extension type'"
[maxFileSize]="1048576"
[maxFileSizeMessage]="'Image size is more than the max file size'"
[buttonMessage]="'UPLOAD IMAGE'"
[dropBoxMessage]="'Drop your images here!'"
[preview]="true"
[max]="5"
[displayAlert]="false"
(alertMessage)="getErrorMessage($event)"
(getImage)="saveImage($event)">
</ngx-ImageUpload>
extensions
Default is 'image/png' and 'image/jpeg'. Upload images with specific extensions. You can use any extension at your whim, just add extension to the list.
wrongExtensionTypeMessage
If extension of image not there in extensions array, what message user should see. Default is 'Please enter image of correct extension type'.
maxFileSize
Maximum size of image allowed to upload. By default you can upload any image size.
maxFileSizeMessage
If size of image is more than maxFileSize, this msg will be shown. Default is 'Image size is more than the max file size'.
buttonMessage
What should be displayed inside button of uploading image. Default: 'UPLOAD IMAGE'
dropBoxMessage
Message after the button. Default: 'Drop your images here!'
preview
Whether user should be able to see the uploaded image. Default is true.
max
How many images user should be able to upload. Default is 100.
displayAlert
If an error occurs related to maxFileSize or extensions, whether user should be able to see the alert or not. Default is true. If you want to customize the error, set this property to false and get the errorMessage from alertMessage event.
License
This project is licensed under the MIT License - see the LICENSE.md file for details