Cloudinary Image Upload with Nodejs and React

are you looking for an awesome place to store your media your videos and your images and do transformations and optimizations well look no further than cloud nari in this video I'm gonna show you how to build an image upload to cloud nari using react and node so let's go ahead and dive on in so as we get started here I'm on the cloud nari calm the homepage here for cog nari and just want to again give a real brief intro into what cloud nari is and and why you're probably interested in it as web developers we have sites with media images and video and how quickly those things come in to our website in terms of being loaded is really really important so a service like cloud nari is going to not only just kind of host your your media your videos and your image images it'll do the asset management part it would do image manipulation and optimization as well so you can do transformations to different sizes scale it up and down you can do optimization of just like kind of compressing your file sizes all that really cool stuff and this is really key for a performant website where you want these things to load really really quickly so you want to pull in the most appropriate file size for example you don't want to pull in a really big image for a mobile site you want to pull in a scale down version of that so cloudy areas gonna be able to do all of that stuff it's super super cool and I'm really excited to create this video about it today so what we're gonna do is we're going to create this image upload demo here so we can choose an image and let's just grab this air table logo we can upload this or it'll show the preview here then we'll click Submit and they'll show us that it got uploaded successfully and then as a little bonus we'll go in and show the the gallery here just to show that image is being pulled in and shout out to two of my friends here for inadvertently being involved will Johnson from our learning quick episode a couple of weeks ago and then Chris from Chris long or Chris long code from digitalocean who is just kind of on here because I had a screenshot of him for testing so anyway thanks for being the video even though you didn't have any choice so I'm gonna stop the demo of this running and let's scroll over and look at what we have so inside of our code we've got two different folders a front end and a back end and you'll have access to this in the link below for the github repo so don't worry about that and I'm gonna go ahead and run the front end so all we've got are two different pages that are stubbed out the gallery and the upload Paige so here's the home or the gallery and then the upload page and we're gonna add all the functionality that we need for those and then also in our server function our server folder we don't actually have anything yet so that's what we will do in a second so let's go ahead and get this into the server directory and we'll create that server file here in a minute and get ready to take care of all this stuff so let's close out the stuff we don't need let's go into the upload component and let's go ahead and start to stub this out so what we're gonna need is a form and no action here and inside of this form we're going to need an input and this will be a type file so actually image uploads just in regular HTML forms is a little bit new to me but that's what we're gonna work with so we'll have a name of image and then we'll want to have a non change value that we'll set in a second and then a value so we want to actually bind this to some piece of data and react and then let's use a class name a form input now a lot of these classes that we use are going to come from the base CSS so this is included in here I'm not going to cover the CSS it's just some basic styling to make this thing not look terrible so we've got those things there and then we want to have a submit button as well so let's do a button and class name BTN and then a type of button and let's just say submit this image so let's stub out let's say on change will be handle input or handle file input change so this is going to be a function that will define up here so Kant's handle file input change equals this arrow function here and we're gonna need to keep state keep a couple things here in the state so we're gonna need the actual file input itself so we'll have Kant's and then file input state and set file input state equals use States now we're obviously using or maybe not obviously we're using hooks inside of react so what this is basically saying is what I call this you state function that I need to import here when I call this in state or you state function it's gonna return back in a ray that has two things in it the actual value that I can reference inside of my functional component and then the function I can call to update that thing all right so there's that and then let's also have another one for selected file and then set selected file and we can call you state with this one too all right so that looks good for now and then inside of our file change so when the user actually changes something we want to grab the file out of that input so the way this works is you get the file from a target dot files' so if you were doing a multi upload you could go through each one of the files in this we're just grabbing one file all right so it looks good so let's save that and as this running looks like oh we've got our value is missing and we want this to be our file input state all right and and I've got some weird intellisense happen here where it populated the the node modules folder that's not actually what we want we just want to import that from react sorry about that so let's go back to the site and we see we've got our form here and I don't think we're logging anything yet but if we choose an image we can maybe let's come into a picture of me so I'm not using pictures of other people here's a picture of me at a wedding and we're not actually logging anything yet but what we should be doing is keeping track of that selected file so we want to actually handle that and we want to do a preview of this image so that the user can see what what's going on so let's call a function called preview file and we'll pass in that file and let's call preview file and it takes in a file and this is just going to show the user here's the thing that that you selected so gonna create a reader which is a file reader or a variable called reader which is a file reader and these are just built in JavaScript API and we'll say reader dot read as data URL and basically what this is gonna do is convert that image to a URL and we'll pass our sorry just a string basically and we'll pass in the file and then we pass or we tell the onload in property to be this function where we will set the preview source and I think that's another piece of state we need to have up here so let's do Const and set preview source preview source all right so we'll get that one they are lit set the preview source to the reader dot result all right so then what we want to do is actually display that thing so if it's set we want to actually display this let's come down here below the form and let's say if there is a preview source and we do that with this little and trick then we're going to do an image tag and the source is going to be the preview source now remember that source is just basically a string that represents the entire image so it's got everything it needs in there and then I'm gonna put a little bit of style just right in here just say this is gonna be 300 pixels high to make sure it's not too big all right so there's our preview anything we're missing and one more bracket there all right so let's see now all right so let's see now if we upload an image or choose an image so here's me circle all right now we get our preview so that's cool now we want to actually actually handle the submit so let's come back and on our form let's say on submit let's do handle submit file and let's create that function so Const handle submit file equals and we'll take in e for the event and then as always or usually in react with with your submit functions you're gonna call EDI prevent default um like immediately almost every time all right so let's check if there is no selected file so if the user hasn't selected a file just return we won't necessarily throw an error or anything like that and then we want to get a reader again so we'll get a reader new file reader and do the same kind of thing reader dot read as data URL and pass in the selected file and actually I think we've already got all this stuff done so it's inside of the preview source so we should be able to use that preview source since we have the selected file and with the selected file we should have set the preview source so hopefully that thing is already set by this point so now with that preview source we can call just another function that actually uploads the image so call upload image and we're gonna call this with with the preview source so let's say preview source let's take that preview source and let's call upload and then we'll create our upload image function and I think this was just kind of a snippet that I grabbed online but we'll grab or just call this the base64 encoded image and this is basically just gonna be a string so let's just log out this base64 image for now all right so let's let's come back over let's try click Submit it shouldn't do anything because there's no selected file let's now select the me circle image and now there's a file and we click Submit hopefully we get something shown up here in the console and it doesn't seem to be so let's go back and take a look at what we're missing here handles submit file let's just see if we're actually hitting that function so if we click Submit it looks like that's not firing so maybe we're doing something wrong there so handle submit file is going to be the on submit property the form which looks right also missing a class name on here to give a little bit more styling and handle Schmitt file oh and actually I think it's because our button shouldn't be a type of button it should be a type of submit which will actually trigger this submit so it says submitting here we haven't chosen a file now if we come back up and choose a file hopefully we'll see this big a long string down here maybe not so let's go and double check that now and let's see we're inside of the submitting here if there is no selected file which is something we didn't do earlier so we want to set the selected file and actually I don't think we need we don't need the selected file anymore what we want to check actually I think I was just keeping too many properties there we can just check if there's no previous source so we're not going to necessarily keep track of the file that was chosen itself we're just going to keep track of the raw string that represents that file so now let's do the same thing let's test this out with me circle and a submit and now we see this is our long string so this is the string representation which is really really big of that image it's a URL or base64 URL encoded string of that image which is cool all right so that's all we want now well I guess we can kind of step out a little bit more so on the actual upload of the file what we want to do is submit this to the server so let's just stub this out we're gonna use the fetch API and we'll have a try-catch I got to try to remember to use the snippets which are pretty sweet here so there's and I want to update this to include the logging out of the air anyway so there's a try-catch and what we will I just call a wait fetch and we're gonna call the slash API slash upload and then we'll pass us a configuration object and we'll say this is gonna be a post and the body is going to be a json stringify version of the data which in this case is or an object that includes the property of data which is the basic C 4 encoded alright so there's that and then we can specify I can't remember if I actually needed this or not but the content type inside of the headers to be application slash JSON all right that looks good except this should be a capital C all right and same can't use a weight inside of a non async function so here's our async function alright so this thing now we'll we'll try to upload this file and obviously it will fail because there's no server that's running so that should fail for for cool so that all works so let's go dive into our server aspect of this and let's come into our empty server file and I think we've already have I done an NPM an it on the server I think I already have but it no maybe I didn't okay so here we go alright so that thing isn't it in and we need to install Express we'll also want the cloud nary SDK so you can find this on NPM as well alright so we'll go ahead and install Express and cloud Neri now one of the things we need to do on our front end is we're going to need to be able to talk to our back-end while they are running on different ports so we're gonna want to proxy our front end to our back-end so we're gonna have our back-end locally running at 3001 so we're gonna add another property in this package JSON for proxying our request from local host 3000 which is our react application to 3001 which is where our server will run so I'll have that proxy configuration let's restart this the front end just to make sure that that proxy is taken into account alright we don't need to go and check on it alright so it looks good on the server we've installed those packages and now we want to add a server j/s so let's open this up and this is going to be the only file or only actual like source code file that we have on the server so we're going to start with creating a basic Express app so we're going to require Express and if you're new to node we're basically just kind of setting up the scaffolding here of our app so we'll call the Express function and then you'll call F dot listen and you're going to listen on a port so 3001 for example and then you can have a callback function to log out listening on port 3001 now usually in production you'll do something like this you'll say port port equals process a NV dot port so this is if that port is set on an environment variable you'll use that if not you use 3001 and then we'll say down here to use that port and then we can say inside of here as well we can reference that port even inside of a template literal string so this is going to listen on either the environment variable port or 3001 and what i'm gonna use is no daman instead of just node so no daman will automatically reload the server if I change something inside of the server jas so it's actually really really nice for development and you see that my server is running on 3001 which is really nice so let's do let's go ahead and just kind of stub out an app app post and the route here will be slash API slash upload and all of your callback functions take in a request and a response and we're gonna surround this stuff with a try-catch as well so let's go ahead and log out this air in case anything goes wrong and the reason we're doing this try-catch is we're gonna actually try to upload something via cloud Neri so the first thing we want to do we want to get the file string from the wreck body data so remember inside of our front-end inside of the upload component here we're sending along an object that has a property of data and that value is the actual string representation of the image so let's just log out this file string let's make sure we can get it all the way there and read it and one of the problems that we're gonna have is you can't really use you can't really use what am I trying to say you can't really parse body data without doing a bit of configuration so one let's move this port down to the app listen alright and then I'm gonna paste in a couple of boilerplate lines here using Express that URL encoded will allow you to accept data from forms so we don't actually need that here and then you also do Express that JSON calling this will allow us to parse JSON body data and then we set the limit to a higher limit of 50 megabytes so that we can upload bigger images so that's all we're doing there alright so let's go back over to well one let's save this file which should reload our server and let's refresh this upload page I don't know if we have to actually and let us select an image and click Submit and we should see that we didn't get a 404 so hopefully it's submitted and we're actually able to see the string on the server so that's super cool we've got our react and our node setup that's working really well so the next thing we want to do is actually upload this thing to cloud Neri and this becomes let's see do I have any cloud Neri configuration in here actually pretty simple so let's take a look at cloud Neri cloud Neri on NPM alright so with the cloud nary a library here we need to initialize the cloud Neri just package and so I haven't imported this yet the reason is I'm gonna create a new folder inside of here called utils and I've been doing this a lot recently just to kind of like spread out some of my code and then be able to reuse it so I can create a cloud Neri file in here and I'm just going to copy and paste over a little bit of a snippet and all we're doing here is basically just creating or configuring a cloud nary object and a couple things that you need are your cloud name now the cloud name is let's go ahead and login to cloud for me the cloud name is not anything that's private and neither is the API key necessarily so you can see my cloud name is here my API key is here and an API secret is actually something that I don't want to let you see so I won't let you see that so what we're gonna do is use those things those credentials and we're gonna do them with environment variables locally so what we're gonna need to do is install dot in the package and this will allow us to work with environment variables locally so I'm going to create in my server a dot and V file and we're gonna have the three properties the cloud Neri api key the api secret and the cloud nary name alright so this is what it will look like you will need to fill in with your information here so make sure that you paste in your actual values and with that in place now inside of my server I'm going to grab that cloud Neri object so get cloud Neri equals require and then go into the utils directory and cloud Neri so all we're doing here is grabbing a reference to an already configured cloud Neri object now again the reason for this is if we needed to use this culinary object and another function somewhere we could do that by just doing the same import or require statement so now let's go ahead and use this thing where we want to say kotts uploaded response equals a weight and then cloud Neri dot uploader dot upload and we pass it the file string and then you can choose a upload preset and this is just a configuration here and they are stove setup so inside of cloud Neri you can have different upload presets and you can get to those in your settings tab here and then your upload tab and if you scroll down you can see I've got dev setups in here so what this should do is dump these pictures into a folder called dev setups now this dev setups is X we feel like a different kind of testing but just to show off how to use your your upload presets that's what it is so there's I've already got an upload preset there you can specify different things but in this case I can specify where to save those images and then inside of my upload call I pass in this configuration figuration object and tell it I want to use the upload preset of dev set ups so let's log out the upload response alright and then let's call a res dice on so we'll respond back with a message that says yay uploaded that image if we fail then we'll do something basic we'll return back a 500 and then return back a JSON object that has an air of something went wrong so obviously not being super specific here but it is what it is so let's call our node Mon again let's start back up our server and immediately we get in here and you can only use a weight right here inside of an async function again I always hit this problem so make sure you mark that callback function as a sync all right so now let's go back to our front and app here and I thought we shouldn't even need to reload the front-end we should just be able to click Submit and if I haven't already I probably want to not logout the string but that should have submitted if we look in our network tab we see that we got back at 200 so that seems like something happened that went well if we come back to here we see the object that comes back from cloud inari after we upload the image is here and it has several different things that we might care about an asset ID a public ID so this is like if you wanted to display this thing where would you find it width and height in a format and all these different things which is really really cool so what this should mean is if we go and check inside of cloud Neri inside of this page for dev setups we should see we have our new image is uploaded in the counter which is crazy super cool I think so we've got this whole process of a react form to be able to upload an image to cloud meri now the other thing I want to do and this is kind of a bonus here this is already a longer video but I think it will be cool is let's do a get request to slash API slash images and then let's have an async function with request and response so similar to what we had before and what I want to do is get a list of the public IDs that are inside of that folder from cloud Neri so let's grab from this call that the search call that we're gonna make we're gonna abstract or extract the resources property out of that object and we'll call wait cloud nari dot search and there's lots of different ways to customize your search so we will call the expression here and we're gonna pass this a string to say folder and dev setup so this is saying we want to get all the ones that are inside of dev setups then we want to sort by and we want to sort by the public ID descending we'll set the max and you don't have to have all of these this is just kind of setting you up here Max results is 30 and then you call the execute function there all right so then we'll get the public IDs from resources for so from that resource we'll need to map and get an individual file and for each one of these we want to return the file dot public ID so if you remember in here when we logged out the object that we created there's a public ID property so we want to get an array of all of the ones that come back from this search and then we will arrest send or res dot JSON either way res send our public ID so this is just gonna send back an array of all of the ID so that we could display them on the front end which i think is cool so let's test this out let's go directly to localhost 3001 and let's call API / images and let's see what we get back hopefully something sweet so here are all of the public IDs of the images that are inside of the dev setups folder and there's one two three four five six seven eight and it should be one two three four five six seven eight images in here so it looks like it's working all right so with that in place let's go back over to react and let's just set up a way to display these so let's grab our home component and there's nothing here so let's start with doing a you state to get the image IDs so that we're gonna make that API request to our back-end to get them so we'll call you state I'm gonna get an auto import in here and then we'll have a load images function which will be async and again we're going to do a try-catch and as always log out this air if it happens so we can see it and then we're going to do another fetch so we want to get the response back from the fetch so we'll call wait and then fetch and then API slash images and notice I didn't specify this earlier but I'm using relative pass here so I'm not specifying localhost 3001 slash API slash images we're using a not an absolute path but just a relative path to that API because we're doing that proxy configuration in react and then from that response we want to get back to the data so we do a wait res a song and then let's set the image IDs to this data all right if there's an error we'll catch it and we want to call this load function when our component is ready and basically only one time so we'll say use effect and this is a way to determine when you want this callback to be run by passing a dependency array so this function here this callback function will be run any time something in this array changes which in this case it's empty so it will only be called once and we'll call load images all right let's just see let's log out our data here and let's just see if it's actually getting it so let's go back to our home page and use effect is not imported this needs to come up here alright and then let's go to the gallery or the home page I think I kind of messed it up and you see I get back my response so now all we need to do is take in those public IDs and then display them so let's come back over to react on the front-end let's install clouded nari react that's the package that we're going to use and then we're going to import the image property from cloud and Neri react an image here is basically a component so gonna do a little bit of styling on here home is going to have a class name of title and then I may not actually end up styling this thing I'll probably skip it for now we'll just have all the images there but we're gonna say if image IDs is set so a little and trick here then we'll call image image IDs map and so we'll get a reference to each image image ID and we want to surround this and grab the index of that item as well and with that what do we want to return well we want to return that image component so this should be the capital image component from cloud and area and then we'll just set all the properties that we need so anytime you do a map in react you have to do a key and we'll just use the index here as the key and then the cloud name I'm just going to hard-code this to my cloud name which is James to you quick and we'll set the public ID to the image ID so that's that's the value that's in that array and then we'll just set the width to 300 and the crop to scale so these two specifically are properties that cloud Neri will take and handle and then translate those into a transformation when it makes each request to get that image we'll see that in a second so let's do let's start this back up and let's see what we got if we were on the right command all right so we see all of our images are coming in here I'll not super well-organized I'm not gonna waste too much time on styling that but I do want to show for each one of these images if we look at the request URL how can I was the easiest way for me to copy this I think I can do this if I copy this into my browser notice that and if i zoom I don't think it'll zoom in on the bar so let's do maybe this if you look at this URL over here you'll see there's properties in here for scale and for width so see under source or for crop and for width so see under source scale means crop equals scale and then width equals 300 so cloud Neri is actually able to do those transformations real time based on what we put in this thing so if we say a width of 100 now we should get back a smaller image and if we did some sort of different crop or some sort of different height I wonder actually if I did a height of 500 probably get some sort of wonky image right that's not what we want but we can do that so just by manipulating the URL that we're requesting we can transform the image and culinary will do like caching of your transformations and all that kind of stuff it's so super cool that's one it's able to do that but then in the react SDK the library here all we need to do is just specify properties for this component and it's able to display really really nicely so again just want to kind of recap we went through a lot here this is a longer video than I usually do but I thought it was a lot of fun we worked in react and know to create a full upload system so from react were able to grab an image or let the user select an image preview that image and then submit it to our back-end and node and then end node actually upload that image to cloud Neri and choose a predefined or a preset for the upload so that it can go to this dev setups directory and then we created the endpoints be able to query inside of this directory all the public IDs for the images and then display them inside of our app and again we got some styling that we should do going forward but I think that super super cool cloud meri is incredibly powerful so question of the day are you what are you using for your media management or using a service like cloud Neri are you doing any optimizations or transformations on your images if you're not you should definitely take a look at cloud Neri if you're using something else or have some other sort of system that you use let me know in the comments below in the meantime I had a blast working on this video you'll probably see more cloud Neri and image and media related content as I kind of step into my role as a media developer expert so keep an eye out for that and again thanks for checking out the video and I'll see you in the next one

Channel: James Q Quick

Views: 68,405

Keywords: cloudinary image upload, cloudinary image upload nodejs, upload images to cloudinary in nodejs, cloudinary react, cloudinary nodejs, cloudinary react image upload, cloudinary tutorial, nodejs file upload, image upload express js, image upload react, react tutorial 2020, web development, javascript, javascript tutorial, cloudinary api react, cloudinary api node, file upload html, file upload javascript, node js file upload, cloudinary, image upload, image upload with nodejs

Id: Rw_QeJLnCK4

Length: 34min 32sec (2072 seconds)

Published: Tue Jun 16 2020