This library was generated with Angular CLI version 10. 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.
Use the package manager Npm to install this package.
npm install file-upload-firestorage@latest --save
You will need to instal the ngx-image-cropper additionaly.
npm install ngx-image-cropper@latest --save
And add AngularFire to your proyect in case you haven't
ng add @angular/fire
If you just need to use a file drop zone with no other extra function, you could install the V 0.2.0.
npm install file-upload-firestorage@0.2.0 --save
Make sure you have imported into your app.module.ts file.
import { FileUploadFirestorageModule } from 'file-upload-firestorage';
Then, just use it in your html template using the tag
<lib-file-upload-firestorage
[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.
The only required input is the storagePath
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) |
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 };
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.