Thank you SOO MUCHHH! You have no idea how much this video helped me. I was stuck on how to setup cloudinary for months, and because of it i couldnt deploy my website. Thanks a million!
Bro make sure added v2 in "const cloudinary = require("cloudinary").v2" and "const result = await cloudinary.uploader.upload(file, { folder: "assets/product" }); worked for me and i was just searching for hours
MUCH appreciated James. Ran into an issue: mapping my images wouldn't render. Fix: changed my cloudinary name to contain no special characters. There is an additional step required if your cloudinary name has a special character in it (e.g. - ). simplest fix, remove special character from cloudinary, (and update the places you might have used your old cloudinary name for the new one). Maybe this will help someone in the future. cheers.
23:55 , he submitted twice and the second click got him to upload, same thing happened to me, first click shows error second click shows success, why is that happennig ??
31:35 if you are a kinda dummy like me and placed in attribute cloudName as your own name and get an error and you don't know why that happens, you just will place the same cloudName you used for the backend
hi , : getting this error instead of following the docs snippets, checked many times Cannot read properties of undefined (reading 'upload') can u help plz !!
Thanks for this tutorial! For some reason I am getting stuck at 19:30 in your video because it says my image is too large despite it being under the 50 mb limit. Thoughts?
Thank you for making this quality tutorial. I have a question. what if the form will have other user info like a profile page? the handleSbtmit and upload functions will be different. Also is there any major difference between using FileReader and FormData?
I am starting to learn to code and doing a project as a newcomer to programming and I have been stuck with this problem. Have you ever found a solution?
If you did that, you'd have to go through all the trouble of hiding your Cloudinary API keys on the front-end. Hiding your API keys on the server side is a lot easier IMO.
Unfortunately when I’m trying to fetch the image back to my UI I get a syntax error unexpected < token in Jason at position [0] does anyone know how to solve this issue?
can someone help me fix an error , strange thing hppening here ... the image is getting uploaded to cloudinary correctly but my local api server is showing error the error says 'Missing required parameter - file'
Not sure if this is just an Axios thing, but i was getting "ENAMETOOLONG" when uploading. a few days later I now know.... do this instead in your upload.js file. const uploadImage = async (imageText) => { try { const response = await Axios.post("/imageUpload", { data: imageText, headers: { "Content-type": "application.json" }, }); print("imageUploadResponse", response); } catch (error) { console.log(error) } };
how to create an API that stores values like name, ID, image URL to the DB condition the URL must be from cloudinary while uploading Everything must happen with a single button submit click How to do this?
for some reason uploadedResponse is is coming back as undefined. does anyone know how to solve this? I think the cloudinary object itself is undefined howver, when I console it outside the post request function, i can see all of its properties including uploader and upload?? not sure what my problem is.
Can someone help me fix my 404 error? Images aren't uploading to cloudinary but I have the encoded URL in the console and the image renders as the preview. I have been stuck for a very long time
You could but that would be completely open. By sending through note you could add authentication as an example. You could additionally update a piece of profile in a db if you needed to
am i missing something here? where are codes for starting point? source code at github are for finished project. i mean ok, thank you for tutorial, but starter files would be much more useful
@@JamesQQuick i have a question . In .env file ...do we have to put the values within quotes " " or without quotes . You blurred that part so it was not visible
I was uncertain of whether or not Cloudinary was going to be the direction I wanted to go in as far as image hosting in conjunction with Heroku. Thank you for this well done video, it definitely made it more approachable before pouring over more documentation.
The tutorial is awesome but I was unable to continue because this is not what I am looking for. Nobody has done a tutorial on how to upload array of images and not just a single image.
I am creating a real estate server and on the admin dashboard, they should be able to save a house back to DB with 10 images maximum. I have been able to convert all the selected images to base64 using FilleReader but when I send them back to the express server as an array my server jumps to 404 status and images are not uploaded.
AWESOME tutorial...
the only improvements, in my view are,
1. could have used ES6 syntax
2. should have shown installation of cloudinary packages.
Thank you SOO MUCHHH!
You have no idea how much this video helped me. I was stuck on how to setup cloudinary for months, and because of it i couldnt deploy my website. Thanks a million!
So glad to hear that :)
i like watching you, you are calm and talking straight to the points no laugh no shit talking thank you
This could not have been better! I love it. You've got a new sub and holy shit you deserve much more subs.
lol thank you!
I was not able to get the gallery to display using my folder as cloud name/ nor asset folder I created
Bro make sure added v2 in "const cloudinary = require("cloudinary").v2" and "const result = await cloudinary.uploader.upload(file, {
folder: "assets/product"
}); worked for me and i was just searching for hours
Thank you so much. I've been searching for two days before finding this tutorial.
Woah! I totally just met you at a MeetUp in Memphis. Thanks for doing what you do!
-Loyal New Subscriber
This is what I'm looking for, Thank you James.
Yay I’m glad!
MUCH appreciated James.
Ran into an issue: mapping my images wouldn't render. Fix: changed my cloudinary name to contain no special characters. There is an additional step required if your cloudinary name has a special character in it (e.g. - ). simplest fix, remove special character from cloudinary, (and update the places you might have used your old cloudinary name for the new one). Maybe this will help someone in the future. cheers.
How can I get the link of the image directly when uploaded?
Great video, this is a great expansion of Cloudinary's documention which I felt was a bit sparse on the Nodejs config section. Thanks James.
thank for this video . I have a question , how can i upload 2 photos at the same time ??
thanks, brother!!!!
its been significant to learn from you
You are awesome
Your channel needs more subscribers
I agree ;)
23:55 , he submitted twice and the second click got him to upload, same thing happened to me, first click shows error second click shows success, why is that happennig ??
This is a super cool video. Thanks James. I am going to rewrite this to fit into my REACT Meteor project. Cheers !
Oh cool. How fotos like meteor?
I am really happy I came across your video. Great tutorial, I learned a lot ! Thank you !
This is the first time that is see one of ur vids and u helped me a lot with this trouble ive been looking for days!, thank u so much!
Yay!!!
31:35 if you are a kinda dummy like me and placed in attribute cloudName as your own name and get an error and you don't know why that happens, you just will place the same cloudName you used for the backend
how would I get the body of what was posted? So that you could access its ID or URL on the frontend
any simple way to upload multiple files at once?
how to solve "Failed to load resource: the server responded with a status of 400 (Bad Request)" error in cloudinary
did you find a solution ?
@@itslou you sent something the server didn't accept. Could be your payload
hi , :
getting this error instead of following the docs snippets, checked many times
Cannot read properties of undefined (reading 'upload')
can u help plz !!
Thanks for this tutorial! For some reason I am getting stuck at 19:30 in your video because it says my image is too large despite it being under the 50 mb limit. Thoughts?
thanks allot sir🙌🙌you know exactly what people want a HIGH QUALITY CONTENT
Thank you for making this quality tutorial. I have a question. what if the form will have other user info like a profile page? the handleSbtmit and upload functions will be different. Also is there any major difference between using FileReader and FormData?
I am starting to learn to code and doing a project as a newcomer to programming and I have been stuck with this problem. Have you ever found a solution?
Nice tutorial, thx!
1 question: wouldn't it be better to send the image from client directly to cloudinary instead of making the step over the server?
If you did that, you'd have to go through all the trouble of hiding your Cloudinary API keys on the front-end. Hiding your API keys on the server side is a lot easier IMO.
@@bryanneuswanger9526 interesting, thx!
How would I send from nodejs to cloudinary the size I want the img to have? Thanks for the video
What color theme are you using for vs code?
heyy! how to upload multiple images using same?
Love the video! 🙌
what's the use of fileInputState ?
Thanks a lot James, a really high quality tutorial, I learned a lot
Unfortunately when I’m trying to fetch the image back to my UI I get a syntax error unexpected < token in Jason at position [0] does anyone know how to solve this issue?
Great video, this is what i was looking for. Thanks
can someone help me fix an error , strange thing hppening here ... the image is getting uploaded to cloudinary correctly but my local api server is showing error the error says
'Missing required parameter - file'
Anyone knows why am I getting a "Must supply api_key error" when requesting a post?
Have you included your api key? Lol
@@JamesQQuick Yes, I put my corresponding Cloudinary credentials in .env folder, but somehow I'm getting the error in console.log(uploadResponse)
Late, but definitely be sure that dotenv is installed locally
How do you upload multiple images?
Not sure if this is just an Axios thing, but i was getting "ENAMETOOLONG" when uploading. a few days later I now know.... do this instead in your upload.js file.
const uploadImage = async (imageText) => {
try {
const response = await Axios.post("/imageUpload", {
data: imageText,
headers: { "Content-type": "application.json" },
});
print("imageUploadResponse", response);
} catch (error) {
console.log(error)
}
};
Hi! what does the print do here?
Awesome video, very helpful... But can I follow the same steps for video uploads?
Should be the same
Great video. You don't need the './node_module' when import, 'react' its enough. it always look for the module under the node_module first.
Hey! how to restrict photos to be stored with width 500 and height 500 and format jpg,jpeg only?
how to create an API that stores values like name, ID, image URL to the DB
condition the URL must be from cloudinary while uploading
Everything must happen with a single button submit click
How to do this?
Thanks a lot. Keep it up bro.
Hi guys, so I want to store in DB the avatar from cloudinary. Is it okay to store the public_id into MongoDB?
for some reason uploadedResponse is is coming back as undefined. does anyone know how to solve this? I think the cloudinary object itself is undefined howver, when I console it outside the post request function, i can see all of its properties including uploader and upload?? not sure what my problem is.
Thanks for this video bro, you saved my life and got a new subscriber
Yayyyy ;)
Awesome vid Dude! You saved my life!!!
Thanks Bro, Really needed this
Happy to help :)
Thank you Soooooooooo much James , while watching your video i managed to upload the image to cloudinary .you are the best👍🏼💛😊
Ahh so glad to hear that!
Can someone help me fix my 404 error? Images aren't uploading to cloudinary but I have the encoded URL in the console and the image renders as the preview. I have been stuck for a very long time
Bro, you have a awesome VS code themes and Icon pack. Would you like to share themes and Icon pack settings :3
Thanks
Well well well! Exactly what I wanted. Thank you!
Great video! Thank you from Brazil!
You’re very welcome!
To the point, clear and concise. Thank you1
Hi, I want a similar thing for nextjs. Having issues with api key, secret etc config. Unsigned is working. Any help is appreciated.
Can you elaborate on the trouble you’re having?
thank you so much for the video. it was very useful to my project.
What was the purpose of node here. Couldn't we just send directly to cloudinary from the client?
You could but that would be completely open. By sending through note you could add authentication as an example. You could additionally update a piece of profile in a db if you needed to
Awesome!! just what I needed
Glad to hear :)
am i missing something here? where are codes for starting point? source code at github are for finished project. i mean ok, thank you for tutorial, but starter files would be much more useful
Thanks very much James, i need this tutorial
Thank you so much, this is exactly the video i was looking for
Yayyyyy
@@JamesQQuick i have a question . In .env file ...do we have to put the values within quotes " " or without quotes . You blurred that part so it was not visible
@@divvagg5616 Might be late to reply, but you can just put the values without quotes
How do i fix : Error: Cannot find module 'cloudinary'
Did you install the library?
Thanks a lot! It's very useful for me!
how come you didnt use this attribute on your form? enctype="multipart/form-data"
Probably because of file reader? Did you have the answer now?
But the only question i want to now
Is it secure i mean can anyone see my uploads?
Thank you very much. Cloudinary did not do better than you. They should pay you for this tut. Their tut is for school.
I tried doing it without express.urlencoded() and it runs just fine. I wonder what is that for.
it's for string and array post request. express.json() is for the object
great explanation
amigo muchas grasias Exelente aprendi mucho solo tengo palabras de felicitacion y agradecimiento. Esto estaba buscando
I was uncertain of whether or not Cloudinary was going to be the direction I wanted to go in as far as image hosting in conjunction with Heroku.
Thank you for this well done video, it definitely made it more approachable before pouring over more documentation.
Yasss! Glad you enjoyed it :)
@@JamesQQuick no seriously thank you! When I've updated my project I'll share here.
@@modern_sapien Feel free to join my discord and share there as well! discord.gg/vM2bagU
Thank you, helped me a lot
Really, really a nice video!
Great tutorial, thank you
The tutorial is awesome but I was unable to continue because this is not what I am looking for. Nobody has done a tutorial on how to upload array of images and not just a single image.
I am creating a real estate server and on the admin dashboard, they should be able to save a house back to DB with 10 images maximum. I have been able to convert all the selected images to base64 using FilleReader but when I send them back to the express server as an array my server jumps to 404 status and images are not uploaded.
thanks for your video bro!
Thank you very much 🙏
super cool.thx.
thank you James.
xhermo song lay gulabi khabu.thus pe chaghbu. du laie na helpfull you xug ashin ashin thanks
Thank you so mcuh sirrr
Super ooooo super video
I think it's the best tutorial..
thanks alot
bravo!
Awesome
Thanks :)
Awesome Tutorial ++++++++++++++++++++++ Thank You
that bonus is no less important than the main point
File Stack
Thanks a lot! It really helped me.
Thank you so much!
Thank you so much!