ngx-image-handler v1.0.3
ngx-image-handler FireStorage Uploader
This library was generated with Angular CLI version 17. This Module will help you to make a file uploader for your Angular project with firebase/firestorage. Now I made a little mix with the library of ngx-image-cropper to allow edit the images before upload them to firebase.
Version
| Version | Angular | @angular/fire | Image Cropper | |
|---|---|---|---|---|
| x | 1.0.0 | 17 | 17.0.1 | 7.2.1 |
| 0.0.2 | 14 | 7.4.0 | 6.2.2 |
Installation
Use the package manager Npm to install this package.
npm install ngx-image-handler@latest --saveYou will need to instal the ngx-image-cropper additionaly.
npm install ngx-image-cropper@7.2.1 --saveAnd add AngularFire to your proyect in case you haven't
ng add @angular/fire@17.0.1NOTE
If you just need to use a file drop zone with no other extra function, you could install the V 0.2.0. of my previuos package Deprecated
npm install file-upload-firestorage@0.2.0 --saveUsage
Make sure you have imported into your app.module.ts file.
import { NgxImageHandlerModule } from 'ngx-image-handler';Then, just use it in your html template using the tag
<ngx-image-handler
[storagePath] = "'images'"
(res)="output($event)"
[maxSize]="2"
[onlyType]='"image"'
[cropper]="false"
lang='es'
/>By default it will allow the user to upload image or any document files with no size restriction. I decided to make this as much customizable as I could.
API
The only required input is the storagePath
Inputs
| Name | Type | Default | Description | |
|---|---|---|---|---|
| storagePath | string | This is the firestorage path to save the image | ||
| maxSize | number | Define the max size of the file. Write it in Mb. Ex. 2 | ||
| onlyType | string | You can restrict the file type separating them with a coma (,) Ex. image, pdf. | ||
| cropper | boolean | false | Activate this option if you want enable the cropper tool. | |
| cropperConfig | cropperConfiguration | See the next table with all availables options. | ||
| lang | string | en | Change the language. |
For the cropperConfiguration object. We use just some options of the original library of ngx-image-cropper. If you have some troubles with this options check their repository.
| Name | Type | Default | Description |
|---|---|---|---|
| aspectRatio | number | 1/1 | The width / height ratio (e.g. 1/1 is square image , 4/3 ...) |
| maintainAspectRatio | boolean | true | Keep width and height of cropped image equal according to the aspectRatio |
| containWithinAspectRatio | boolean | false | When set to true, padding will be added around the image to make it fit to the aspect ratio |
| cropperMinHeight | number | 0(Disable) | |
| cropperMinWidth | number | 0(Disable) | |
| resizeToHeight | number | 0(Disable) | |
| resizeToWidth | number | 0(Disable) | |
| cropperStaticWidth | number | 0(Disable) | |
| cropperStaticWidth | number | 0(Disable) |
Output(s)
| Name | Type | Default | Description |
|---|---|---|---|
| res | event | This will return the locationPath and the thumbnail (Url) from firestorage. |
You will obtain an object like this: event: { locationPath: string, thumbnail: string };
Suggestions
I will try to improve this library to make our lives easier in the future. Any suggestion can be made through my email or as a pull request to the repo.