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!
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.
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.
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
@@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
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?
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?
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.
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?
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?
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 ??
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'
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
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) } };
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
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
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.
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
AWESOME tutorial...
the only improvements, in my view are,
1. could have used ES6 syntax
2. should have shown installation of cloudinary packages.
i like watching you, you are calm and talking straight to the points no laugh no shit talking thank you
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 :)
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 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!
thanks, brother!!!!
its been significant to learn from you
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.
This is what I'm looking for, Thank you James.
Yay I’m glad!
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?
thanks allot sir🙌🙌you know exactly what people want a HIGH QUALITY CONTENT
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!!!
You are awesome
Your channel needs more subscribers
I agree ;)
Thanks a lot James, a really high quality tutorial, I learned a lot
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!
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
Great video, this is what i was looking for. Thanks
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.
Thanks a lot. Keep it up bro.
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
Love the video! 🙌
Well well well! Exactly what I wanted. Thank you!
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.
Great video! Thank you from Brazil!
You’re very welcome!
Thanks for this video bro, you saved my life and got a new subscriber
Yayyyy ;)
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
thank you so much for the video. it was very useful to my project.
Thanks Bro, Really needed this
Happy to help :)
To the point, clear and concise. Thank you1
Awesome vid Dude! You saved my life!!!
how would I get the body of what was posted? So that you could access its ID or URL on the frontend
hi , :
getting this error instead of following the docs snippets, checked many times
Cannot read properties of undefined (reading 'upload')
can u help plz !!
thank for this video . I have a question , how can i upload 2 photos at the same time ??
amigo muchas grasias Exelente aprendi mucho solo tengo palabras de felicitacion y agradecimiento. Esto estaba buscando
Thanks very much James, i need this tutorial
super cool.thx.
How can I get the link of the image directly when uploaded?
great explanation
Thanks a lot! It's very useful for me!
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?
Awesome!! just what I needed
Glad to hear :)
Thank you very much. Cloudinary did not do better than you. They should pay you for this tut. Their tut is for school.
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?
thank you James.
Really, really a nice video!
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!
Awesome video, very helpful... But can I follow the same steps for video uploads?
Should be the same
Thank you, helped me a lot
How would I send from nodejs to cloudinary the size I want the img to have? Thanks for the video
Thank you very much 🙏
heyy! how to upload multiple images using same?
thanks for your video bro!
Great tutorial, thank you
any simple way to upload multiple files at once?
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 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?
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?
Hi guys, so I want to store in DB the avatar from cloudinary. Is it okay to store the public_id into MongoDB?
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 ??
Hey! how to restrict photos to be stored with width 500 and height 500 and format jpg,jpeg only?
What color theme are you using for vs code?
I think it's the best tutorial..
what's the use of fileInputState ?
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
Super ooooo super video
Thank you so mcuh sirrr
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'
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 alot
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
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?
Bro, you have a awesome VS code themes and Icon pack. Would you like to share themes and Icon pack settings :3
Thanks
Awesome Tutorial ++++++++++++++++++++++ Thank You
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?
bravo!
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
Awesome
Thanks :)
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
How do i fix : Error: Cannot find module 'cloudinary'
Did you install the library?
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 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?
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.
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
xhermo song lay gulabi khabu.thus pe chaghbu. du laie na helpfull you xug ashin ashin thanks
that bonus is no less important than the main point
Thanks a lot! It really helped me.
Thank you so much!
Thank you so much!