AngularFire2 Storage - File Upload Dropzone

Build a file upload dropzone in Angular using the brand new storage module in AngularFire2. Learn how to easily send files from an Angular PWA to Firebase Storage. angularfirebas...
- AngularFire2 Storage: github.com/ang...
- Firebase Storage: firebase.googl...
- Angular: angular.io/

[@Anshika]

You just cover whole 2-hour course in 10 minutes, that's called the quality 😎

[@Fireship]

Thank's my goal - Thank you!

[@MrLuc420]

Awesome tutorial! KZbin needs more advanced tutorials like this. Quick and easy to understand given that you are already familiar with angular. Perfect speed to get things up and running quick!

[@codingkidda5173]

No one can beat you sir. You helped us lot

[@Fireship]

Thank you, happy to hear that :)

[@wesvdl1995]

Why even go to school anymore, this was awesome! Thank you good sir!

[@Fireship]

Thank you! Traditional schools might teach you this in a few years after it becomes obsolete :P

[@MrLuc420]

As far as coding is concerned, unless you're doing really low level (in terms of hardware) stuff, there's really no point in getting a computer science degree. You can learn everything you need much quicker on KZbin.

[@HK-sw3vi]

@@MrLuc420 you are not wrong

[@PMANOBRE]

A nice feature would be to allow the user to order the photos, so the photos are displayed in the predefined order.

[@timle9704]

your content is great. thank you for doing this.

[@waqarii]

angularfire2 is used for angular 2 application. angularfire2 is the realtime database. Firebase is the google product that provides the development (web and mobile application platform) platform for the developer with different development tools. Firebase supports realtime data store and syncing. Learn more! wuschools.com/angularfire2-npm-install-firebase-angularfire2/

[@zhenyena3151]

This is exactly what I am looking for bro. Thank you soooo much !!! I appreciate your work!!!

[@PMANOBRE]

Awesome content !! Is it in your plans to release some content: how should we structure data in firestore ? (It seems to me it's a different approach of what we are used to do it with the RTDB)

[@Fireship]

Thank you. Yeah, that topic has been in my mind - I was thinking about doing a handful of common Firestore data modeling examples like chat, follow-system, votes, etc.

[@PMANOBRE]

That would be great !!

[@ambikesh1982]

Thank you, Jeff! Super...

[@Fireship]

+Ambikesh Thanks for watching :)

[@patrickmullot73]

Awesome!! As usual!

[@Fireship]

Thank you Patrick!

[@sistemasintegrales3658]

I know you may say to use ionic... I accessed your demo hosted in firebase and in a computer it worked fine but in a smartphone the image couldn't be uploaded, the progress bar never reached 100%. Why is that?

[@SvenBudak]

Your guides are actualy the best i ever found. Thanks for this! But when i use the db.collection to add the path and size to my database. (exactly like in your video) it creates each upload 2 entries with different key but same entries. Any idea why? I try to make a avatar upload for users. You got maybe a Video in the premium memberarea that explain how i can use this file upload to add the path and size to an existing user? in thinking about become a premium member, but im not sure that i get that help that i need then. because my coding skills are really low.

[@ahmedtouzani6780]

Thank you so much for saving my life

[@razakadam74]

Jeff, when are you going to start the sponsorship for students. I am still waiting for it. Great tutorials👏

[@Fireship]

That's definitely on my wishlist, I just need to iron out the details.

[@user-gm2nz8oe7u]

In 1:27 --> What we need to put in the enviornment file??

[@hudsonkim2549]

Can you do the same in flutter?

[@michaelffasd23]

Great lesson Jeff! What's this new music at the end? I love it!

[@Fireship]

Thank you! This artist does awesome work: audiojungle.net/item/digital-technology/20535333

[@wilsondouglas1546]

quick question what happened to the .downloadURL() method its no longer in the sdk how do we go about this kind Sir

[@franciscofdez8334]

Incredible and functional videotutorial but...How to upload multiple files with the new angularfire2 firestore support?

[@waqarii]

angularfire2 is used for angular 2 application. angularfire2 is the realtime database. Firebase is the google product that provides the development (web and mobile application platform) platform for the developer with different development tools. Firebase supports realtime data store and syncing. Learn more! wuschools.com/angularfire2-npm-install-firebase-angularfire2/

[@q1qw2ww]

Great as always

[@csgokul]

Hi, Would it be possible to show how to read the images from firebase storage and display it in a different component using getDownloadURL?

[@razakadam74]

How can someone dislike this video?😃

[@carniattos]

Love this Channel so much to learn from you! I have a question: what if I wanted to auto rotate the foto based on exif data in case I'm uploading from a phone?

[@michaelffasd23]

You could read the EXIF data using github.com/exif-js/exif-js, then draw the image onto a canvas and rotate it from there.

[@ben4d85]

Does this File Upload method work on iPhone with Mobile Safari???

[@dsldsl6460]

enough! enough! enough! dude is it so hard to tell us what versions are you using ? no one in the nodejs community specifies the versions of libraries inside a specific tutorial IS IT SO HARD ?

[@Fireship]

I do actually. Almost every video on this channel has a dedicated repo, so you can find all versions here github.com/AngularFirebase/82-angularfire-storage-dropzone/blob/master/package.json

[@Hattori21]

Great and awesome tutorial!! I have a question, how can we use this firebase url images to print them on an other component? Thank you very much, and keep doing this awesome stuff!! :)

[@waqarii]

angularfire2 is used for angular 2 application. angularfire2 is the realtime database. Firebase is the google product that provides the development (web and mobile application platform) platform for the developer with different development tools. Firebase supports realtime data store and syncing. Learn more! wuschools.com/angularfire2-npm-install-firebase-angularfire2/

[@ibrahimabtula3234]

What about transactions, is it possible to make the file upload and storing the path in 'photos' collection atomic ?

[@spiritsoul128]

Great tutorial. Is there a way to upload file from file location? Let's say I have image stored in assets/imgs/img.png, what should I do then? something like this: this.storage.upload("path-file", "assets/imgs/img.png")?

[@waqarii]

angularfire2 is used for angular 2 application. angularfire2 is the realtime database. Firebase is the google product that provides the development (web and mobile application platform) platform for the developer with different development tools. Firebase supports realtime data store and syncing. Learn more! wuschools.com/angularfire2-npm-install-firebase-angularfire2/

[@jeremyglebe4050]

I know this video is almost a year old, but I'm at a loss. Every time I drag files into the dropzone, it still takes me to the images download url instead of staying in the app. I get redirected immediately.

[@Fireship]

That means you need to `preventDefault` on the event. That's already in the code in the video, but it sounds like the event is not being prevented.

[@jeremyglebe4050]

@@Fireship That is what's confusing me so much. I included the `preventDefault`. Is there anything that could cause it to be ignored?

[@gunitakon]

This is great, thanks

[@camiloandreselguetabasso2429]

how can I store the downloadURL to realtime database??

[@twoleggedcat_cs2]

How do u do this copy paste sorcery

[@chicagoboy279]

Cannot GET /test/1545368432185_38-dog-1.jpg

[@hamadykais9318]

Thanks. But task.downloadUrl doesn't work anymore :(. Is there any update?

[@Jlyons0303]

import { finalize } from 'rxjs/operators'; ... // The file's download URL this.task.snapshotChanges().pipe( finalize(() => this.downloadURL = this.storage.ref(path).getDownloadURL()) ) .subscribe();

[@Andy_Valerio]

Hi, this will not work on Chrome unless you catch the 'dragenter' and 'dragover' in the directive. @HostListener('dragenter', ['$event']) onDragEnter($event) { $event.preventDefault(); } @HostListener('dragover', ['$event']) onDragOver($event) { $event.preventDefault(); } Hope to save someone a couple of hours. Cheers

[@Fireship]

I would recommend checking out the new Angular CDK drag and drop module. It will provide better reliability for a feature like this. I will create an updated video in the future.

[@sachinmishra7692]

Very precise content.Could you please share some video related to how to setup angular4 and asp.net core apps

[@Fireship]

Thanks for the suggestion, but I'm not an dot net expert so the content would probably be bad.

[@sachinmishra7692]

Angular Firebase Is it possible to bind the nested interface object to angular4 forms ? For en example A person has name's combination with first last and middle name including address info in single interface object with angular forms.

[@taskcreations]

2019 - any one working with angular 7 with firebase ? AngularFire2 is now AngularFire ?

[@stefanbuchholz]

did you find out? :)

[@zefred999]

Will this work if I use it in IONIC?

[@kirangouds]

Gifs are crazy Damnnnn

[@Fireship]

Haha. Gifs == easy way to make your videos look cooler.

[@vcccchhh4443]

How to upload multible images !!

[@chicagoboy279]

my dropszone not workin bru

[@g6handi]

there is an actual person who did like this video

[@AhsanKhan-eb2zb]

Background music ?

[@Gozi101]

downloadURL() has been deprecated! See this to find alternatives/solutions: github.com/angular/angularfire2/issues/1649 😎

[@SycoonGaming]

Nice video but can you not do that music in the end when you talking?

[@Fireship]

Yeah I will adjust that, I see what you mean watching it back now.

[@michaelffasd23]

I think the music is a great touch, just fade it in way more so that its subtly in the BG until the outro.

[@paymankhayree8552]

a little too fast

[@fsmdeveloper6468]

Your tutorial is awesome! but you are too fast! :( that is one and only problem! sorry for my bad English :(

[@Fireship]

I hear you. I try to distill an hour worth of content into 10 minutes. I recommend slowing down the video and following with main writeup.

[@fsmdeveloper6468]

Thanks for your nice reply! I follow your written tutorial. that is awesome! Video + written tutorial

[@chicagoboy279]

ng g p filesize

[@edycarreyes99]

it's works for multiple files?