How to Upload Images to Cloudinary (using REACT JS & Node JS )

one of the most fundamental Utilities in website or back-end design is the ability to upload files or images and as a beginner and development this is one of the most complex implementation I struggled myself a lot in trying to pass an image to my back end and I can imagine someone out there probably going through the same thing that we've all went through in today's video I'm going to show you the most simplest way possible to upload files to a third-party storage I thought uploading videos and images was difficult until I discovered cloudenary cloudinery is an end-to-end image and video management solution for websites and mobile applications covering everything from video and image uploads storage manipulations optimization to delivery cloudinary has an easy to use API that allows us to upload media objects into their storage and it's very cheap I've been using their services for years and I've paid from little to nothing for their services so not only is it elegant to use but it's relatively cheap and it's easy to use so the first thing that we need to do before we continue with this video is that you need to subscribe to my channel make sure you click the Subscribe button if you've already subscribed I hope you've clicked the post notification icon and if you haven't liked this video if you enjoy it please do press the like button it helps this video to go a little bit I would I don't want to say viral but so that other people who may need this video can have access to it just like you've had access to it and then after you're done subscribing please make sure that you leave a comment in the comment section if you have any comments and then we can go to cluttery.com where is cloudy.com okay there it is go to cloudery.com and then all you just need to do is you just need to sign up it's absolutely free to sign up and then after you're done signing up you'll be redirected to your cloudview dashboard and on your Cloud Journey dashboard I want you to extract three pieces of information for me I want you to get the cloudinary name your API name and I want you to get the API key and the API secret code I want you to take those items and I want you to store them in your environment variable we're going to use them later on in our tutorial if you're not familiar with these pieces of information just go to your cloud and your dashboard like you have over here and you can see here it says product environment variables or product environment credentials rather and on your Cloud area dashboard you can just copy out this information and then put it in your environment variable and then you are done then after you're doing that you're done doing that you can just create a note project if you've watched our previous video we were doing um a video that shows us how to send emails through react.js so do make sure to check that out we were just showing you how to send emails through react.js and node.js and we've created a node application over here so just use npm init to just create a simple node application and inside that node application I want you to install Express JS you don't need to install node mailer put in your install your course and just copy out the following exactly like I've copied it so we're going to start off with our back end and then we're going to move on to our front end so what I'm going to do here is that I'm going to create a file and I'm going to call it upload image this is where we're going to upload image using cloudinry so of course you need to install cloudinry just simply say in PMI uh Cloud generally like that you know how to do it so just some on your terminal by the way now we're going to import cloudy and this is how we import it there we go and you remember those uh key variables that we talked about earlier we're going to put them up in a configuration like this so this is where we're gonna put them in so make sure you put them in there don't put these uh what I've already put in here so you can use your process.env file in order to reference those variables so you can just like put them in directly for now and then we're going to create a couple of Ops in here a couple of parameters and then in here we're just going to create our promise that is going to allow us to upload uh information to cluttery so this is the most important file that we need to understand right here right let me try and explain it to you so this is where we are uploading our image or uploading our file that's more specifically our image to cloudery so what happens is that this is the function that takes an image so what we need to understand about this image here is that image is actually a base 60 isn't a base64 format all right so our image has been converted to base64. so for many of you who are not familiar with base64 b64 is a group of similar binary to text encoding schemes that represent binary data in an ASCII string format by translating it into a Radix 64 representation and if you have no idea what I just said I'm pretty sure you're not the only one so what base64 is is that let's say you have an image right and it just simply takes the image and it sort of encodes it into a sort of a sequence of characters so that if you take those characters and you put them anyway those characters will form an image let me give you an example that we have over I believe here so you can see this image that you have over here this is the base64 path so this image has been translated or encoded into this sequence of characters so if we were to take this sequence of character is even if we don't have Internet we will be able to access this file or will be able to access yeah we'll be able to access this image that you see over here because it's been simply translated into a sequence of strings so that represent this image that we have over here so this is what our Cloud genery function takes in it takes in this encoded message that you see over here and it takes in that path or it takes in that code and it uses that code to upload our image into the closenary storage and then after it is done uploading our image into the legendary storage what it simply does it gives us a secure URL or a reference point that allows us to actually access the image so if we have we successfully access or we successfully retrieve a secure URL we can resolve but if there's an error message then we reject so this is a simple promise as you already know how to use promises nothing too difficult now we need to take this method that we've created over here and then we need to carry it down to the main file so we're going to create an API a post API and we're just going to call it upload image as well we're going to capture our request and response variables and what we're going to do is that we're going to reference that method upload image make sure it has a tendency of acting up so just make sure you say upload image.js and then inside of here we're going to extract our base64 from the body object and we're just going to say we're also going to call it image and then just kind of make our then response statements so there is our API so if we've successfully uploaded an image we'll be able to respond with the URL and if we don't we'll be able to respond with an error message that says the same thing so make sure that you've actually started your okay there we go it seems to have a problem over here okay we need to replace our API information we're going to do that momentarily all right so I think we've fixed that error if we go back to our server you can see that our server is running perfectly so now we need to go to our front end but we're done with our server the server aspect of our project we need to go to the client now go to CRC and components just create a file also call it I think upload image as well upload ms.jsx all right that should do now before we do anything we need to create a couple of states so we're going to create I'm going to say loading set loading that I'm going to say false so the reason why we have the state is that each time we're actually uploading our image it's going to take a while until the image is successfully uploaded so we need to indicate to the user that we're actually in the process of uploading our image so we're going to use the state to do such now we're going to have another state we're going to call URL and this is going to store the address that we get from our method so inside we're going to create first of all the upload tag or the uploading component uh we're actually going to create a function called uploading upload input so we've actually created this with Tailwind CSS all right and so what we need to do is that we need to actually put it in here upload and put like that maybe we need to put it inside of our app.js so that we can see how everything looks all right everything looks great except we don't have a header so we might want to put up a header okay that should suffice and what we need to do is that each time um that we have the URL the URL is ready we need to tell the user that the image is ready so this is how we're going to do it we're going to use that state to say if there's a URL then we need to put up an a tag that actually tells the user that their image is ready to be downloaded and now we're going to implement that loader functionality as well so whenever loader is let's get rid of this for now so whenever loader is true then it's going to run and loading so actually um so what you might have not seen is that I've already saw what you might have not seen is that I've already downloaded a loading GIF and I've put it in my assets folder this is where I'm referencing it from so every time loading is true then we run our loader if not just run the upload input component all right that should do so let's see how everything looks now good so the next thing that we need to do is that we need to actually have a function by the way do not worry about this I'm going to put the source code in the description box but I have a tendency of forgetting if I do please remind me in the comment section um I'm going to put a function that allows us to convert our file information to base64. there's our function because we need to because this input over here this input tag over here whenever we upload something it gives us the information about the file so we need to find a way to actually convert that information to base64. so we're going to use that function that I've already put up down there and what we need now is a function that actually uploads the image to technology and this is it right here upload image file so let me explain a bit what happens here we get the event information and inside the event information we get the information about the file so and then we take the file information and we convert it to base64. while we're doing that we actually need to set the loader to true to show the user that we're in the process of uploading the image to cloudinery and now we use axios I wonder if I've imported excuse at the top okay that should do I think maybe I should just take this and put it at the very top so that they're just next to each other I would rather just like put it differently so that it's not under one component but for the purposes of this tutorial we're just going to mess things around so we use axios remember we created a post request so we're using the post request in order to get or pass in our base64 path and then after that it's going to give us the data or the URL and we are able to alert the user that the image has been sent in successfully or uploaded successfully and then after that we just turn the load off if there's any errors we just console log the errors so I think this should work but I think we're not done yet because we need to attach this method somewhere and we're going to attach it to this input tag that you see over here I'm going to touch it to on change and then we're just going to put it here what is it called upload image Okay so I'm just sure that I have the right wording okay it is the recording okay so this on change function is actually going to feed us with the information about the file and we're going to feed that information to our post request inside of our backend remember this is the post request that we're communicating with or that we're using in order to send that file so the only thing that is left to do here is to actually test this functionality and see if it works accordingly all right so let's do it let's go to our application and then click over here to upload let's pick a much more simpler file so let's how about this one okay let's click there and then we say open and there's there's our loader and you can see it says image uploaded successfully and the beauty of it all is that it gives us the link we're able to click here and we're able to actually access our image oh how amazing is that and this is our link that allows us to actually access that image right so let's try it again with a different image how about maybe this one right here yeah let's do that click open you can see it is loading and then it says image uploaded successfully and it gives us the link so let's press the link and there you can see our image being successfully uploaded to cloudinery you can even go to cloudnary to see like a a list of all the images that you've actually uploaded that'll be cool all right so I think that is it for today's tutorial I would like to thank you so much for watching make sure that you have liked this video if you've enjoyed um and if there's anything confusing just make sure that you leave your comments in the comment section and yeah make sure that you subscribe and if you have subscribed click the Bell icon so that you're notified each time I post a video other than that thank you so much for watching I will see you next time on coding

Channel: Koding 101

Views: 13,326

Keywords:

Id: 3o1Z5N9TeuQ

Length: 16min 57sec (1017 seconds)

Published: Thu Dec 01 2022