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.

1npm install ngx-image-handler@latest --save

You will need to instal the ngx-image-cropper additionaly.

1npm install ngx-image-cropper@7.2.1 --save

And add AngularFire to your proyect in case you haven't

1ng add @angular/fire@17.0.1

NOTE

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

1npm install file-upload-firestorage@0.2.0 --save

Usage

Make sure you have imported into your app.module.ts file.

1import { NgxImageHandlerModule } from 'ngx-image-handler';

Then, just use it in your html template using the tag

1<ngx-image-handler 
2    [storagePath] = "'images'"
3    (res)="output($event)"
4    [maxSize]="2"
5    [onlyType]='"image"'
6    [cropper]="false"
7    lang='es'
8    />

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.

Creators

Jose Invernón

• Personal GitHub
• LinkedIn

License

MIT