Uploading Files with React + NodeJS and Multer

hello everyone welcome back to go to this sub channel in this video we will just upload a file using node.js okay we will use the mutton library to upload the file and for the front end we will use react is because we need to create input field so after selecting a file we will upload that using node.js and we will store that inside our app okay the best way that I should show you how to store your file and how to upload it this is the monitor Library okay that we will use to upload a file so first you need to install it in our server side up okay here I have created two apps one for one is the react app and the second one is the server we want to implement our node.js our pocket use multi Reno Json to upload the file but I have created just the react app to show and to create an input fields in the browser to select a file in this server side app I have just created I have installed motor and let's check it yeah this is the motor which I have already installed if you didn't just copy this and install install it inside your node app after installing it so now let's first of all we will create an input field to select a file so this is an input field and this is a file with us and change whenever we change it for example we select a file we should store it somewhere so to store it let's create a state variable here set file is equal to use state hook and here I will just sit to this file which I have selected inside this file variable State variable so to set that I will just use this Arrow function and I will call set file method and I will write e dot Target Dot files 0 okay the first one so after storing it inside that variable let's create a button whenever we press the button we should upload that file okay by clicking this on click we should call upload for example the fluid function okay let's create that so here now we will just upload this file okay to our nodes is our node up so to upload that I will use access Library so which is HTTP request and response Library let's import first of all that already installed axis axis dot post and after that I will specify the URL okay what is our URL our URL is http localhost yeah it's GTP we should write it in string after that the port number our server side port would be three double Zone I will show you it later and after the route that would be upload for example okay we will upload this API upload API we will create it later and then we will specify our image here okay so to specify the image to upload the file we will just use Quorum data object const form data is equal to new Forum data so here Forum data data paint like file then file okay now let's pass this forum data after that we will get a result so I will leave it empty dot cage you can get an error make it a response if that's it right now so whenever we pass this so now we will move to our server side app let's move to our server side and this is our server side app and this is the index file where we will write our code okay this is a lid which I have imported Express which is a framework to write our code and course which is used to for the to access our server side in the front end and then we created an app and then we use those cards and also this Express transition which is used to transfer our data which we are passing from fronted to the Json format and here we run our app so now let's create that API that upload API okay this one upload API post load this is our API here we will get a request in response so to use multi okay to get our app install that somewhere else so I will store my image inside this piplate and here I will create one another folder by the name of images I will store my image inside these images okay to store that I will use melter now so upload to import in a multi I will light counts melter is is equal to require melter after that I will use it now so first of all I will just specify the storage okay storage is equal to motor dot disk storage inside this I will just specify to um options too we have two options here to use okay the first one is we will specify the destination where we want to store our image destination and here we will get create a function now inside the function we have three properties the first one is the request okay the request that we are passing okay this request then we have the file okay the file which we have uploaded in the third one is CB callback function so now we will just create let's return this callback function okay inside this callback function the first one is the error with as if there for example the user is not login or someone some what else so right now we don't have any error we don't want to enter that and after that the destination where you want to store your image here we will specify just the path so let's specify that that is populated AS Slash images the second option with us is the file name again we will access those three times again first is the error we will write to null for that and the second one is to specify the name okay the file name a string so to specify the name we will obtain a date okay with every file that we are uploading we will like something like this okay let's just try it foreign and after that we will just open now the file data original name just write something like we should close it here and then I will start it again yeah now we'll try slash energy here I will just write file dot original name so it is the name of our file then I will show you okay how it looks like after that we will use the multi middleware just come here I will use that let's write cast upload I will name it upload is equal to motor specify the storage storage and we can just write storage because both are the same after that I will whenever we come to this route we will call this middleware okay to call the table light just like upload dot single it means the single means that we can upload we will upload just a single file if you want to upload more than a month then we can specify array or Fields okay that is an array but right now we want to upload just a single one and here we will specify the name of file what was the name of our file that was this file okay we'll just name it file so now let's cancel that log request dot party and cancel DOT log request Dot file let's seek it now what happened okay and just come here and we will just let's run our boot off front end in server side CD client first of all the NVM run due first of all I will learn this front end up let's move to this URL yeah we run that and let's run our server side up CD server and then start service is running okay so now just let's come here and we will just specify file like image let's press the upload button let's check it see we got this okay this is the path in file name and destination and let's check yeah the image has uploaded here see this is the image that we have uploaded right now in this image folder but what we do if you want to store it inside the database so for that we will just store um this path okay this one this part file name if you store this file name inside our database then we will retrieve it back into display through the URL okay so it was all about uploading a file using melter in node.js I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 5,827

Keywords: multer, how to upload files with react and nodejs, uploading images with node, node multer upload multiple files, how to handle file uploads with multer and express, react file upload, react, file upload in node js using multer, image upload in react js, how to upload and view pdf files in react, upload image in node js using multer, node uploads with multer, profile image upload in react js, upload files with node.js, upload image in react js, how to upload files with node

Id: -7w2KtfiMEM

Length: 11min 27sec (687 seconds)

Published: Wed Jul 26 2023