(#2 Backend) Profile Image Upload to Amazon S3 in React, NodeJS, MongoDB

[Music] hey everyone so in our very last video we made the front end of our application and in this video we will continue with our back end so if you haven't watched my last video i would recommend you to watch it and then continue with this video so here we will basically create an api to upload the cropped image so if i select this image and after cropping it if i click on upload button it should upload my image to an amazon s3 bucket with the help of that api and the url that amazon s3 returns will then get stored on a database in our case that database will be mongodb so that is the overall task that we will do in this video so without any delay let's get started the first thing that i'm going to do now is to write the upload function so let's go to our project and i will go to the proper folder present inside of this components folder and let's go to crop.jsx file so here we have all our code related to the cropper component so we have a on download function to download the cropped image we have our clear function to clear the image that we have selected so now we will also have an upload function so let's write that function and this function will get called whenever we click on this upload button so let's do that so now let's write the body of the function i will again implement this check so that we are able to upload only when we have selected an image so i will just copy this code and paste it here so this ensures that this ensures that we can upload an image only when we have selected one right so i do not need this line of code now let's write the code to get our cropped image so to get the cropped image i will use a function which you can find in this crop image dot js file and the name of the function is get cropped image as expected so i will call that function here and i will pass two parameters the first parameter will be the image itself and the second parameter will be the cropped area and i will store its return value in a variable called canvas so let's check what this canvas is so i will console.log the canvas variable right so now let's go to our project and okay so i have used this event keyword but since i'm using this await keyword i will have to make this function an async function so by doing this the error should go and yes the error has gone so now let's check what we have on our console so when i click on this upload button we get this canvas element so now let's convert this canvas element to a data url so i will again name this data url canvas to let's say canvas data url and in order to change our canvas to a data url i will just do canvas dot to data url and the type of the data url will be an image right so again let's console.log this data url so now if i click on this upload button i'm so sorry the name of this will be capital okay so it will be dot to data url url should be capital so now if i click on this upload button i'm getting this data url as you can see it's a very long url it's size is 145 kb and you can also like copy this data url by just clicking on this copy button so but to upload this image to an amazon s3 bucket we have to send it as a file object we cannot send this data url to our backend so we will have to send it as a file object so again we will convert this data url to a file object so to do this i will again use a function which you can find in this data url to file.js file so as the name itself says that it will convert any url that you give to a file object so again let's do that i will again use the data url to file dot i'm sorry data url to file to convert this data url to a file object so the first parameter is the data url itself and the second parameter is the name of the file so in this case i will name it as crop image dot jpg so again let's store it in a variable which i will name as converter url to file and let's console.log this file object so if i click on this upload button can see the file object right so here this is the image name that i just supplied crop image so this is the name of the image the size of the image the time of the image and it's a timestamp i mean the last modified timestamp so here we have our data url so now we can upload this file object to our backend so without any delay let's go to making our backend so now i will create a folder in the root directory itself called the server and inside of this folder all the code related to our backend will be present so now i'm just going to open a new terminal and cd into that server so i will npm init dash y so we have our package.json file and now i will install some couple of packages so the first package will be of course the express framework itself and then of course we will also need mongoose and the last one will be note mod at least for now so these four packages will be fine to set up our initial server so the packages have been installed and now i'm just gonna go to the server directory and create some files so the first file will be index.js and the second one will be server.js also i'm going to close this files because we do not need them right now so now i'm gonna go to index.js and import the express framework i'm also gonna import course and now i'm going to initialize express to a variable called app so now i'm gonna run some middlewares using the app.use method the first middleware will be course so this middleware will help us to make cross origin request and the second middleware will be express.json and this parses the request object with json payloads okay so now we have written some middlewares and now i'm just gonna create a simple get route so that we know that our server is running right so i'm just gonna do rest.json send a success to true and a message of like server is running but yes we did not create the server as of yet so let's do that but in this case i'm gonna create the server and this file server.js and all our app related code will be inside of this index.js file so now i'm just gonna export the app object and we will import that same app object inside of our server so i'm gonna import it from the index.js file right and now to create our server we will just do app dot listen and for now i'm gonna listen on the port 9000 and let's console.log with a message of let's say server is running at port 9000 so this should run our code so let's go to a browser and make a call to localhost 9000 okay so i just forgot one thing to run a server so let's do that i will create a script called start and here i'm gonna use node mod to run our server.js file so now just start our server and yes we are getting the message which we have written here right server is running at port 9000 so let's make some request to this server and yes this is the response that we get back when we call this get route right this slash so now it's time to connect our database to our back end so since we will be using mongodb let's go to mongodb atlas and create a database over there so if you do not have an account in mongodb atlas just create it and if you have one just sign in so since i have already created an account i will just sign in and this is the dashboard right so at the top left corner you can just click on this drop down menu and create a new project so now i'm just going to create a new project so i'm gonna name this project as let's say image cropper zoom upload so this is the name of my project [Music] and just click on create project right so now just click on this builder cluster button to create a free cluster so here you have some paid clusters which you do not need as of now so i'm going to create a free cluster and select the region which is nearest to you so the nearest region for my location will be mumbai so just select it and click on this create cluster button and yes so the cluster has been created and now in order to connect to this cluster just click on this connect button and then just add your current ip address but one thing that you have to remember is that sometimes your ip address gets changed so when it gets changed you again have to come to this dashboard and replace your old ip address with the new one but if you want to avoid that you can just uh go with this option allow access from anywhere but going with this option will allow anybody to get access to your database if they have your password so at least for the scope of this project we can go with the first option so i'm just going to select the first option and then click on add ip address so the second thing that we have to do is to create a new user so i'm gonna name the user as let's say cropper and i'm gonna auto generate a very secure password and i'm going to copy this piece of string and now let's create a file in this server directory called config dot env so this file will have all our environment variables so for now i'm just gonna paste the copied string so this is our password right and now i'm just gonna click on this create database user button and again click on this button so since we will be directly connecting our application with the database we can just go with the second option so just copy this piece of string and go to this config.nb file and now i'm gonna create an environment variable called let's say mongodb uri [Applause] and paste the copied string so now we have to replace this piece of string with our password and as we know this is our password right so i'm just gonna cut and paste it over here so this is our mongodb uri and we will be using this uri to connect to our database so now let's go to server.js file and import mongoose so now i'm gonna paste some piece of code to establish the database connection you don't have to know much about how this code works because to be honest even i don't know what all these options are so just copy and paste the code right so this is our mongodb uri which we have declared on this file config.env so we are accessing the mongodb url environment variable by calling the process.env but this now will give us undefined so as you can see we are having an error connecting the database so it is throwing this error right because we have to first set our environment variable so that whenever we access or try to access the environment variable it looks for in the correct file so to do that we have to require dot env which we installed a few minutes back and then we have to call the config method and inside this method we have to pass some options so the first property will be the part to this file right so as you can see this file config.nv is in the root directory of the server itself so we can just do config.nv and by doing that now we will be able to like connect to our database and as you can see we have successfully connected to our database right so now we can like freely access our database we can create new collections we can insert new documents which we will surely do a bit later so now since our database connection is successful we can proceed further into the project so now i'm going to create some folders inside of this server directory so the first folder will be controllers so this folder will have all our business logics the second folder that i will create will be models and this folder will contain all our database schema or you can say the collection schema and then we will have a routes folder this will contain all our routes of course now this seems a bit vape but when we like create some files and configure it properly you will get a proper idea of how these things are really working so let's start now i'm going to create a file inside of this controllers folder and i will name it as user controller.js and here i will create a function let's say set profile pic and i will also export it at the same time so this is a common js way of exporting things as we all know that node.js supports only common js so this is how we export you can say functions in a common js way of course there is one another way which you can do but for this i'm going to use exports dot the name of the function so here we will basically get the request object the response object and also the next function so here i will basically console.log request dot body and again i will like return it as a response [Music] so what i'm basically doing is here is that we are extracting the request.body from the request object and again we are sending that same data back to the client of course now we have to create the route so that we can call this function whenever someone hits that route so here again i will create a file called user routes dodges and here i'm gonna the router which we can get from the express framework itself and now i'm going to create an endpoint which will be a post endpoint which again i will name as set profile pic so the end point route will be this set profile pic and here we will basically call the function that we just wrote on this user controller file right so let's first import the file and now we will just call this set profile pic function which we wrote here and then we have to export our router object as i mentioned just few minutes back that there is one another way of exporting functions in node.js so this is that way okay we can export by doing module or exports or by just doing exports dot the name of the function so now we i will import this router on our index.js file so i'm gonna name the return value as let's say user router and require it from routes user now i'm gonna pass this user router as a middleware so again i will do app dot use and here i will pass the user router so this as you can see is also a part of the api endpoint so our final api endpoint for this route will be http localhost 9000 api slash users slash set profile page so any request which is been made to this api endpoint we'll call this function our set profile pick function that we wrote on this controller file right so now let's make a request to this api endpoint from our front end so now again i will go back to our src folder and inside of this i will go to cropper and then cropper.jsx so here we will pass this file object to our backend or you can say we will pass this file object to our backend using that api endpoint so the api endpoint is this so now we'll make a request to this api endpoint using our file object as the payload but one thing that you have to remember is that since it's a file object i'm gonna pass this as a form data so i will create a new instance of the form data using the new form data constructor then i will append our file object to this form data so it accepts two values one is on this kind of string and the other is a value so the string basically acts like a key so i will name it as cropped image and the second value will be our file object itself so which i will pass it here and then i'm gonna make a fetch request or you can say a post request using the fetch api to this endpoint i'm gonna copy it and let's paste it here and here we have to pass some options so the first option is the method which will be a post method and the second one will be our form data itself this is a post method because here we have mentioned that this has to be a post request right so this api endpoint has to be a post request and as a result we are making the request to this endpoint as a post method so now this api endpoint will get called whenever we click on our upload button right but before that i'm going to wrap it inside of a try catch block so i'm going gonna paste cut and paste it over here let's also like console log any error if we have one so now we are ready to make a request to this api so i'm just gonna go to our project refresh it [Music] and open the console and let's select a file i'm gonna again select this file and let's crop it upload it and here we are getting property jsx okay so this console.log is coming from this right but we do not know whether we have successfully made a request to our backend or not so in order to do that i just have to store the written value and now variable let's say rest and again we have to do const let's say rs2 equal to await res dot json so we have to parse the return value by calling the dot json method and now i'm gonna basically console.log our address to so now let's check whether we are able to make a successful api call or not so again i'm gonna click on this upload button and here we are getting something right so it is the data okay but we are getting an empty object so i probably made a mistake somewhere and i think i know where the mistake is so we are sending the data as a form data right we are not sending it in a json format so in order to parse this form data i have to go to our server and here i will basically install a package which will parse form data so the name of the package is express file upload and this package has been installed so again i will import it and pass it here as a middleware so now we will be able to parse form data so now let's again make a request from our front end and check what we are getting i'm gonna again choose this file and click on upload and we're still getting okay so i think we will also have to change this so this will not be body it will be files let's again test it out yes and now we are getting our data back right so this is the data that we send and now we can like confirm that we are sending the correct data so as i mentioned earlier that the name of the image is cropped image.jpg this is the size of the file the type of the file and some like other stuffs like data encoding something okay so now we are getting our image our basically our cropped image so now i will upload that same cropped image to an s3 bucket so now let's do that

Channel: FrontendInterviewPro

Views: 4,737

Keywords: upload images in react, react easy crop, how to upload image to s3 bucket, uploading files in react, uploading images to s3 bucket using nodejs, uploading files to s3 bucket using nodejs, uploading files to s3 bucket using multer, crop zoom and upload images in react, how to crop images in react, crop image in react, how to make an image cropper in react, profile picture upload using react

Id: BibIRfqtw1A

Length: 26min 22sec (1582 seconds)

Published: Wed Mar 17 2021