Open Source Library for Angular Web Apps to integrate a material user interface for firebase storage.
npm install ngx-storage-firebaseui
src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/angular-material-extensions-logo.svg">


















Angular UI component for firebase authentication.
This library is an angular module (including angular components and services) that allows to upload/download or event delete files
from firebase storage within a firebase project.
any question or suggestion ? Please do not hesitate to contact us!If you like this project, support ngx-storage-firebaseui
by starring :star: and sharing it :loudspeaker:
any important event occurred.ngx-auth-firebaseui learn more used to upload imaged to firebase storage and sync them with firestore - angular material theme
- angular material icons
- angular cdk - v9.x
- angular material - v9.x
- angular animations - v9.x
- angular router - v9.x
- angular flex-layout v9.0.0-beta.29
- @angular/fire - v5.4.x
- firebase - v7.13.x
the full tutorial guide can be found here
---
src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/v1/upload.gif">
src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/v1/1.png">
src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/v1/2.png">
---
``json`
"peerDependencies": {
"@angular/core": "^9.x",
"@angular/animations": "^9.x",
"@angular/cdk": "^9.x",
"@angular/flex-layout": "^9.0.0-beta.29",
"@angular/material": "^9.x",
"@angular/fire": "5.4.x",
"firebase": "7.13.x",
}
---
In the following section, I will show you how to improve the user's experience regarding images
1. install the storage resize images extension in your firebase project
2. set your firebase cloud function's location
3. pick either the default bucket or choose another one
4. set size images: 50x50,100x100,200x200,500x500,1000x1000,2000x2000thumbs
5. choose whether to delete the original image (tip: don't do that so that you can regenerate the thumbnails)
6. choose the cloud storage path for resized images (see below an example of an image directory in firebase storage)
src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/firebase_extensions/1.png">
after installation
src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/firebase_extensions/2.png">
src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/firebase_extensions/3.png">
)1. firebase inittypescript
2. init firebase cloud function in your firebase project ()firbease deploy --only functions
3. copy and paste the below functions
4. upload
`typescript
import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import { ObjectMetadata } from 'firebase-functions/lib/providers/storage';
// tslint:disable-next-line:no-implicit-dependencies
import { Bucket, Storage } from '@google-cloud/storage';
// @ts-ignore
// tslint:disable-next-line:no-implicit-dependencies
import { GetSignedUrlResponse } from '@google-cloud/storage/build/src/file';
const path = require('path');
const os = require('os');
const fs = require('fs');
// tslint:disable-next-line:no-implicit-dependencies
const spawn = require('child-process-promise').spawn;
// tslint:disable-next-line:no-implicit-dependencies
const mkdirp = require('mkdirp-promise');
const storage = new Storage();
const firestore = admin.firestore();
const defaultStorage = admin.storage();
// const defaultBucket = defaultStorage.bucket();
/**
* Firebase cloud function to sync uploaded images to firebase storage bucket with firestore
*
* @author Anthony Nahas
* @since 03.2020
* @version 1.0
*/
export const syncImgsWithFirestore =
functions
.storage
.object()
.onFinalize(async (object: ObjectMetadata) => {
console.log('syncImgsWithFirestore is now running', object);
if (object && object.contentType && !object.contentType.includes('image')) {
console.log('exiting function');
return false;
}
let downloadURLs: any = null;
let downloadURL = null;
try {
downloadURLs = await getDownloadURL(object);
downloadURL = downloadURLs[0];
console.log('Download URL --> ', downloadURL, typeof downloadURL);
// downloadURL = downloadURL[0];
} catch (e) {
console.error('Error while getting download url', e);
}
const filePath = object.name;
console.log('file path -->', filePath);
// @ts-ignore
const pathSegments = filePath.split('/');
console.log('path segments --> ', pathSegments);
const indexOfID = pathSegments.indexOf('imgs');
console.log('indexOfID', indexOfID, pathSegments[indexOfID + 1]);
const imgID = pathSegments[indexOfID + 1];
const lastSegment = pathSegments[pathSegments.length - 1];
console.log('lastSegment', lastSegment);
const nameSegments = lastSegment.split('_');
console.log('nameSegments', nameSegments);
const resize = nameSegments[nameSegments.length - 1];
console.log('resize', resize);
const size = resize.split('x')[0];
console.log('size', size, typeof size);
// const img: NahausImage = {
// id: imgID,
// downloadURL,
// path: filePath
// };
const indexOfThumbs = pathSegments.indexOf('thumbs');
console.log('indexOfThumbs', indexOfThumbs);
let firestorePath: string;
if (indexOfThumbs !== -1) {
// the image is a thumbnail
firestorePath = pathSegments.splice(0, indexOfThumbs).join('/');
console.log('firestorePath', firestorePath);
const thumbsMapKey: string = thumbs.${size};
return await firestore.doc(firestorePath).update({
[thumbsMapKey]: {
id: imgID,
downloadURL,
path: filePath
}
});
} else {
pathSegments.pop();
firestorePath = pathSegments.join('/');
console.log('firestorePath', firestorePath);
return await firestore.doc(firestorePath).set({
id: imgID,
downloadURL,
path: filePath
}, { merge: true });
}
});
function getDownloadURL(object: ObjectMetadata): Promise
if (!object.name) {
return;
}
const bucket: Bucket = defaultStorage.bucket();
const file = bucket.file(object.name);
// Get a signed URL for the file
return file.getSignedUrl({
action: 'read',
expires: '03-17-2025'
});
}
export const adjustOrientation = functions
.storage
.object()
.onFinalize(async (object) => {
const filePath = object.name;
const bucketName = object.bucket;
const metadata = object.metadata;
const tempLocalFile = path.join(os.tmpdir(), filePath);
const tempLocalDir = path.dirname(tempLocalFile);
const bucket = storage.bucket(bucketName);
if (object && object.contentType && !object.contentType.startsWith('image/')) {
console.log('This is not an image.');
return null;
}
if (metadata && metadata.autoOrient) {
console.log('This is already rotated');
return null;
}
return mkdirp(tempLocalDir).then(() => {
// Download file from bucket.
// @ts-ignore
return bucket.file(filePath).download({ destination: tempLocalFile });
}).then(() => {
console.log('The file has been downloaded to', tempLocalFile);
// Convert the image using ImageMagick.
return spawn('convert', [tempLocalFile, '-auto-orient', tempLocalFile]);
}).then(() => {
console.log('rotated image created at', tempLocalFile);
// @ts-ignore
metadata.autoOrient = true;
return bucket.upload(tempLocalFile, {
destination: filePath,
metadata: { metadata: metadata }
});
}).then(() => {
console.log('image uploaded to Storage at', filePath);
// Once the image has been converted delete the local files to free up disk space.
fs.unlinkSync(tempLocalFile);
console.log('Deleted local file', filePath);
return;
});
});
`
If Angular Material Design is not setup, just run ng add @angular/material learn more
Now add the library via the angular schematics`shell`
ng add ngx-storage-firebaseui
- :heavy_check_mark: peer dependencies will be automatically added the package.json and installed
- :heavy_check_mark: ngx-storage-firebaseui 's module will be automatically imported to the root module (just replace PUT_YOUR_FIREBASE_API_KEY_HERE with your firebase api key)ngx-storage-firebaseui
- :heavy_check_mark: 's assets will be automatically added the angular.json file
Install above dependencies via npm.
Now install ngx-storage-firebaseui via:`shell`
npm install --save ngx-storage-firebaseui
`bash`
npm i -s @angular/material @angular/cdk @angular/flex-layout @angular/forms @angular/animations @angular/router
Firebase deps
`bash`
npm i -s firebase @angular/fire
-> continue by following the instructions here
Once installed you need to import the main module:
`js`
import { NgxStorageFirebaseuiModule } from 'ngx-storage-firebaseui'; NgxStorageFirebaseuiModule .forRoot()
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice ):
and then from your Angular AppModule:
`typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { NgxStorageFirebaseuiModule } from 'ngx-storage-firebaseui';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
// Specify the ngx-storage-firebaseui library as an import
NgxStorageFirebaseuiModule.forRoot({
apiKey: 'your-firebase-apiKey',
authDomain: 'your-firebase-authDomain',
databaseURL: 'your-firebase-databaseURL',
projectId: 'your-firebase-projectId',
storageBucket: 'your-firebase-storageBucket',
messagingSenderId: 'your-firebase-messagingSenderId'
}),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
Other modules in your application can simply import NgxStorageFirebaseuiModule :
`js
import { NgxStorageFirebaseuiModule } from 'ngx-storage-firebaseui';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgxStorageFirebaseuiModule, ...],
})
export class OtherModule {
}
`
---
##### SystemJS
>Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle.map
In your systemjs config file, needs to tell the System loader where to look for ngx-storage-firebaseui:`js`
{
'ngx-storage-firebaseui';: 'node_modules/ngx-storage-firebaseui/bundles/ngx-storage-firebaseui.umd.js',
}
Once the library is imported, you can use its components, directives and pipes in your Angular application:
| option | bind | type | default | description |
|:---------------------|:------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
| path | Input() | string | - | path to store the image into firebase storage as well as in the firestoreInput()
| load | | boolean | true | whether to load the uploaded images from firebase Input()
| addButtonTooltipText | | string | add picture | text of the add button tooltip Output()
| onLoad | | number | - | called when the images are loaded from firestoreOutput()
| onImageUploaded | | number | - | called when an image is uploaded to firebase storageOutput()
| onImageSelectedAtIndex | | number` | - | called when an image is selected / clicked
---
Built by and for developers :heart: we will help you :punch:
---
This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm
---
Copyright (c) 2020 Anthony Nahas. Licensed under the MIT License (MIT)