Image Upload and Display in React, Node, MySQL | Upload Image in MySQL using Node js and React js

hi everyone this video is about to upload an image and react.js with node.js in my SQL database database maybe you are using mongodb but I am using my SQL database and displaying that back okay first we will upload that to the node.js then we will and store that in the mySQL database then we will switch that then that end display that under browser so let's check it okay we will build something like this okay let's create this one upload it say we got it so first we will store upload that to the database using node.js then we will display that back so let's get started okay before starting if you are new to my YouTube channel don't forget to subscribe it and like the video you have to set up the environment for our front end and back-end side so first of all we will let's create the environment for our server side so for the server side first we will create a folder for example this folder which I have created react MySQL inside that create another folder like this okay server folder and after that run this command inside this folder okay npm in it why so it will create application.json file inside that okay for first time after that run these commands Okay install Express which is anode.js framework MySQL for MySQL course to access our API inside our react app in node Mount to refresh our server side code automatically when we make changes and motor and path we'll use for file uploading so after installing this so it will be installed these node modes and these package log touches on these files okay then create a server.js file okay so in that in that file we will write our server side code and for the front end just create your react app okay simply create your react up as I have created so now we will start our coding for to upload an image and display that so first of all this file upload file is imported here in app.jsx okay now this app is imported in and our main are index.j6 so let's try something in our file upload rfce tag function component so here inside this we will just last name container and here we will have a button for to import a file okay you know in fulfilled type would be a file and a button upload so we have this input file a fill in a file okay whatever we make some changes for example when you select a file we should so store that somewhere so let's write on change event and this uh handle file handle file let's create the Central File function const handle file 3 equal to we will get an event here Let's uh first of all create two variables const just one variable const file we will store our file inside this file set file is equal to we will use use statehook for that they took and now let's update our usted hook so we will write sit file e.target dot files zero okay the first one because it is in Array so we will get that just the first file and we will store that inside this file after storing that I think it is not true let's make it yeah that is okay now so after creating this so whenever we press this button we should call another function on click handle upload let's create this function inside this function now we will upload our file to our server side okay to the server side so before uploading our file let's write something uh something means the boilerplate code for our server side in This Server server.js file we will write first of all import Express from hex Chris and also import my SQL from my secret import cars from cars one thing else I should mention uh previously we installed two packages node Main and another one was yeah this is this import that we are using this import that we are using in the node one the another one is refreshing our server side code whenever we make change automatically so whenever we install nerdman then we should write in our package.json like this okay start node month our file name server.js okay and also to use Import in our server set code import is not working by default okay so to use this import you should write like this okay type module this one type module then import will work yeah after importing this let's import from motor and also import path from path yeah we imported all the important necessary packages so now let's use them first of all we will create an app is equal to express called Express method then we will change our um data to the Json format so we will write up that use Express dot Json format and after that we should use the middleware of course that use cars call that now let's create our connection with the my SQL database so for that I will write const ant DB is equal to mySQL dot create connection and we will pass the properties host localhost because we are working locally Local Host is the host with us and user is a route by default and password we didn't set up the password leave it empty and also the database which database we should use let's mySQL database let's come here to the mySQL database okay here in the sign up we have users okay this user or table we will use let's remove these fields from images okay we will update our images we will assign our images here upload here okay in sign up database we have user stable let's assign this sign up after that let's run our server after lesson we will assign our port number that is 8081 and also let's create a function in the TV light console.log running it means our server is running so to run the server we can simply write like this okay let's remove this and create from scratch one and they will should move CD dot server to the server side npm start so it will start yeah let's check it here it is running see the message has printed running this message yeah our server side is running now so to run our and react app so for that we will write CD front end and let's start painting start sorry but I know we should write npm run [Music] yeah that has started so let's move to this URL just come here our app is running see we have this upload file input field so whenever we press this upload button so we should move to our server side we should create an API here now let's create that for example up Dot and that would be post the method would be posting the URL would be upload slash we will get a request and response so before implementing this we should call a middleware here this meta melter we should use first of all motor okay to handle our file that we have uploaded so for that let's write the boilerplate code for the motor const storage is equal to melter dot storage disk storage okay so this has two options or parameters we can see that the first one is the destination okay for the destination it means where you would like to store your file it will have a function request file and callback function create this so we will just use callback function so to call the call but we will write like this okay first parameter would be a error for the error we will write to null and the second one would be the path where you would like to store your images we would like to store our images inside server folder inside public inside the images so we will write like this web link slash images here we would like to store our images then the second one is the file name again we have request response file and callback function here we will handle our file name again we will call CB callback function inside that first one is the error we don't need for that null and in which here we will handle file name whenever we are storing in this image folder which name we should assign for that okay so we will first of all check file dot field name okay so it will take the field name field name is the one that we are passing from this file folder okay for example we are assigning image name or file name whatever we are assigning so it will get that plus we will attach with that this side minus okay our underscore we will attach that plus we will assign it dot now that Now function and after that we will use path dot extension name file dot original name so it will take what it will do I will just explain it to you so first of all it will take the name that we are passing from our file float folder that would be image or upload okay whatever we assign then it will attach the sender score then the time in millisecond okay then it will attach the extension of our file Okay so it is done now so now let's use here [Music] so now let's write const upload we will name it upload is equal to multi and we will pass it storage and we will pass the storage variable that we have created this one okay okay so now we will call this upload a middleware here let's come here in this upload API inside between this function in this route we will call that upload that we have different options here okay you can sit whatever you need multiple but we need single file to uh upload okay so let's pause it so here we should write the name that we have passed from this file upload okay uh we will name it image okay later we will assign use that there so we will name it image so after this let's write let's cancel it cancel that log request dot file so it will print all information about file okay so let's pass from our front end so here we will for example we will create a forum data object const form data is equal to new form data we will create this object and we will attach our file with this so we will light form data dot a paint name it image so see we name it image as we as I used it there image and we will attach our file with this yeah we did it so after that let's uh call our API access we will use XCS for that dot post we should write our URL here but first of all we should import axis import access from axis and here we would like to write our URL our URL would be like something like this okay localhost that should be ET 81 copy this and use it here and also upload attach it upload with that this one okay this upload and after that we will get a result let's just display that has any error okay so now let's try it and see what happens first we will come to our note yeah here what we are getting from this console okay from this console that we wrote let's try it let's come here industry let's come here to the console what we get at the front end from our console let's choose a file oh these are all thumbnails let's press this one and upload it after upload let's check it and Define see we didn't get our image so let's check it what is the problem I think I didn't pass the data yeah I didn't fast editor let's pass it Forum data yeah now let's try it again let's press this save we got an error access error and let's check it here where is the error DB null public images your DB is not a function where we use that let's come here console.log okay DB is equal to my simple dot create oh sorry this is CV foreign load it again and let's check it now yeah we got this information see image this was the name of the image this is PNG type and Public Image is in this folder and this is the file name which we have created okay and these are all information about that so now let's assign and store it in our um database to store it in the mySQL database we will simply come here to the API upload API okay here instead of console we will write our query const image is equal to first we will get our image so for that we will take request dot file dot file name okay it will give us our image okay this image is let's check it see this image name it will give us this image name after that let's write our query SQL we will just update our database okay that we had before the users okay we will just update separation we will just update these images let's write SQL update users and sit image is equal to question mark okay let's write run our query db.query we will pass our SQL after that we will attach our image with this and then we will get an error our result so let's pass our if we got an error we will return result.json a message error else we will return a result return Json status let's come here now whenever we get that so we should display if result.data Dot status was equal to equal to with success so then we can just console.log succeeded else print a message failed so now let's check it that we are storing our that is updating or not just come here upload an image let's press this one let's press the update button we got an error let's check it where is the error here is no problem but here we got the error so here is no problem we don't have any problem let's check it we got succeed message okay we got this message so let's refresh our database let's check it see the image is received in these input Fields okay so now let's fetch them and display them and the users okay on the screen so we should display them in this here on the screen so for that let's write a query we will use use effect took function and here we will call our axis that get our API our route just simply like this and we will get a result we will just cancel the result dot cage if we got any error we will just skip that here okay whenever we run our applications we will get this run this use effect hook and it will go to this route and let's create this route here inside have the ticket it is just simple as slash and we will get request and response we will write our query because equal to select steric from users and let's run it baby.query you will pass our SQL here and we will get an error a result .json error else return and as we should write here return a return result.json we will return our result that we got from running our query so let's check it now let's come here to the console let's refresh our application whenever we refresh so we will get a result from our server size here we got this result we got resulted data in two images two query cards okay so now we will pick just the first one the first image and we will display that so to display that for that Yeah by default first of all we should check that is it accessible or not this image okay uh where is the image let's check it yeah this image is it accessible from our server side or not so for that let's write here first of all our server side slash images folder our images are in the images in this image name so it is not accessible okay so to make it accessible for that we will write in our server side use um Express I think that static and we will pass here the public folder yeah it is like this okay we can access now our public folder from our server side okay this is the public and here we have these images so in the MX public we have images folder inside that we have these images which we have uploaded okay so we can access this quick public folder right now so let's check it now see this is the image see we got this image right now okay so now let's come here to the front end and we will just assign the result that we got to our variable okay let's create a variable here const image set data set data is equal to use state it is in Array with us so we will assign something like this sick data result data in the first record the first row assigned to this data so now let's frame just the image of that we will come here down and here we will print images um and we will just display the image like this data dot uh image okay dated the image it will display that from that record so let's see get what happened in V phase within error const where is where is the mistake let's check it this is should be caused yeah let's check it now and let's see again what is the error yeah we got the result oh no sorry so we should write something like this okay to display the image first of all as we displayed here the image we should just copy this path copy this file and we should attach with that with our image here in the printed let's come here here we should write here first we should write our part okay that we copied and plus data data image let's check it now Let's see we printed our image see the image has printed so let's make it a little bit add some design to this Style width should be like 500 pixel and it should be a little pixel see we displayed our image so it was all about this tutorial that posting image to my secret database using node.js and react.js and displaying back them okay so I hope this video was helpful for you if you like the video don't forget to subscribe our YouTube channel like this video and comment down and support us thanks for watching

Channel: Code With Yousaf

Views: 7,420

Keywords: image upload, react image upload, how to upload image in react and node js, image upload react, upload image react js, image upload react js, file upload in react js, image uploads with react and node js, image upload in react js, upload image in react js, how to upload image in react js, profile image upload in react js, how upload and serve images using react node express?, nodejs image upload, react, How to Upload Image in MySQL using Node js and React js?

Id: dLXSJdTK9QI

Length: 26min 38sec (1598 seconds)

Published: Sun Apr 02 2023