Upload Images to Cloudinary in React & Next.js

hey team we're going to learn how we can upload images or generally media to cloudnary using a reactor next.js application i'm colby fayok and if this is your first time here make sure you hit subscribe and click that little notification bell for future updates cloudenary is a media platform that gives us a lot of opportunity to do things with images and video and particularly we're going to use it to store our images and see how we can also transform those images after they're stored inside of cloudinary now in order to actually get them up to cloudnary we need a way to actually upload them so we have a variety of options including the sdk but we're going to actually use the rest api that means we can use any method we want to actually send that request including fetch directly inside the browser to actually take that image and send it up to cloudinary so in order to see how to do that we're going to use nexjs which is a react framework that gives you a lot of options for building a website right out of the box while we're not actually going to be leaning on a ton of nexus specific features it gives us a really nice way to very quickly spin up a new application and particularly we're going to use create next app which is going to allow us to create an xjs application from a starter template that i created where we can immediately jump in and get productive with actually uploading our images so i created this simple next.js starter which is going to give us a basic upload form for where we can add our image and then we can turn around and take our logic for cloudnary and send it up to the cloud if you want to follow along i have this link to the starter right inside the description that we can easily get started with actually uploading to cloudanary but to get started i'm going to copy this command and i'm going to use yarn but you can use whatever you want whether that's yarn or npx i'm going to paste that into my terminal and we can see that already it's starting to use create next app to clone down that application where it's also going to start installing the dependencies and everything we need for the project but it's also going to ask what the project name is and how about i'm going to go with my image uploader and once it's done it's going to go through make sure that the package is all set up and get us ready to go but once it's done we can cd into that new directory which we see that i did here and we can run yarn dev or npm run dev which is going to start our local development server which we can open up right inside of the browser and we can see that we have our new basic application which is really just showing we have our title and we have this file input where we're going to be able to upload an image we can even test that out by selecting choose file where i'm going to select my space jellyfish image we can see that it's nice and big on here showing as a preview and we also get the option to actually upload the files but if we try to click upload files it's not going to do anything at this point because that's the point of this tutorial right now actually looking inside of the code we're really going to focus on one file here and that's pages index.js which is our homepage where if we look inside we can see that i set up a few things automatically now we see some stuff at the top but we're going to scroll down a little bit further where we can see the main part of this application is going to be our form where we have our file input which is how we actually add the image to the browser so that we can then upload it but we can see that once we have an image we're going to show it inside of the actual ui once we have the image and we don't have upload data we're going to allow somebody to actually upload it which will later actually hook up to the form but then once we have our upload data we're going to show that right inside the page so we can see what the details of that request actually are now further the more important parts of the form are we have these on change and on submit handlers now if we scroll up to look at what's happening here we can see with the on change anytime somebody actually changes that input value it's going to refresh that image that we're showing so that's really just for the preview that we're currently showing so that's why i kind of coded that out already just so that we had something to work with but what we're going to work inside is this handle on submit function which is going to be where we take that event we're going to look for the images that somebody's trying to upload and then we're going to actually do that action of uploading it up to cloudinary and finally as one last thing we're using react's use statehook where we can see that we're storing the value of the actual image source along with the upload data just simply so we can show that inside the application when we're updating the state of the image so like i mentioned before when we actually upload an image we want to be able to take that image and use it to actually send up to so let's see what happens when we first go to our event handler where i'm going to console log out this event we're going to be able to see that on that event object we're going to be able to get the current target now if i go ahead and choose my file again same space jellyfish and i go ahead and click upload files we can see that we now have access to the actual form where we're selecting that file and better yet what we're going to want to access is the actual file from the input of that form and we can see how that works by right clicking on the form inside of our console and i'm going to click store as global variable where we can see now inside of temp 1 i actually have access that i can play around with this form before i actually do the work now what's going to be interesting to me is from this form i want to be able to find this actual file input and grab the files from that input so just to see what things look like i'm going to say constant form equals temp 1 just so that we can kind of wrap our head around this a little bit easier but i want to grab the form dot elements which this is going to be an html collection of the different elements that are actually inside we can see as we're going through these some of them are actually highlighting where we can see that it's the actual inputs inside of here now if we notice this is a collection and not array and we want to search through this collection for our actual file input so the way that we can use methods like find that are available on arrays is we can use the array dot from method and pass in that form die elements where we can see now that instead we have this array of our different elements now if we look here we want to grab this input but we want to do so in a way that's not by just simply finding that it's an input because we might have multiple inputs right but if we look back inside of our code editor and we go down to that input we can see that it has a name of file so i'm going to go back to my browser and again test test this out i'm going to say i want to find and i'm going to pass in a function where inside of this find method i want to first destructure the data of that particular element that i'm looking through and i want to grab the name and i want to say that i want the to find the element where the name is equal to file and we can see that when i run that where we're creating that array and we're using the find method to find the item with the name of file we find that input of file where we can now start to access the files that are uploaded into the browser session now before we go further i'm going to copy this into the application just so that we have a nice little starting point so inside of my handle on submit i'm going to say i want to create a constant of file input i'm going to set that equal to exactly what i just used which is the array.from of the form elements where i find that file input and remember we need to create this form and if we remember this is going to be the events current target so i'm going to say constant form is equal to event dot current target and just to make sure this still works i'm going to go ahead and console log out this file input now again when i go ahead and choose my file and i go ahead and click upload we can see we now have that file input and again we're going to store this as a variable so that we can keep playing around with it inside of the browser now the whole point of this is to grab the files so we can upload that file to cloudanary so we want to be able to grab the files from this input and the way we can do that is we can write temp 1 which is going to be that input and we can simply access dot files which we can see that we have this file list where the very first one is going to be that jellyfish that i just uploaded or whatever you're uploading where we do have this file list that is a length of one meaning that one item so really this is exactly all we're going to need in order to send this value up to cloud and array now in order to actually send this data up to cloudinary we're going to use the form data api that's available right inside of the browser which is going to allow us to create the actual data and body of the request that we're going to then send up to cloud and airing so inside of my code i'm going to create a new constant and call it form data where i'm going to set that equal to a new instance of form data and notice i'm using a lowercase f and a capital f to distinguish between the two but now we have our form data so we can actually add our data to that instance which will then send up to cloudinary so to start i want to add all of my files to this form so in this particular case we remember we were using the file input.files in order to do that and because there actually might be multiple values we can actually use a loop to go through and append every single one where we know in our instance there's only going to be one but just so it kind of future-proofs it a little bit so i'm going to say for constant file of my file input files i'm going to create the closure i'm going to say that on my form data i want to append the value of file with the actual file itself now we'll see in a second that we're actually missing one more thing in order to send our requests up to cloudnary but let's get started with the actual cloudinary request so that we can see what's actually happening in practice so i'm going to now start my request and i'm going to say constant data is equal to a weight i'm going to use fetch where if we head over to the upload api reference which i'll also include in the description of this video we can scroll down and we can find the endpoint that we're going to want to hit which particularly it's this api.cloudair.com v1 underscore one and we're going to use our cloud name and then image slash upload so i'm going to grab that value where i'm going to go ahead and paste that right inside this fetch command where again we want to make sure we update our cloud name of our particular cloud and aries account now we can easily find that cloud name by navigating into our cloudinary dashboard and right at the top here under account details we can see cloud name which we can see mine is colby demo now again make sure you're using your own account here because i really don't have a lot of bandwidth so it's going to end up breaking anyways if everybody's using it so you can get your own free account over at cloudanary.com but i'm going to go ahead and replace it with colby demo and now we want to also pass in some options as a second argument into fetch where first i want to define a method of post but i also want to send a body and that body is simply going to be that form data now finally as one last little trick i like to also add a then at the end of here where i'm going to say r for response i'm going to then turn that response into json so that way when i have this data constant it's automatically or already going to be a json object for myself so i'm going to go ahead and then console.log out that value so we can see what we get inside of the terminal so now again if i choose my file of space jelly and i go ahead and i click upload we can see that something actually happened this time we actually get an error and as i mentioned we do have one more step but i wanted to show where we actually how we got to this point where we can see that the message of this error is the upload preset must be specified when using unsigned requests now just to show another way that we can find this error is if we head over to the network tab we can see that at the bottom here we find this 400 error where we can preview the response and we can see the exact same error that's getting specified from cloudanary now when uploading assets to clownary we have two ways of doing that one is unsigned and one is signed where signed is going to be if we actually use an api key and we use valid credentials so that we actually know who's actually sending up that asset to our culinary account now generally speaking that's a little bit restrictive for our possible use case where we want really anybody to upload something to this actual application we just want to be able to make sure that we're able to lock it down to our account so in order to actually tell cloudantery that we want to be able to allow an unsigned request we have to also use an upload preset now to do this once we're inside of our cloudenary account we went ahead over to the settings tab where once we're on the page we want to go over to the upload tab where if we now scroll down on that page we're going to be able to see our upload presets and we're going to want to click add upload preset now here there's really three things that we want to be concerned with the first thing is going to be the preset name where i'm going to call mine my uploads now the second thing is going to be the signing mode and as we talked about we want to set this to unsigned and then finally we want to specify what folder we want to use so i'm going to use the same folder name as my actual name of the preset i'm just going to use my uploads and i'm going to click save but now we can see once it's actually done that we have our my uploads preset with a few different settings and we're going to be able to now use that so now back inside of my code i'm going to add a new form data and append and i'm going to specify a value of upload underscore preset where for the actual value of that i'm going to specify my hyphen uploads which is the upload preset i just created but now inside of my application if i try to click upload files again it's going to go through and we can see that now this time it was successful and i have all my information about this image and we can even see i get this secure url which i copy that value remove the quotes and go to it we have our new image and we can see that it's hosted on cloudenary.com now to actually make sure that our application is showing this we can do one more thing and we can actually set the different state so that it does update inside of the ui so we want to do two things where we're going to set the image source and we're going to set the upload data so first let's set the image source and i'm going to set that equal to data dot secure underscore url but then i'm going to set the upload data i'm going to simply set that to that data object but now if i click the upload files button again we can see that it was replaced and we now have all this data right inside of the page of that new upload that was successfully created we can even see that if we head over to our dashboard and go to our media library we can now find that new folder where if i click through we can now see those images that i uploaded now this is great and these files aren't too big but what if i was uploading a big image i found this cool image of a large spiral galaxy over at nasa.gov but if i click through it first of all we can see that this image is size 3600 by 3600 now if i actually download that image and i try to upload it into cloudantary just like i did with my space jellyfile we can see that it's a pretty big file it's 1.33 megabytes large and while that doesn't seem that big for one maybe two assets at that size if we start to add that up with a broad amount of people trying to upload similar or if not larger images that's going to take up a lot of my storage so what we can do instead is before this image ever actually hits my cloudinary cloud we can provide a transformation particularly we're going to resize the image to a little bit smaller of a size we can try 2000 by 2000 and we can also make sure that we're going to optimize this image with something that's going to be a great compression algorithm that's still going to maintain a great level of quality that way we're not really adding a ton to our actual storage now to do that we're going to use incoming transformations which you can also set up inside of your sdk request if you're using signed requests but we're using unsigned requests so we're going to do so using our upload preset so back over on my upload settings page i'm going to scroll down and i'm going to again find the my uploads preset that i earlier created and on the left hand side here i'm going to select upload manipulations where we can then see the incoming transformation for here i'm going to click edit and we can see we get this ui where we can really do a lot of different things with it we can really apply a lot of different options if we wanted to transform it but because this is still going to be the core image that we're storing in our cloud we probably don't want to do a whole lot of transformations we don't really want to ruin this image so that we can provide the transformations later on the fly when we're actually trying to serve the image so to start i'm going to add a width of 2 000 that way it's going to size it down to a maximum value for that width of 2000 but then under format and shape under quality i'm going to select this drop down and instead of manual i'm going to set this to automatic and particularly best quality that way it's going to do it for me and i can be sure that it's going to be the best quality that it can be without really ruining the image itself and then i'm going to click ok and then finally save now the cool thing is we don't have to do anything else with our code we can see that under our actual upload preset we now have our incoming transformation with the actual transformations that are being applied but if we head over to our image uploader refresh the page i'm going to upload that very same image again up into the cloudnary cloud we can see that we again get this secure url which i'm going to open up inside of my browser and we can see that the image is actually size 2000 by 2000 pixels but if we head over to our actual media library we go back to our my uploads folder we can see that new upload where we see 2000 by 2000 but we also see basically more than half of the size of or less than half of the size of what that original asset was so we're saving a ton of space and we're not impacting the actual visual integrity of that image now really this is just scratching the surface of what we can do with cloud and airy but this is how we can actually upload images and even video into our cloud so that we can then take advantage of all the rest of the cool features of cloudinary what's your favorite tips and tricks for actually storing media inside cloud area do you like to perform your transformations before or after they actually get stored let me know in the comments if you want to learn how to take the next steps and actually provide transformations on the fly such as face detection when you're trying to show a gallery of images check out my video for generating thumbnail images using face detection and cloudinary or if you want to get more into next.js features and learn how to use cloudnary with the nexjs image component including creating a blurred placeholder image check out my video next.js image with cloudnary using the link above if you like this video make sure you hit thumbs up subscribe and click that little notification bell for future updates thanks for watching

Channel: Colby Fayock

Views: 27,631

Keywords: cloudinary, cloudinary image upload nodejs, cloudinary react, cloudinary tutorial, cloudinary image upload, cloudinary nextjs, cloudinary api, cloudinary demo, cloudinary upload widget react, cloudinary upload, cloudinary upload react, upload image cloudinary, upload image cloudinary react, upload media cloudinary, upload image react, upload image reactjs nodejs, image upload in html form, file picker image upload, cloudinary incoming transformation, cloudinary upload preset

Id: 7lhUsK-FxYI

Length: 18min 37sec (1117 seconds)

Published: Wed Nov 24 2021