2 |
New Image
3 |
4 |
5 |
21 |
22 |
23 |
24 |
25 |
32 |
33 |
39 |
40 |
41 |
43 |
44 |
45 |
46 |
47 |
54 |
55 |
56 |
Your Images
57 |
58 |
59 |
61 |
62 |
66 |
![Card image cap]()
71 |
72 |
73 |
{{image?.imageName}}
74 |
81 |
88 |
89 |
90 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/src/app/gallery/gallery.component.scss:
--------------------------------------------------------------------------------
1 |
2 | #preview{
3 | width: 320px;
4 | height: 260px;
5 | padding:10px;
6 | background-origin: content-box;
7 | cursor: pointer
8 | }
9 |
10 | .new-img-div{
11 | width: 50%;
12 | margin: 0 auto;
13 | }
14 |
15 | #imageFile
16 | {
17 | visibility: hidden;
18 | margin-left: 10px;
19 | }
20 |
21 | .rem-icon{
22 | margin: 10px;
23 | color: #ff4444;
24 | cursor: pointer;
25 | }
26 |
27 |
28 | progress {
29 | width: 100%;
30 | }
31 | progress::-webkit-progress-value {
32 | transition: width 0.1s ease;
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/gallery/gallery.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {FormGroup,
3 | FormsModule,
4 | ReactiveFormsModule,
5 | FormBuilder} from '@angular/forms';
6 | import * as $ from 'jquery';
7 | import { NotificationServicesService } from '../notification-services.service';
8 | import { AngularFireStorage, AngularFireUploadTask } from 'angularfire2/storage';
9 | import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
10 | import { Observable, Timestamp } from 'rxjs';
11 | import { finalize, map } from 'rxjs/operators';
12 |
13 |
14 |
15 | export interface Image { id: string; imagePath: string; imageURL: string; imageName: string; maintTs: number; }
16 |
17 | @Component({
18 | selector: 'app-gallery',
19 | templateUrl: './gallery.component.html',
20 | styleUrls: ['./gallery.component.scss']
21 | })
22 | export class GalleryComponent implements OnInit {
23 |
24 | title = 'app';
25 | myForm: FormGroup;
26 | imageNm: string;
27 | imgPath: string;
28 | private imagesCollection: AngularFirestoreCollection
;
29 | images: Observable;
30 | modalImage: any;
31 | // main task
32 | task: AngularFireUploadTask;
33 | uploadProgress: Observable;
34 | downloadURL: Observable;
35 |
36 | constructor(private fb: FormBuilder,
37 | private noteSvc: NotificationServicesService,
38 | private afStorage: AngularFireStorage,
39 | private afs: AngularFirestore
40 | ) { }
41 |
42 | ngOnInit() {
43 | this.createForm();
44 | this.loadImages();
45 | }
46 | createForm() {
47 | this.myForm = this.fb.group({
48 | imageName: '',
49 | imageAvatar: null
50 | });
51 | }
52 |
53 | onUploadBtnClick() {
54 | if (this.imageNm === undefined) {
55 | this.noteSvc.setNotification(
56 | 'Missing Information',
57 | 'Please give a name to the image before you click on upload!'
58 | );
59 | $('.notification-btn').click();
60 | } else {
61 | $('#imageFile').click();
62 | }
63 |
64 | }
65 | onFileChange(event) {
66 | const reader = new FileReader();
67 | if (event.target.files &&
68 | event.target.files.length > 0) {
69 | const file = event.target.files[0];
70 | reader.readAsDataURL(file);
71 | reader.onload = () => {
72 | $('#preview')
73 | .attr('src', URL.createObjectURL(event.target.files[0]));
74 | };
75 | this.startUpload(event.target.files);
76 |
77 | }
78 | }
79 |
80 |
81 | startUpload(event: FileList) {
82 | // File object
83 | const file = event.item(0);
84 | console.log(file);
85 |
86 | // client side validation
87 | if (file.type.split('/')[0] !== 'image') {
88 | console.error('unsupported file type!');
89 | }
90 |
91 | // storage path
92 | this.imgPath = `test/${new Date().getTime()}_${file.name}`;
93 | const fileRef = this.afStorage.ref(this.imgPath);
94 |
95 | // optional metadata
96 | const customMetadata = { app: 'Angular-FireBase-Gallery'};
97 | // main task
98 | this.task = this.afStorage.upload(this.imgPath, file, { customMetadata });
99 |
100 | this.afStorage.upload(this.imgPath, file, { customMetadata });
101 | // observe percentage changes
102 | this.uploadProgress = this.task.percentageChanges();
103 | // get notified when the download URL is available
104 | this.task.snapshotChanges().pipe(
105 | finalize(() => {
106 | this.downloadURL = fileRef.getDownloadURL();
107 | // The above step returns an observable which can be subscribed to fetch the data within it
108 | this.downloadURL.subscribe(data => {
109 | // to create an id for the document.
110 | const id = this.afs.createId();
111 | // storing downloadURL as imageURL
112 | const imageURL = data;
113 | // storing image path in firestore
114 | const imagePath = this.imgPath;
115 | // Image name fetched from ngModel on 'imageNm' field
116 | const imageName = this.imageNm;
117 | // To store timestamp of the image before being inserted in firestore
118 | const maintTs = Date.now();
119 | const image: Image = { id, imagePath, imageURL, imageName, maintTs };
120 | // image object inserted in image collection (AngularFirestoreCollection)
121 | this.imagesCollection.doc(id).set(image);
122 | // setting the image name back to blank
123 | this.imageNm = '';
124 | });
125 |
126 | })
127 | )
128 | .subscribe();
129 |
130 | }
131 |
132 | loadImages() {
133 | this.imagesCollection = this.afs.collection('images', ref => ref.orderBy('maintTs', 'desc'));
134 | this.images = this.imagesCollection.valueChanges();
135 | }
136 | maximizeImage(image) {
137 | this.modalImage = image;
138 | this.noteSvc.setNotification(
139 | image.imageName,
140 | image.imagePath
141 | );
142 | $('.max-img-notification-btn').click();
143 | }
144 | onDeleteClick(image) {
145 | this.modalImage = image;
146 | this.noteSvc.setNotification(
147 | 'Confirmation',
148 | 'Are you sure you want to remove ' + image.imageName
149 | + ' from the system?'
150 | );
151 | $('.del-notification-btn').click();
152 | }
153 | deleteItem() {
154 | console.log('From notifications ' + this.modalImage.id);
155 | $('.cancel-del-modal').click();
156 | this.imagesCollection.doc(this.modalImage.id).delete();
157 | this.afStorage.ref(this.modalImage.imagePath).delete();
158 |
159 | }
160 |
161 |
162 | }
163 |
--------------------------------------------------------------------------------
/src/app/notification-services.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Observable, Subject } from 'rxjs';
3 |
4 | @Injectable({
5 | providedIn: 'root'
6 | })
7 | export class NotificationServicesService {
8 |
9 | notification = {
10 | title: '',
11 | message: ''
12 | };
13 |
14 | private subject = new Subject();
15 |
16 | constructor() { }
17 |
18 | setNotification(title, message) {
19 | this.subject.next(
20 | this.notification = {
21 | title: title,
22 | message: message
23 | }
24 | );
25 | }
26 |
27 | getNotification(): Observable {
28 | return this.subject.asObservable();
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/notification/notification.component.css:
--------------------------------------------------------------------------------
1 | .notification-btn, .del-notification-btn, .max-img-notification-btn{
2 | visibility: hidden;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/notification/notification.component.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
16 |
17 |
{{notification.message}}
18 |
19 |
24 |
25 |
26 |
31 |
32 |
33 |
39 |
40 |
{{notification.message}}
41 |
42 |
46 |
47 |
48 |
54 |
55 |
56 |
62 |
63 |
67 |
68 |
71 |
72 |
73 |
31 |