AngularFire2 Storage - File Upload Dropzone
HTML-код
- Опубликовано: 8 сен 2024
- 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/
You just cover whole 2-hour course in 10 minutes, that's called the quality 😎
Thank's my goal - Thank you!
Awesome tutorial! RUclips 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!
No one can beat you sir. You helped us lot
Thank you, happy to hear that :)
Why even go to school anymore, this was awesome! Thank you good sir!
Thank you! Traditional schools might teach you this in a few years after it becomes obsolete :P
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 RUclips.
@@MrLuc420 you are not wrong
your content is great. thank you for doing this.
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/
A nice feature would be to allow the user to order the photos, so the photos are displayed in the predefined order.
This is exactly what I am looking for bro. Thank you soooo much !!! I appreciate your work!!!
Thank you so much for saving my life
Thank you, Jeff! Super...
+Ambikesh Thanks for watching :)
Awesome!! As usual!
Thank you Patrick!
How can someone dislike this video?😃
This is great, thanks
Great as always
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)
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.
That would be great !!
Jeff, when are you going to start the sponsorship for students. I am still waiting for it. Great tutorials👏
That's definitely on my wishlist, I just need to iron out the details.
Can you do the same in flutter?
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.
In 1:27 --> What we need to put in the enviornment file??
Gifs are crazy Damnnnn
Haha. Gifs == easy way to make your videos look cooler.
Great lesson Jeff! What's this new music at the end? I love it!
Thank you! This artist does awesome work: audiojungle.net/item/digital-technology/20535333
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?
quick question what happened to the .downloadURL() method its no longer in the sdk how do we go about this kind Sir
Incredible and functional videotutorial but...How to upload multiple files with the new angularfire2 firestore support?
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/
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?
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.
Hi, Would it be possible to show how to read the images from firebase storage and display it in a different component using getDownloadURL?
Does this File Upload method work on iPhone with Mobile Safari???
What about transactions, is it possible to make the file upload and storing the path in 'photos' collection atomic ?
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!! :)
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/
How do u do this copy paste sorcery
how can I store the downloadURL to realtime database??
there is an actual person who did like this video
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 ?
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
Very precise content.Could you please share some video related to how to setup angular4 and asp.net core apps
Thanks for the suggestion, but I'm not an dot net expert so the content would probably be bad.
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.
it's works for multiple files?
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")?
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/
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.
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.
@@Fireship That is what's confusing me so much. I included the `preventDefault`. Is there anything that could cause it to be ignored?
How to upload multible images !!
my dropszone not workin bru
Cannot GET /test/1545368432185_38-dog-1.jpg
Background music ?
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
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.
2019 - any one working with angular 7 with firebase ? AngularFire2 is now AngularFire ?
did you find out? :)
Thanks. But task.downloadUrl doesn't work anymore :(. Is there any update?
import { finalize } from 'rxjs/operators';
...
// The file's download URL
this.task.snapshotChanges().pipe(
finalize(() => this.downloadURL = this.storage.ref(path).getDownloadURL())
)
.subscribe();
Nice video but can you not do that music in the end when you talking?
Yeah I will adjust that, I see what you mean watching it back now.
I think the music is a great touch, just fade it in way more so that its subtly in the BG until the outro.
downloadURL() has been deprecated!
See this to find alternatives/solutions: github.com/angular/angularfire2/issues/1649
😎
a little too fast
ng g p filesize
Your tutorial is awesome! but you are too fast! :( that is one and only problem! sorry for my bad English :(
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.
Thanks for your nice reply! I follow your written tutorial. that is awesome! Video + written tutorial
Will this work if I use it in IONIC?