hi, i have a problem when i`m trying to upload the image. the console shows the follow error: "ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'push' of undefined TypeError: Cannot read property 'push' of undefined......". How can i fix this problem?
I am eagerly waiting for the one to one person chatt app and by the way very beautiful tutorial and l love your code affection logo. The tutorial was very helpful.
thank you for the wonderful video sir, this video was very helpful for me sir, please do a video for uploading and retrieving videos and webcam photos and videos sir, thank you
Thanks for the video, but I have the following compilation errors, any help? ERROR in node_modules/@angular/fire/firebase.app.module.d.ts:2:10 - error TS2614: Module '"../../firebase"' has no exported member 'auth'. Did you mean to use 'import auth from "../../firebase"' instead? 2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app'; ~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:16 - error TS2614: Module '"../../firebase"' has no exported member 'database'. Did you mean to use 'import database from "../../firebase"' instead? 2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app'; ~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:26 - error TS2614: Module '"../../firebase"' has no exported member 'messaging'. Did you mean to use 'import messaging from "../../firebase"' instead? 2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app'; ~~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:37 - error TS2614: Module '"../../firebase"' has no exported member 'storage'. Did you mean to use 'import storage from "../../firebase"' instead? 2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app'; ~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:46 - error TS2614: Module '"../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../firebase"' instead? 2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app'; ~~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:57 - error TS2614: Module '"../../firebase"' has no exported member 'functions'. Did you mean to use 'import functions from "../../firebase"' instead? 2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app'; ~~~~~~~~~ node_modules/@angular/fire/storage/interfaces.d.ts:1:10 - error TS2614: Module '"../../../firebase"' has no exported member 'storage'. Did you mean to use 'import storage from "../../../firebase"' instead? 1 import { storage } from 'firebase/app'; ~~~~~~~ node_modules/@angular/fire/storage/observable/fromTask.d.ts:3:10 - error TS2614: Module '"../../../../firebase"' has no exported member 'storage'. Did you mean to use 'import storage from "../../../../firebase"' instead? 3 import { storage } from 'firebase/app'; ~~~~~~~ node_modules/@angular/fire/database/interfaces.d.ts:2:10 - error TS2614: Module '"../../../firebase"' has no exported member 'database'. Did you mean to use 'import database from "../../../firebase"' instead? 2 import { database } from 'firebase/app'; ~~~~~~~~
Hy, is there any way to direct download file from firebase URL instead of opening file into new or same tab. I want to download files on button click. Your help would be appreciated.
when i am uploading image it is not showing image in gallery at runtime.i have to restart the application to see recent uploaded images in Gallery i am using .NET Core WebApi with Angular 7 . i am showing image in this way in gallery and i am storing the image path also in database like this 'assets\images\imagename.jpg'
Would anyone know why my images are appearing as all different sizes? I applied the css to styles.css for the imagebox class. I am wondering if it has to do with the size of the image itself, or maybe I am missing something along the line. I have the image-fluid class on all my image-list components. It turns out with the 1st pic being the right size, the 2nd being too big, and the 3rd being too small. It stays like that throughout each row.
Good Tutorial , can you please add one more thing in it ? click on the image to view on full screen so that we can zoom it or something like that ? with any js library or other Thanks
Hello my kind sir.. i am new to web dev.. and i was wondering that.. currently i am learning node.js express.. so is it important for me to learn angular or its optinal
@@CodAffection i just do a angular 10 version, for some reason, the image list and image box css not showing up, something break, do you know if there is an easy way to generate thumbnail, instead of loading whole image, thank you so much
@@guocity I don't know what actually causing the error. But if you want to load a thumbnail of the image try to use image compression algorithms, they could help you to reduce the image size. www.npmjs.com/package/ngx-image-compress
Firestore is better option rather than Realtime database. Is there any way to upload image in firestore. Code: storageRef.child('images/' + file.name).put(file, metadata).then(function(snapshot) { console.log('Uploaded', snapshot.totalBytes, 'bytes.'); let db = firebase.firestore(); let dbRef = db.collection("images").doc(file.name); let setData = dbRef.set({ //yourdata here downloadURl: snapshot.downloadURL }).then( () => { console.log("Data stored in Firestore!"); });
@@CodAffection could u guide me with this? where i have to perform changes. i have learned to create angular 7 form with firestore from your tutorial and it is successfully running.i am having trouble with uploading image in forms using firestore in angular 7.
goo.gl/RFY5C2 : Subscribe to CodAffection
goo.gl/bPcyXW : Buy me a Coffee
goo.gl/ijPZQk : Angular CRUD with .Net Core
goo.gl/wb74j1 : Angular Material
goo.gl/p8rsXX : Angular CRUD with Firebase
goo.gl/3DefLb : Login-Logout in Angular with .Net Core
goo.gl/ZHDEhP : Angular Master Detail CRUD
Great tutorial! Thank you very much. Your 'Booom!' in tutorials always cracks me up. Here it is again at 39:45
By far one of the most amazingly executed tutorial💐💐thanks for sharing your knowledge and time☺
My pleasure 😊
hi, i have a problem when i`m trying to upload the image. the console shows the follow error: "ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'push' of undefined
TypeError: Cannot read property 'push' of undefined......". How can i fix this problem?
This channel deserves a lot more attention... Great work
Thanks for the support.
thanks a lot bro u really really saved my life!!!!!
Awesome explanation man..very helpful
please complete this series with edit, delete, spinner while performing insert update or delete
I am eagerly waiting for the one to one person chatt app and by the way very beautiful tutorial and l love your code affection logo. The tutorial was very helpful.
Thank you very much for the excellent lesson!
Thankyou sir , this my first project i have learn alot of this from you in this tutorial.
You are most welcome
Love you sir, Nice explanation and thanks for teaching in detail.
Awesome!! Especially thank you, that you explain all very properly, and don't forget about details!!
thanks for the wonderful feedback.
Great Video, it does what it promises in a very understandable way. Everything worked perfectly for me in my project. Many thanks.
Thanks for the wonderful feedback.
You should do a video for email or sms authentication with Identity...
Hi shamsheer was expecting the back end to be in SQL server and asp.net core web api
to skip stylesheets or html sheet file just type -is and -it respectively
keep working on Angular. hope to see more tutorial on your channel :)
thank you for the wonderful video sir, this video was very helpful for me sir,
please do a video for uploading and retrieving videos and webcam photos and videos sir,
thank you
Sir please make new video for create a blog in angular 9 and Firestore database.
You are explaining everything is very deeply.
nice sir everything working properly, but what SnapshotChange function do, and working of finalize ?..plz Sir.
Thanks for the video, but I have the following compilation errors, any help?
ERROR in node_modules/@angular/fire/firebase.app.module.d.ts:2:10 - error TS2614: Module '"../../firebase"' has no exported member 'auth'. Did you mean to use 'import auth from "../../firebase"' instead?
2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app';
~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:16 - error TS2614: Module '"../../firebase"' has no exported member 'database'. Did you mean to use 'import database from "../../firebase"' instead?
2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app';
~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:26 - error TS2614: Module '"../../firebase"' has no exported member 'messaging'. Did you mean to use 'import messaging from "../../firebase"' instead?
2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app';
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:37 - error TS2614: Module '"../../firebase"' has no exported member 'storage'. Did you mean to use 'import storage from "../../firebase"' instead?
2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app';
~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:46 - error TS2614: Module '"../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../firebase"' instead?
2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app';
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:57 - error TS2614: Module '"../../firebase"' has no exported member 'functions'. Did you mean to use 'import functions from "../../firebase"' instead?
2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app';
~~~~~~~~~
node_modules/@angular/fire/storage/interfaces.d.ts:1:10 - error TS2614: Module '"../../../firebase"' has no exported member 'storage'. Did you mean to use 'import storage from "../../../firebase"' instead?
1 import { storage } from 'firebase/app';
~~~~~~~
node_modules/@angular/fire/storage/observable/fromTask.d.ts:3:10 - error TS2614: Module '"../../../../firebase"' has no exported member 'storage'. Did you mean to use 'import storage from "../../../../firebase"' instead?
3 import { storage } from 'firebase/app';
~~~~~~~
node_modules/@angular/fire/database/interfaces.d.ts:2:10 - error TS2614: Module '"../../../firebase"' has no exported member 'database'. Did you mean to use 'import database from "../../../firebase"' instead?
2 import { database } from 'firebase/app';
~~~~~~~~
Thank You Sir
Thank you very much for this tutorial!!!
thank you so much
thanks for the video
kindly can you make the ssame tutorial using Angular, nodejs, express amongoDb please
How to get the inserted image whose catagories is animal?
Thank you x 1000
:) Thanks for the humongous thanks.
Keep learning and sharing.
thanks bro, hope you we will get more knowledge in future
sure, thanks for your wonderful feedback. let me know if you have any future video suggestions on angular or .net core.
@@CodAffection make video using angular and java
Awesome work. Thanks for the hard work you have done and good explanation. I have sent small token $. Thanks
Nice video Please Update, and Delete I can't Figure it out
Thank you CodeAffection!
thanks bro, hope you introduce more videos next time
sure.
BOOOOM !!! Super like.
Why we use AngularFirelist here .plz
Hello sir without scaffolding crud operation banao asp.net MVC EntityFramework please sir
Hy, is there any way to direct download file from firebase URL instead of opening file into new or same tab. I want to download files on button click. Your help would be appreciated.
i have the same issue did u please find the solution?
5* Good solution .Thanks .
please let me know If I can use this same approach for Ionic 4+?
when i am uploading image it is not showing image in gallery at runtime.i have to restart the application to see recent uploaded images in Gallery i am using .NET Core WebApi with Angular 7 .
i am showing image in this way in gallery and i am storing the image path also in database like this 'assets\images\imagename.jpg'
Sir.. can u please tell how to delete those images from firebase by clicking a delete button below the images?
thank you so much!
Would anyone know why my images are appearing as all different sizes? I applied the css to styles.css for the imagebox class. I am wondering if it has to do with the size of the image itself, or maybe I am missing something along the line. I have the image-fluid class on all my image-list components. It turns out with the 1st pic being the right size, the 2nd being too big, and the 3rd being too small. It stays like that throughout each row.
I tried this code it is working very well.but loading images taking time..how to make it asynchronous
how cain i update a register ?
Thanks for your videos. You are the best! Could you please make a video how to publish net core + angular 7 app?
let me check what I can do ?
How would you connect the image to a post or user in a MongoDB database?
sir how can i filter the data based on category?
Good Tutorial , can you please add one more thing in it ? click on the image to view on full screen so that we can zoom it or something like that ? with any js library or other
Thanks
How to delete uploaded images one at a time?
thanks bro
awesome!
awesome bro
glad you found the video helpful.
great video, can you make the same tutorial using nativescript, doesnt exist any video about that, please
I will consider your suggestion for later.
please make a video on geofire
just awesome
Glad you found the video helpful.
Got an error after 1:05:30 saying "Cannot read property 'push' of undefined", I watched the video over and the error is still there please help me
please try in debug mode to find the exact cause.
can it be a pdf file?
48:28 How to upload selected image to firebase DB
[src]="imgSrc" is not giving me the same result as src="/assets/img/a.jpg" .plzz help?
it should work, unless u have images in some other path
Hi I [src]="imgSrc" is not giving me the same result as src="/assets/img/a.jpg" why is that? @CodAffection
same here.Did u find a solution for that issue..?@Pasindu
when I equal imgSrc to [src] ,photo doesnot display..plzz help
Is this also applicable for http clients?
Hello my kind sir.. i am new to web dev.. and i was wondering that.. currently i am learning node.js express.. so is it important for me to learn angular or its optinal
Its important to learn angular for front-end, node for back end
you need to learn any of the front-end technologies like angular, react, vuejs, etc.
can you update your code to latest angular, your github code cannot install, angular version too old
I had the same thought.
@@CodAffection i just do a angular 10 version, for some reason, the image list and image box css not showing up, something break, do you know if there is an easy way to generate thumbnail, instead of loading whole image, thank you so much
@@guocity I don't know what actually causing the error. But if you want to load a thumbnail of the image try to use image compression algorithms, they could help you to reduce the image size.
www.npmjs.com/package/ngx-image-compress
@@CodAffection thanks, let me try
I am getting enable cors ,what to do
Install the cors npm package and upload your build again. Or run new build on local.
are mnc companies(tcs , infosis , cognizant ) in india using firebase ??
I don't know.
@@CodAffection I am in cognizant and nobody uses firebase there and I think major companies are not using firebase then why learning it .
ERROR
preview instance
ERROR Error: Uncaught (in promise):
Firestore is better option rather than Realtime database. Is there any way to upload image in firestore.
Code:
storageRef.child('images/' + file.name).put(file, metadata).then(function(snapshot) {
console.log('Uploaded', snapshot.totalBytes, 'bytes.');
let db = firebase.firestore();
let dbRef = db.collection("images").doc(file.name);
let setData = dbRef.set({
//yourdata here
downloadURl: snapshot.downloadURL
}).then( () => {
console.log("Data stored in Firestore!");
});
already done a video on angular + firestore crud operation.
41:38
is it possible to do this with firestore?
sure, you can use firestore instead of firebase realtime db.
@@CodAffection could u guide me with this? where i have to perform changes. i have learned to create angular 7 form with firestore from your tutorial and it is successfully running.i am having trouble with uploading image in forms using firestore in angular 7.
@@CodAffection there is no upload() function in angularFirestore
48:14
app-routing suddently appeared there, couldn't get it
suddenly appeared or disappeared ?
Got an error after 1:05:30 saying "Cannot read property 'push' of undefined", I watched the video over and the error is still there
Same, any solution?
@@raysha42 nothing?