Like how you break down the code into smaller sections at the start and then walkthrough what the code does. Makes it very straightforward to follow. Thanks Faran, really useful content.
oh, I just listened it again and yes the background noise is awkward. I dont know what happened as far as I remembered I reviewed it, it wasn't that bad but now it is. Sorry about that weird background noise.
this is great tutorial but i have a problem with req.file.path in ./routes/user.js there is error " Cannot read properties of undefined (reading 'path')" while trying to testing upload with postman and i already compared my backend with yours but i still got an error with path. so what should i do ??
thanks a lot Farhan, I was stressed about this feature before the final year project presentation, as only this image uploading end point was giving me issues, seeing your video was lot helpful, it solved the issue.💯👍
great video man but im getting this error Cannot read properties of undefined (reading 'uploader') and i copied everthing from your github and tried everthing and nothing will make it work
Thanks... at the beginning i had problems to consume the API, but was for postman (I dont'n knew why but I sent my request from "Insomnia" and it worked nice)
I found what was an issue , properly you are using import instead of require if course no problem , but it you notice in his code, he used after require("cloudinary").V2 and if you don't use v2, you will got this error so the code will become : . const result = await Cloudinary.v2.uploader.upload(req.file.path) . and you need to set the right configuration before this request: . Cloudinary.v2.config({ cloud_name: process.env.CLOUD_NAME, api_key: process.env.CLOUD_API_KEY, api_secret: process.env.CLOUD_API_SECRET }) . and that's will solve it 100%
A question regarding the secure_url property. Do we need to store that also in the database so when working on the front end we can use that to display the image?
Hi, I followed your code, but I got this error message TypeError: Cannot read properties of undefined (reading 'path') Can I replace req.file.path with req.body.image ? Because, when I log req.file or req.file.path, it returned undefined. I already compare my backend code with your backend code. However, in the frontend side, I didn't follow your code because I use react hook form and next js. What should I do to tackle this error? Thank you...
@@farhanfarooq I think so, I just tried with postman and req.file.path works... Do you have any reference how to upload image/file with react hook form?
When creating the cloudinary account which product did you select? Options are: - Programmable Media for Image and video API - Digital Asset Management for creation and collaboration - Media Optimizer for performance and delivery
@@farhanfarooq from your tutorial, you uploaded a single image using upload.single(). It worked for me, but am trying upload.array() for multiple files and it's not working.
Should we pay to use mongodb? In free there will only give 500 mb and if our data will cross 500mb then at that time we should pay or not? Please reply😊 Thank you😍
500mb is alot of space if you are not storing binary data / images within mongodb, anyway its upto you if you want to continue with mongo then upgrade your plan
@@farhanfarooq in our real project, it will be good to use mongoDB as a free package. Instead of paying, does have any method to use unlimited storage mongoDB?
For anyone wondering which name to provide on upload.single(name) , if trying to make an asynchronous request for an image upload with axios, fetch or w.e library, u should provide the same name which you declare on FormData object for the image field! For example on js: const uploadImage = ()=> { const imageFile = document.querySelector('input[type="file"]).files[0] const formData = new FormData() formData.push("image", imageFile) // u need to give the name "image" on upload.single("image") on multer! const response = await fetch("localhost:3000/upload", { method:"POST", body:formData} // u may need additional options here like headers cors etc) const data = await response .json() } Sorry for my bad english! I hope i helped!
Like how you break down the code into smaller sections at the start and then walkthrough what the code does. Makes it very straightforward to follow. Thanks Faran, really useful content.
Perfect! Thank you.
Saved me one-month headache, thanks so much
You're welcome!
After 3 weeks and several courses, your video helped fix my code in 30 mins even though its 2 years old. Thnak you very very much.
Really nice video. I don't why it has low view count. This video is awesome. Thank YOu so much and keep doing the great work
This is exactly that what i'm trying to do and searching last 15 to 20 day's.. Thanks a lot......
This is a really good tutorial in less than 30 mins. I hope you get a better microphone for your recording sessions. Thank you very much Farooq.
oh, I just listened it again and yes the background noise is awkward. I dont know what happened as far as I remembered I reviewed it, it wasn't that bad but now it is. Sorry about that weird background noise.
this video is very helpful.. Thanks a lot sir.. you really saved me today...
Liked and Subscribed !!! Thanks Farooq for such a detailed tutorial.
Hi. I need a tutorial for cloudinary +Nodejs update multiple images❓❓❓❓❓❓
this is great tutorial but i have a problem with req.file.path in ./routes/user.js there is error " Cannot read properties of undefined (reading 'path')" while trying to testing upload with postman and i already compared my backend with yours but i still got an error with path. so what should i do ??
thanks a lot Farhan, I was stressed about this feature before the final year project presentation, as only this image uploading end point was giving me issues, seeing your video was lot helpful, it solved the issue.💯👍
Such a grate video! Thanks for your effort.
one of the best video of file upload
thanks a lot man, i've tried multer w/ cloudinary for 4 days to no avail, but your video solve it.
Hello sir i am store multi image in cloudnary how can store
great video man but im getting this error Cannot read properties of undefined (reading 'uploader')
and i copied everthing from your github and tried everthing and nothing will make it work
Thanks... at the beginning i had problems to consume the API, but was for postman (I dont'n knew why but I sent my request from "Insomnia" and it worked nice)
Thank you bro. I can't express how much it helped me. I was looking for it. And got the perfect one.
you are welcome
how can i do this but upload videos instead of images?
I keep getting the error Cannot read properties of undefined (reading 'upload').. and yes i compared the code
same to me ,
did you find the solution ?
I found what was an issue , properly you are using import instead of require
if course no problem , but it you notice in his code, he used after require("cloudinary").V2
and if you don't use v2, you will got this error
so the code will become :
.
const result = await Cloudinary.v2.uploader.upload(req.file.path)
.
and you need to set the right configuration before this request:
.
Cloudinary.v2.config({
cloud_name: process.env.CLOUD_NAME,
api_key: process.env.CLOUD_API_KEY,
api_secret: process.env.CLOUD_API_SECRET
})
.
and that's will solve it 100%
How to upload multiple images
Great tutorial Farhan!...saved me a lot of research, love to see more!
Anyone plzz help me when i send the post request from postman and upload a file its shows error 404 😭
What Is a middleware?
Thanks man! You are doing great job. Just keep it.
Thank you
Help me :
Cannot read property 'path' of undefined
Link to source code is in description please compare it with your code
I am getting the same error
@@djphero1186 did you solve it
@@parassharma7041 No it didn't work..I used digital ocean instead
you saving my life bro, really appreciate it man
Your get request only gets the user, it didn’t fetch the user’s images. Does cloudinary support getting images like this with a custom REST api?
bro this showing typeerror: cannot read property 'path' of undefined multer if i use it from my own frontend
link to source code is in the description, compare your code
Hey did you find the solution
Superb! you explained very well.
it's very helpful, thank you very much Farhan
thank you bro really helpful to me in very short time period thanks a lot
upload.single() is not a function. I'm facing with this problem.
link to source code is in the description, compare your code
Is there any size limit for uploading image and also limit for image type.
I am not sure, check cloudinary
A question regarding the secure_url property. Do we need to store that also in the database so when working on the front end we can use that to display the image?
that's correct
@@farhanfarooq hey how to delete multiple images?
Can upload video In that way?
You were very helpful Sir , Thank you very much
Glad it helped
Your video help me alot I was trying to upload image using mongodb buffer and use it in frontend but I failed.
Glad it worked for you
@@farhanfarooq bro can we upload image in mongodb and directly convert into base64 in front end
@@Ravi-yk3oy yes
Hi, I followed your code, but I got this error message
TypeError: Cannot read properties of undefined (reading 'path')
Can I replace req.file.path with req.body.image ?
Because, when I log req.file or req.file.path, it returned undefined.
I already compare my backend code with your backend code.
However, in the frontend side, I didn't follow your code because I use react hook form and next js.
What should I do to tackle this error?
Thank you...
try to send request using postman and do follow the video such as field names, if it work then problem is with your frontend
@@farhanfarooq I think so, I just tried with postman and req.file.path works... Do you have any reference how to upload image/file with react hook form?
Great tutorial, you saved my life xD
Great Tutorial !
Thanks Bro you help me a lot 🙏🙏🙏🙏🙏🙏🙏
You are welcome
Great video! what if we need to upload multiple images? can you make a video for that part? Thanks!
Also need this too
just change upload.single() with upload.array('images', 4) for example 4 images
Hi
How do I use this to upload videos as well?
just change allowed file types in utils/multer.js the rest should work for videos as well
i have a problem --can you helpme please?---------->> TypeError : Cannot read property 'path' of undefined
Please compare your code with the source code, link is in description
thank you for this video 😊
nice tutorial bro, so helpful
Great work! You are unbelievable!
Great work. The content was benefitial and wish for more of the same
Thanks a lot! it was very helpful!
When creating the cloudinary account which product did you select? Options are:
- Programmable Media for Image and video API
- Digital Asset Management for creation and collaboration
- Media Optimizer for performance and delivery
1st one
thank you so much, Farhan. nice
Thanks for the video,
A quick question
can we upload pdf files to cloudinary?
give it a try
Am having issues uploading multiple images. Can you help?
Whats the problem?
@@farhanfarooq from your tutorial, you uploaded a single image using upload.single(). It worked for me, but am trying upload.array() for multiple files and it's not working.
check the multer's doc. You will find example of uploading multiple images
@@farhanfarooq wow thanks
@@wilsonchinedu813 were you able to do this, if yes, mind sharing how?
been trying to do it but i keep getting an error
thanks
thanks for the tutorial. 🇧🇷
Thank you so much! It helped me alot.
Thank you so much..You helped me😍😍
You're the best
Thank you for this
love from indonesia 🇮🇩
iya
thanks alot, other than no words
this is the code used in my website
Thank you very much! new subscriber!
Nice but is there, front end code also??
no just backend, I am not sure but may be in future I will create a video to integrate this with frontend
here is the frontend: ua-cam.com/video/JeJ2QnVYyoA/v-deo.html
you're great!! gave you a susbcribe, looking forward to watch more of your videos!
amazing!
I wish you had one where you merge with frontend
Its already available on this channel, here you go ua-cam.com/video/JeJ2QnVYyoA/v-deo.html
@@farhanfarooq thanks
Thanks brother
Amazing
Perfect it is working
thank you so much bro
Thank you so much.
Should we pay to use mongodb?
In free there will only give 500 mb and if our data will cross 500mb then at that time we should pay or not?
Please reply😊
Thank you😍
500mb is alot of space if you are not storing binary data / images within mongodb, anyway its upto you if you want to continue with mongo then upgrade your plan
@@farhanfarooq in our real project, it will be good to use mongoDB as a free package.
Instead of paying, does have any method to use unlimited storage mongoDB?
:D I dont know
very nice video...I must say
TY!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! i love so much 🤣
Thank you
Welcome!
Finally.
Great tutorial, but I lack the basic understanding
good bro
For anyone wondering which name to provide on upload.single(name) , if trying to make an asynchronous request for an image upload with axios, fetch or w.e library, u should provide the same name which you declare on FormData object for the image field! For example on js:
const uploadImage = ()=> {
const imageFile = document.querySelector('input[type="file"]).files[0]
const formData = new FormData()
formData.push("image", imageFile) // u need to give the name "image" on upload.single("image") on multer!
const response = await fetch("localhost:3000/upload", { method:"POST", body:formData} // u may need additional options here like headers cors etc)
const data = await response .json()
}
Sorry for my bad english! I hope i helped!
Thank you for this.
Amazing tutorial!
Thank you