That's the problem with many educational content. It takes waaaaay too long and therefore becomes boring. Then you kinda switch off and you might fail your year. Pro tip: Go your path and work ahead on your own. Your time is precious. Or it is the opposite, you have too many to do in a short time span. You switch off, but that's much more understandable. Pro tip : You picked software development. In other words you decided to be a slave and have no free time for a few years until you get a real decent skill. Don't complain and cancel any dates or outing at all. Buy shackles and chains. STFU and code. The next hard earned money shall be invested in a whipping machine that will force you to code 1441 minutes a day.
last night i was thinking of how to make a react app which allows users to upload images and videos and access them through some backend like firebase. and today you upload this. you are a god maximilian. 😘😘
I have purchased the course on Reactjs by Max sir on Udemy but I had my internship so was not able to complete it (will complete it soon) and was only able to do it till Deep Dive on React Components and Lifecycle Hooks which is chapter 8 btw. I really liked the way Max sir taught, firstly I used to think why is he giving such a deep knowledge of everything but trust me it is all worth it and now I am having a good time in my internship. But today I was struck on adding a file upload functionality and I was searching everywhere, be it react documentation, StackOverflow or youtube and then I came across this video, I was thinking that if only I would have completed the course it would have been much easier for me and when I opened this video I had my head down and as I heard the voice I thought to myself that's a voice I remember very well and when I looked up it was our one and only lifesaver Max sir once again for the rescue. Thank u very much, sir.
This is fantastic. Thank you so much for the incredibly concise explanation. You have a skill to explain things everyone is asking in their heads as you're going through. Truly appreciated! I "smashed" that like button and subscribed!
Thanks Max for this video. I was stuck for a couple days on how to upload pictures in a MERN environment and this helped push me to the finished line along with Traversey Media.
Thanks maximilian, you are the best , i have purchased the react js and react native courses that you have on udemy and i can say that both are amazing you are a really great teacher.
Everything you need to save the image to a folder in Node and store the link to that image in Mongo is in his REST API series - specifically this video: ua-cam.com/video/srPXMt1Q0nY/v-deo.html. Run an axios.get() and pass in the retrieved localhost url into an img tag, and the browser will output the image.
@@МихаилКожевников-м6ь one should never store a static file into a Database. That's a bad design. Always store files on could storage and store the link to that file into your DB.
@@chirayurathi7942 never worked with Firebase. But on AWS S3, one need to create buckets and folders. The file is uploaded into those. And a URL is created according to your zone and the bucket name.
God, this guy is so good! I have his accelerated js course on udemy.. looking forward to get started on it. The understanding of simplicity and forward motion that is easy to follow, leapfrogs him ahead of other teachers. He does things in 2 minutes that others have trouble explaining/showing in 10 minutes. Max efficiency :)
Wow, thank you very very much for your absolutely fantastic feedback and for your support! This honestly means a lot to me as I really try my best to explain things as simple and as complete as possible :)
how can I get the URL or URI of the image ?? I want to upload an image using URI but the file object has no URI in it . How can i get the URI of the file .
How would you do this in Typescript? Specifically, how would you initialize the selected file? It says it takes a Blob but I don't know how to initialize that.
Great Video!! I am using a functional component instead of class components. How do I do that last part where you attached the ref to the input element, and call it via the button?
hey max if i'm using multer in the backend do I still need to send the file like this? Will it work for my rest api. Also i'm from your Node js course.
Thanks Maximillian, very handy video. I was wondering if you can also store more than just the image on Firebase. Say for instance a caption and user comments, or is it better to store that information in a local database?
Thanks you so much for the tutorial. so i just started learning react js, graphql, and other tools too..I have question, can i get the url response from firebase after i uploaded my image? So i want my image uploaded to firebase, and get a return url that will saved to my graphql ( hasura ).
thanks a lot max, you're a life saver. I have purchased your courses on udemy also and they are my favorite out of all the ones I bought. Will you consider doing a course on material-ui?
Hey im struggling with uploading a video for an important project, I assume it has to be the same, but it doesnt work. Do you have any kind of experience or help to point in right direction?
Instead of uploading the image to a server like firebase what if we wanted to pass the image to tensorflow function for prediction. How will we setup the function please.
you can use the react-dropzone package github.com/react-dropzone/react-dropzone fileSelectHandler = files => { this.setState({ selectedFIle: files[0] )} } inside the render method use:
Trying to build a react app. Wondering if I should use firebase as my backend (I've only used MongoDb). Need to create users, have user's chat, and upload photos.Thoughts?
Hi Max, I have been waited for this. Great video as usual and I'm looking for a video on Google maps and React, If you can do a one that would be really helpful.
It's pretty simple enough if you have a cloud function tied to cloud storage but how would you create an API for file uploading in a simple Express app? Would you rewrite the file in chunks to the static folder?
This is fantastic, after searching for half a day you were the best resource I found and told me even more than I needed! Thank you
I've made a react component for file upload with progress, check this out if possible www.bytehub.dev/components/animated-file-upload
ikr!! pick file option was cool which i wasnt expecting lol
The content what you taught under 10 minutes, is what my professors teach in 3 months. SALUTE to you Max, I am so proud of learning from you.
agree
my professors teach in 3 months. Oh my Godness
That's the problem with many educational content. It takes waaaaay too long and therefore becomes boring. Then you kinda switch off and you might fail your year. Pro tip: Go your path and work ahead on your own. Your time is precious.
Or it is the opposite, you have too many to do in a short time span. You switch off, but that's much more understandable. Pro tip : You picked software development. In other words you decided to be a slave and have no free time for a few years until you get a real decent skill. Don't complain and cancel any dates or outing at all. Buy shackles and chains. STFU and code. The next hard earned money shall be invested in a whipping machine that will force you to code 1441 minutes a day.
If that's the case, you have terrible professors.
last night i was thinking of how to make a react app which allows users to upload images and videos and access them through some backend like firebase. and today you upload this. you are a god maximilian. 😘😘
Thank you very very much, makes me really happy to read that the video came at the right point in time for you :)
I have purchased the course on Reactjs by Max sir on Udemy but I had my internship so was not able to complete it (will complete it soon) and was only able to do it till Deep Dive on React Components and Lifecycle Hooks which is chapter 8 btw. I really liked the way Max sir taught, firstly I used to think why is he giving such a deep knowledge of everything but trust me it is all worth it and now I am having a good time in my internship. But today I was struck on adding a file upload functionality and I was searching everywhere, be it react documentation, StackOverflow or youtube and then I came across this video, I was thinking that if only I would have completed the course it would have been much easier for me and when I opened this video I had my head down and as I heard the voice I thought to myself that's a voice I remember very well and when I looked up it was our one and only lifesaver Max sir once again for the rescue. Thank u very much, sir.
2:46 onClick : amazing Voice !!! Seriously thanks a lot for this video !
You need to upload this video in your UDEMY course of reactjs
This is fantastic. Thank you so much for the incredibly concise explanation. You have a skill to explain things everyone is asking in their heads as you're going through. Truly appreciated! I "smashed" that like button and subscribed!
Wow, it's really fantastic to get such an incredible feedback! Thanks a lot for that, very happy to have you on board of the channel :)
What happends if I'm storing my image in the backend. How do I get that image? With an axios?
Awesome video by the way.
I think that you can store the link of the image in the backend
get axios buddy
Great tutorial video! Both audio, instructions and video quality are crispy clear! Thank you!
Thank you!! You are the best teacher I have had!
You are excellent! How simply you explained the task.
That's so great to read Ajay, thank you very much!
Was so useful, esp that input hiding part. Thank you so much Maximilian! You Rock!
Thanks Max for this video. I was stuck for a couple days on how to upload pictures in a MERN environment and this helped push me to the finished line along with Traversey Media.
Thanks a lot for your comment Adrian, happy to read that the video was helpful!
man, your explanation was unbelievable clear. Thank you!
This is exactly what i need at the moment! Big thx! :)
Very happy to read that the video came at the right time Patrick, thank you for sharing this!
You're the best on UA-cam!!! You make it look so easy. Thanks for doing these videos
YOU are the best Jeiner, thanks a million for sharing this amazing feedback :)
Muchas gracias amigo! . Solo me queda felicitarte y agradecerte por tu gran labor de compartir el conocimiento. Thank you !
Thank you very much!
Finally I found what I was searching for , amazing max , Thank u so much
Thanks maximilian, you are the best , i have purchased the react js and react native courses that you have on udemy and i can say that both are amazing you are a really great teacher.
Thanks a million for your awesome feedback and for your support here and on Udemy Joud!
That's the best tuto about sending files
I love all of your React videos Max (and your Udemy class!). Thanks for putting them together!
That's so great to read, thank YOU for your support!
Great video! but how do I get the images form the server and display it on the page?
Everything you need to save the image to a folder in Node and store the link to that image in Mongo is in his REST API series - specifically this video: ua-cam.com/video/srPXMt1Q0nY/v-deo.html. Run an axios.get()
and pass in the retrieved localhost url into an img tag, and the browser will output the image.
@@earlworth not the best sollution. I prefer to store files in Mongo 'cause this approach helps me not to store files without links
@@МихаилКожевников-м6ь one should never store a static file into a Database. That's a bad design. Always store files on could storage and store the link to that file into your DB.
@@puspendertanwar9378 how to get that llink after posting on firebase?
@@chirayurathi7942 never worked with Firebase. But on AWS S3, one need to create buckets and folders. The file is uploaded into those. And a URL is created according to your zone and the bucket name.
Thanks for this Max. Another great tutorial. Could you do a tutorial on uploading an image file to Amazon S3 from Next JS?
I learnt node and react with redux from you. thanks a lot
I really like how you explain things. Thank you.
Thanks man. It helped me a lot
Thank you so much!! This helped me a lot!
Thank you so much, always super clear!
Thank you for explaining in detail .. Great concise video!
Learned a lot from your video. Thanks
So great to read that Chao, thank you for your comment!
You covered everything and explained it very well 👌
Thank you so much. This really provided a great help.
Thank you man , for this content☺️.
Nowadays it become very hard to found an ideal resource .
God, this guy is so good! I have his accelerated js course on udemy.. looking forward to get started on it. The understanding of simplicity and forward motion that is easy to follow, leapfrogs him ahead of other teachers. He does things in 2 minutes that others have trouble explaining/showing in 10 minutes. Max efficiency :)
Wow, thank you very very much for your absolutely fantastic feedback and for your support! This honestly means a lot to me as I really try my best to explain things as simple and as complete as possible :)
Quality resources should be praised. I am just writing the truth :)
Thanks for the great tutorial! How would you set this up with multiple files in an array?
Great video! thanks a lot. I have a question: How do I retrieve the downloadURL after it was successfully uploaded?
send it in the response
how can I get the URL or URI of the image ??
I want to upload an image using URI but the file object has no URI in it .
How can i get the URI of the file .
Nohow, this is private user information. You can use absolute path to file only, where you're get filename
This video was a great help! Thank you!
Finally easy video, that covers only basics ;) thanks.
Happy to read that, thanks a lot for your comment!
Great video! I was able to use formidable to parse the req.files in my Express server.
Thank you so much. A very kind and nice video. Really helpful!!! LOVE IT.
Awesome to read that, thanks a lot for your comment!
Hi Max, Thank you so much for this video 🙏! Can you please let me know which video is the one that shows how to create a Firebase endpoint ?
Thank you very much Max. That was great
Thank you so much, want more of this made easy series please !!!!
Happy to read that you like it Ashutosh, I might create more videos like that in the future.
Very helpful! Thanks you so much.
this is just superb. Thank you.
Problem Solved!!
You deserve more than 611k subscribers!!
Wish you all success brother...
Love you💖💖💖💖
💖 From India.
Thanks for the tutorial, I used fetch method for calling API instead of axios but still your tutorial helped a lot.
Thank you for sharing your knowledge, this is exacly what I need.
Good job man, Your are helpful like always
Thank you so much man. You are really amazing
You are a life saviour man
Love you Max, you are genuine guy. Upload such a video. Good Content. Very useful. Also please to upload similar content with Function component.
How would you do this in Typescript? Specifically, how would you initialize the selected file? It says it takes a Blob but I don't know how to initialize that.
Thank you. You are the best!
AHHH the Mini Max! I missed you :P Great video again! :)
Here I am! ;) Happy to hear you liked this video!
Really appreciate this tutorial. Can you do one tutorial where you can upload image to AWS S3? It would be awesome. Thanks again
Same. Need help on this
You are doing really great contents. Thank you !
Great to read that you like it Nezih, thank YOU for your comment :)
Highly informative content . Thanks
Thanks alot for this tutorial
Awesome content indeed. Thanks you so much.
Great great great! thank you very much!
Hi Max, thank you so much for your vuejs course on udemy! That's definitely the best course I've ever had. Thank you!
Really great to read that you like the course, thank you very much for sharing this :)
What a F*CKING AMAZING video ❤
Simple and straight to the point !
It was really excellent video sir.
Is their any other video we connecting react image file with firestore
Wet food explanation! Thank you!
Great Video!!
I am using a functional component instead of class components. How do I do that last part where you attached the ref to the input element, and call it via the button?
Hii ! would you please upload video about how to upload image with name ,price something like this as a form using MERN using mongo atlas
hey max if i'm using multer in the backend do I still need to send the file like this? Will it work for my rest api. Also i'm from your Node js course.
This is a great video Thank you so much!
Thanks Maximillian, very handy video. I was wondering if you can also store more than just the image on Firebase. Say for instance a caption and user comments, or is it better to store that information in a local database?
Of course you can
Thanks you so much for the tutorial. so i just started learning react js, graphql, and other tools too..I have question, can i get the url response from firebase after i uploaded my image? So i want my image uploaded to firebase, and get a return url that will saved to my graphql ( hasura ).
Legend, thank you bro.
Thank you! You're great
Didn't see ur video yet, but I'm pretty sure - I'll like it =)
Thanks Oleg, I hope that you will also like it after you saw it ;)
thanks a lot max, you're a life saver. I have purchased your courses on udemy also and they are my favorite out of all the ones I bought.
Will you consider doing a course on material-ui?
Thanks a lot for your support Bob! Got no such plans at the moment but this can always change in the future.
does this work even with word docs or excel sheets?
Great fan of you academind
just what I was looking for!
magic
Thank you so much!
So we do not need the files path to store the file/s in the Database??
Thank you for your video... I have a question, what can I do to reduce the image size (quality) before upload?
Hey man i have multiple input fields for image upload how do i distinguish them to set state to different types of files ?
Hey im struggling with uploading a video for an important project, I assume it has to be the same, but it doesnt work. Do you have any kind of experience or help to point in right direction?
pretty cool , was learning react via your udemy course, this looks really handy
Happy to read that and great to have you on board here and in the Udemy course!
Instead of uploading the image to a server like firebase what if we wanted to pass the image to tensorflow function for prediction. How will we setup the function please.
Cool bro, thx a lot, your React course on Udemy is the best!
Awesome to read that, thanks a lot for your comment and your support here and on Udemy!
Hi , thanks for the vedio but i‘v a question , how can i store the image in a folder after we upload it
Is there a way to show the image right after we have selected a file for upload?
Nice video, I expected to be about a drag and drop upload file, but anyway I learn a lot.
Great to hear that! Drag & Drop is also an interesting topic - I might create a video on that, too.
you can use the react-dropzone package github.com/react-dropzone/react-dropzone
fileSelectHandler = files => {
this.setState({
selectedFIle: files[0]
)}
}
inside the render method use:
Drop the image here!
and you are ready to go
Trying to build a react app. Wondering if I should use firebase as my backend (I've only used MongoDb). Need to create users, have user's chat, and upload photos.Thoughts?
How can we do same without axios? May be store files somewhere on server in folder
How to keep a file in a redux store to send it from another component? Cause store doesn't keep non-serializable data, like a file...
Hi Max Thanks for this video.
Can you please let us know how to create folder and store data into that in react front end application?
Hi Max,
I have been waited for this. Great video as usual and I'm
looking for a video on Google maps and React, If you can do a one that would be really helpful.
Thanks for your nice feedback and suggestion - great to hear you're liking it!
It's pretty simple enough if you have a cloud function tied to cloud storage but how would you create an API for file uploading in a simple Express app? Would you rewrite the file in chunks to the static folder?
How load previous images/files and delete or add more?
hi, can i use Fetch Instead of axios?
Thank you so much
fantastic!!!!!!!!!!!!!......... thanks alot