How to Upload Images in ReactJS using Cloudinary Tutorial

hey guys how's it going i'm back here with another video and today i decided to make a very quick video that is kind of like related to the last video i posted basically in this video we're going to be very quickly uh going over uploading images in react and basically we're going to be using the cloudinary service which is a cloud platform where you're able to send images and files and videos to the cloud and you're able to access them so it's a great way to store images because most people most services don't don't store images and database despite what most people think initially so it's a great way to to store images and it's a really good service so in this video i'm going to be teaching you how to upload the image and also how to use the cloudinary api for the react and be able to see that image so as you can see right here i have a project that basically it's empty you don't you don't like don't care about the other stuff i just grabbed a random app a random object like random project i had and currently you just have has a div saying hey in the middle so this is our project and basically you can see i'm using uh this is the website for quaternary so what i would recommend is i would recommend going to the cloudinary like cloudinary.com creating an account which is free and then you're going to appear like this is the screen that's going to appear and the first thing you need to do is you need to create some stuff so we're going to be able to send that information from the client so in order to do that you're going to come here to the site you're going to click on configurations and by the way i'm going to be showing some sensitive stuff in this video but those sensitive stuff it doesn't matter that much because i'm going to be like changing those information so it wouldn't matter at all you just like don't worry don't try to replicate the same values that i have here you just realize that this upload presets are the important thing that you need to worry about so when you come to cloudenary you should go to configurations then go to upload and you scroll down right here and you'll see upload presets well this basically means that you're able to to upload information from a client so anyone who who tries to upload using this preset is going to be able to so this is why it doesn't matter i'm going to change this presets right after this video so no one will be able to upload but basically what you got to do is you're going to create a preset you click right here and i'm going to for example this is the the upload preset that generates for me and we're going to change this to inside and this is literally what it is and we're going to save this when we click save we gotta copy this name so the thing that we created was this one right here we gotta keep track of this right and also we're gonna come here to our react app and we're gonna start working on our react application so imagine we have here a simple div and we're going to create an input right so it's going to have an input of type file and basically for now let's just it's going to just going to be like this so you're going to see that when i refresh this um it's not refreshing i'll restart my my react app so yarn start we're gonna see that we're gonna have an input in the center so okay right here we have an input in the center and i'm going to delete this route just like this we have an input in the center and we can select files over here so for example if i want to select this are all my thumbnails if i wanted to select this you can see that currently the only thing it does is it displays the name of the file you selected over here and you can select different files so now we're going to work on the upload part well when we grab an input over here you can give it an unchange event and what this unchanged event retains is basically it grabs the file that you're working with and it stores into an event uh element right so in javascript when you when you want to access an event from an input you can just do it like this so basically what i'm doing here is i'm passing in an unchanged event and inside of it i'm grabbing the event i could change this actually i'll change this to event so it makes more sense so event and over here this is a simple syntax for creating a function and over here this literally will call a function from from that we're going to create which is going to be called upload image and this function we're going to pass the event dot target so event oh it's actually event dot target and since this is a file we gotta grab the files and this is a very like this is a standard we're gonna save this you can see it restructured everything and it's giving us an error for some reason oh upload image we haven't created this function yet so let's create that function if we come here to our to our fun our functional component can just create a function called upload image and it's going to take a file or actually files and over here we can just do it like this and literally what we're gonna do first is we're gonna try to grab the information from the file and how we do that is basically this input right here so you guys can get a perspective this input right here it grabs it can grab multiple files so when i access event target.files you'll see that it has an s at the end meaning it can be multiple files it actually returns an array of different files that you you grab but since we're only working with one image you can just access one image by doing it like this files and zero so let's see how this works i'm console logging this so if i come here and go to my console log and i just select a file so i'm going to select this this i don't know this thumbnail right here you're gonna see that it's going to console.log the information it says that the name of the file which is a chat thumbtube.png the date was modified it says a bunch of information the size everything so this is how we're going to take like take into account the file and work with it so the next thing we're going to do is work with um with uh cloudenary as a whole so the way we do this is by making an api request to clovername so as always when i work with api requests i could have just i could just use the fetch function from normal javascript but actually i'm going to use excuse so if you don't know what axis is it's a very it's a like awesome library which oh i wrote it wrong sorry let me let me write it again it's exuse and i wrote the yarn add x's but if you're using npm you can just write npm install axis and now that we have access i can just import axios from axios and now we can make http requests from here our https request from here to uh an api so this is what we're going to be using and now we can just come here and we can like um grab and create an instance of a form data so if you don't know what a form data is basically when you want to work with forms or inputs you have to create create an object called form data which will hold all the data from the form as the name as the name says and it's going to be equal to new form data and basically it's going to be an object as you can see and instead of it we can just append different information to that form data the first thing we want to append is the file so in order to do that we just name it file as you can see right here we pass the string called file and we can pass the file that we want to work with so as i mentioned before it's just files zero so we're sending the file to the form data and we're constructing this form data the next thing we want to do is append the upload presets so the upload preset as i mentioned is the this thing right here and the only reason why we have to do this is because uh since uh quaternary works with if you want to make a request on the client side claudia never gets uh like it has to control who's making the request so in order to make a request to the client side you need to make something you need to make a public upload preset and you can grab this and send it directly to them so i'm just going to copy this so how do i copy this i'm just going to click right here and copy and come right here and let's create a form data dot append and we're gonna pass the name upload preset and you can just say you can just pass the name of the preset so i'm going to pass right this right here and this should be fine and right here at the bottom just come and basically just make the the request white oh actually i'm outside the function you can just make the axis post request so write access dot post then can pass the url and make sure you write it exactly how i'm writing it it's https then to slash api dot cloudinary dot com slash v1 under underscore one slash the name of your like your cloud name and like your column name is basically this so if you come here it's basically this um it's it's this right here it's not secretive at all like you can just copy this and you can just come here and pass this right here and right after it you got to put image which specifies that we're trying to upload an image and then upload this is the end point where we're going to be sending our data and after it we can literally just pass the form data so if you look at what we're doing basically we're constructing the form data that we're uploading to cloudinaire and then we're passing the upload preset to make sure that we're actually sending it and selling it correctly and then we're making an access.post request where we're sending the information to the route right here if i click dot then this is a promise so we can get a response and the response can we'll just console log the response if it is a good response so if we if we actually write everything correctly actually we'll respond with the capital r i don't want that so response okay we want to see what happens right so this is literally it let's ch let's take a look to see if it's working actually you know what i'm thinking about it maybe i want to create a submit button instead of just like sending the data when i select the image maybe right so let me create a button here it's going to be called upload image and instead of calling the upload image function right here i'm going to call it on the on click event right here so on click i'm going to pass a function so let's do it like this and i'm just going to pass the upload image but as you can see we don't have the event.target over the files over here because we're actually going to change that this is just a decision that i just made we're actually going to change that the function will actually not take anything it will be just like this and also i forgot i need to pass the the actually i don't even need to do it like this i can just write upload image and i'm going to remove the files from here and literally what we're going to do is we're going to create a state so let's use the use state hook const [Applause] image selected we're going to create a state that is going to hold the file so set image selected and it's going to be equal to use state it's going to be whatever for now let's just leave it like this and let's save this obviously i need to pass something here so i'm going to pass a a string and what we're going to do is we're going to instead of upload we're gonna pass the the the we're gonna literally come here and say set f image selected equal to this and now we have our our files um what happened well files oh because we we need to grab so you know where wherever we set file zero instead of doing this and by the way i'll just do it right here i'm passing it to the into the state we're passing the file zero directly i can just come here and instead of accessing file zero i can just access the image selected so if you're confused i'm sorry about that basically what we're doing is we're instead of grabbing just setting everything directly on the unchanged event we created a button right here where when we click it we're going to send the data so we transferred the event the target of files and the image directly to a state variable called image selected and now when we want to access it we can just call it call the image selected so now that we've done that we can test it so you can see that on our cloudinary i'm going to go to my you can see these are the last images i uploaded so this one is the last one i'm going to upload one right now so let's select an image i'm going to select one of my thumbnails this one right here so i just selected a thumbnail called crud png and oh accidentally disselected it so let's do it again i'm going to inspect elements so we can see the console log to see if anything happens when i click upload image it's probably making a request and let me see if it's making making a request um network let me see yeah it's making a request it's pending and maybe my wife is bad but it just went so you can see on your console log it says data status meaning that it's okay it's sent the image if you go to cloudinary and we refresh you can see that that image should appear right here and let's see um it's refreshing okay it did you just don't see it because we gotta click it over here but as you can see this is new a new image was uploaded and now we have the thumbnail that i just uploaded seconds ago so this is the upload part now i'm gonna show you guys what is the the not the upload part but like grabbing the the the image right so in order to start working with and being able to see that image you're going to install a package called cloudena react so we're going to come here and write yarn add cloudinary react or if you're using npm just write npm install partner react this is a really good library i don't think it's actually made by quaternary itself so the company but the thing is it allows us to very easily grab the images and that's like awesome in my opinion so the way we're gonna do this is we're gonna come here and we're gonna import and we're gonna import an image so they have an image component from uh cloud in every react so you can see that they have an image component like if i write image over here it automatically imports so what we're gonna do is we're gonna come here to the bottom and right at the bottom we gotta where we wanna put the image so i wanna put the image right here i'm going to display the image right here so in order to display it we gotta write the gif give the image components and properties and one of them is basically the cloud name right so this is one of the things they type it's a cloud name and the cloud name is just your the name that we saved over here so this thing right here the pedro my shadow inc you can just copy this paste it over here then they also take the public id and the public id something interesting each image so wait let me write it over here public id each image has a public id this public id is simply this right here so if i come here and click on the image and click on this name and the public id i guess is this so i can just copy this or is it the link let me just test it this way so if you come here and put this right here notice the link i'm 100 sure it's the link so if i click on the image where can i click on the image you can see we can like transform the image and do cool stuff because this is really a thing that is really awesome with quaternary how do i actually see the image so i want to copy this i'm going to paste it over here is it like this um let's see yeah this is the link you can just pass this over here and so you can see we just pasted it and now we can we have access to the public id so the last thing we want to actually see is well no actually this is i think this is it right so if we save this we come here to a react tab we refresh this you can see that our image perfectly appears it's obviously too big so what i'm going to do is i'm just going to kind of give it a style i think so right so style and i'm going to pass a width of 200. let's see if this works by save this you can see our image appears right here so one thing that is important to understand is obviously like i'm going to try to upload another another image right here i'm going to upload um i don't know this thumbnail right here so click upload one thing that is really cool to understand is how do we integrate so that we don't need to grab each time the the url for the image well the way you do this is basically whenever you upload an image so we just upload it right here i think so let's see yeah we just uploaded the image whenever you upload the image you can just come here to you save the url so you save the url to your database and basically when you save that url for your database whenever you try to render the image you can just pass the url right here and at the same time you're saving you're the only thing you're saving on the database is the is the url and the only thing and what you're seeing in the cloud is the actual image so you can see that now i try to render this and the image i just uploaded appeared right here so yeah that's basically it this is really easy to use cloudinary i hope you guys enjoyed it please make sure you follow all the instructions well or else it might not work so yeah i hope you guys enjoyed this video please subscribe because i post every single day today for example i posted twice so i'm continuing on the grind and i really want to make more content for you guys so please like the video comment down below if you want to see more leave a comment and tell me what you want to see and i see you guys next time

Channel: PedroTech

Views: 62,972

Keywords: coding, computer science, crud, css, databases, express, express js, html, javascript, learn reactjs, mongodb, mysql, mysql workbench tutorial, node js, nodejs, postgresql, programming, react, react js, react js crash course, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, images, how to upload images in react, cloudinary, cloudinary react, image upload react, cloudinary API, how to upload images in React JS, video upload in react, upload files in react, forms in react

Id: Y-VgaRwWS3o

Length: 18min 39sec (1119 seconds)

Published: Thu Oct 15 2020