Multiple Concurrent File Uploads with Firebase Storage + Angular
ฝัง
- เผยแพร่เมื่อ 19 ก.พ. 2019
- Build a file upload dropzone 📨 from scratch with Angular & Firebase that can handle multiple concurrent files and save the download URL to Firestore fireship.io/lessons/angular-f...
File Drop Web Component github.com/GoogleChromeLabs/f...
Firebase Storage firebase.google.com/docs/stor...
Drag and Drop developer.mozilla.org/en-US/d...
#angular #firebase #storage - วิทยาศาสตร์และเทคโนโลยี
Keeps blowing my mind man. Life-saving tutorials
Dude you for real give the best web design tutorials. I've now built my 8th firebase angular app and you've for real helped me switch careers. Also I read you have a pug. They are still the best dogs in the world.
Thanks for another great video Jeff! A tip: instead of binding to a function at 8:06, which has a performance worsening in rendering the angular template, convert `isActive()` into an observable and unwrap it in the binding like so: `[disabled]="isActive | async"`.
This video is a revision of th-cam.com/video/wRWZQwiNFnM/w-d-xo.html based on two common requests, (1) multiple files, and (2) syncing the download URL to firestore.
The first one really helped me a lot..... Glad to see this one
thank you this tut saved a lot of time to me ... first time to use storage makes me don't know where and how to start implement such a case, you make it super easy to me
Never written a line of angular, but these have helped tons in my react native dev
Great video!
Thank u for this awesome video
Great video again. Thanks
Awesome video bro
excellent, practical and useful code
Late but thank you, sir!
Awesome video
Firebase is changing the game!
You are the man Jeff. :D . Why have you stopped using ionic ? Please provide some ionic tutorials as well.
Awesome video :)
By the way, do you have any plans to do a video on AngularDart ? Would love to see something like that.
Great video man. Wanted to know if you are going to come up with more Ionic 4 videos. I am unsure about learning nativescript vs ionic. Which one would you suggest(knowing that I have prior experience in ionic v3)?
It really depends. I put my thoughts together on this topic a few months ago itnext.io/should-you-use-ionic-4-fa04daebaffd
Thanks for the useful tutorial, I really needed it.
I have a question. Why unwrap async variables in div? 7:28 Isn't it cleaner to do it in ng-container or there is some reason of doing it with div?
It depends. ng-container is used when you don't want a dom element rendered, but often you want that div wrapper to for applying css styles.
Hello Jeff, I was wondering if you had any advice about compressing the file before uploading it to firebase storage. I know you have a video about compression after an upload. Any suggestions?
How would we trigger the startUpload function manually from within a parent component and then get all of the download urls?
Hi, I have a Question. Imagine a web app for a shop; where you need to use thumbs. I create a function in firebase (cloud) to generate many size of an image by a trigger. When I upload many images I can get the URLs of the original size of that Images, and save it to my DB.. I'm not going to use -> ref().child('image.jpg').getDownloadURL(), because this cause a big delay in the image renderization, example: list of products (thumbs needed). How could I get those thumbs URL's (public links)?? after images were loaded.. Thanks
What is this music in the beginning of your videos? It is so relaxing xD
Would love to see how you deal with the download url in a cloud function.
My app does not get to the the finalize part so download URLs are not added to the database. However, it works if I call subscribe on snapshotChanges, as described in the angularfire docs. Other than that, great tutorial as always!
How can I make the images upload in order?
The order depends on which image is upload first
It seems that toPromise() is deprecated. What can I use as an alternative?
Hello, you made a tutorial a year ago about auto search box and infinite scroll. Would it be possible to make a video tutorial combining both? it for both? thank you for your service.
Angular: 9.1.1 getting ERROR in Maximum call stack size exceeded on section "this.snapshot = this.task.snapshotChanges().pipe" . Any recommendations peoples?
Can you make some more videos regarding gapi? I'd very much like to see a gmail create draft and attach a file I have in Firebase Storage.
Im trying to make the user able to upload a profile image. There must be an easier way to do so, right?
Hey, love your content, and I'm very grateful for it. I have a problem, I get an error when using your code for uploading an image, it says "Cannot find name 'finalize'". Could someone help me?
you need to import { finalize } from 'rxjs/operators';
your videos are great!!! but they're just a little too fast for me. if you showed every step, start to finish, I think it'd make it all a bit more clear
Hey Jeff can you make video about user authentication
any chance for react version?
I always had an issue saving the full download URL in my document, what if I changed the bucket or did anything that can change the url..what I did basically is save the image path for example test/filename-timestamp.jpg. Then I created a component to get the url asynchronously every time I need to show the photo .. I wonder if that will cost more than your approach.. any recommendations?
Saving the downloadURL is just a convenience. In your frontend code you may want to write a handler for img errors can get the current url based on the image path and updated it in the db. www.w3schools.com/jsref/event_onerror.asp
Fireship - AngularFirebase Handling error is a must as you said, my point is about saving the full URL,, based on my background saving full url with domain is not a good practice,, what if you changed the domain,, like recently I’ve changed my website domain from thetrustauctions.com to thetrustauction.com,,, but it didn’t affect mu files because I am saving the path without domain ,, and I am getting the image url when image is loading ... what do U think :thinking_face:??? Will that be costly?? Because every time I wanna show a photo I am calling the getImageUrl method ,, then showing the image
Fireship - AngularFirebase and one more thing I am generating 4 thumbs from every photo,, so if I have 10 photos as an document photos, I’ll need to have 50 records,, but instead by saving only the path I am building the url with the required thumb.. the thing is I need to know if what I am doing is efficient and effective
how you remove the prefix of to just
i stuck in this phase
I think it's in "selector" section of your @Component
in your angular.json file in prefix section remove the default 'app' prefix and all your generated components will be without it
More flutter tuts comming soon ?
Yes, many more. I might not get one out until next week tho. Next up is a vid about publishing a PWA to google play via trusted web activities.
OMG .. how can we follow all those upcoming updates on frameworks .. libraries while working a full time 😢
your tutorials can be a bit confusing especially when we can't see your folder/file structure.
Also the editing style is way too fast for me... I always get higher stress and anxiety when watching! I feel like he tries to cram in 30 minutes of coding into under 10 minutes, but the end result is it takes me 30 minutes anyway because of all the pausing and rewinding... plus the anxiety. But regardless, good channel and I'm still learning a lot. :)
i want request about multiple upload image use flutter php mysql. please!!!!!
first!
🥇 gold
Can I get your vs-code extension list, please ?
Is your demo *really* that weighted toward Angular? It's just unfortunate, because I love your teaching style, but I don't use Angular, and really nobody I know that doesn't work on Enterprise stuff uses Angular.
Anyone want to translate this into vue for me? Lol