How to upload PDF files in React js Node js Mongo Db using Multer | Upload files with multer Node js

hello guys welcome back to the debug arena in this video I will show you how you can upload PDF in reactjs by using MTA in nodejs and we'll store the PDF inside mongod devv after that we will retrive the PDF from mongod devv and we'll show it inside our react application so first let me take you to the demo of this small application here you can see currently I'm having this five PDF so first I will delete all of them for that I can go to my mongodb this is my where my PDF I stored so I will delete this I will come here refresh this here you can see we are having these two input boxes the first one is the title of the PDF and the second one is the file picker so I will give title as PDF 1 then I will choose the PDF file it will accept only PDF and I will give it as this Anya then I will click on submit I will got this popup PDF uploaded and when I click on okay the PDF is listed here let me give another the PDF I will upload one more and you can see here all the three PDF are listed here and when I click on this show PDF we are able to see the PDF for this I have used react PDF let me just click on this second PDF and the second PDF is loading you can see it page number is one of6 and when I click on third PDF third PDF will be loaded so let's make this small application okay first let me tell you the blueprint of what we are going to do so I will upload my PDF file from react at backend I will receive that file with the help of wter I'm going to store that file at some particular location that is our backend file if you have watched my video on how to upload image in that there was a prerequisite that our front end and the backend files would be in the same folder but in this you can keep them anywhere after that I will store only the name of the file in mongod so that even if our PDF size are larger we can access them quickly this method will work work everywhere like even if you host your front end and backend folder at some different different domain it will work totally fine so let's start coding this is my app.js currently I'm rendering only this text this is the output so first let me create the UI I will not focus that much on UI so I will remove this I will create your form class name as form style here I will give H4 here I will give Break Tag after that I will create to input box let's add some properties to them this input works will accept the title its type is text class name is form control I'm going to use the boot step so that's why I have written this after this placeholder is title and this is required for file I will give type as file class will be same as form control and here we have to give accept application SL PDF so that it will only accept PDF and I will give required here I will hit save before using bootstrap let's check the output and you can see we are getting like this let's add the bootstrap to add the bootstrap you can install the package using npmi bootstrap and then we can come to index.js and here we have to add these two lines now when I hit save let's go to the output and you can see it is looking much better again come back to project now let's add some CSS properties for that we can come to index.js I've already written the CSS so I will uncomment this and you can see here I have written CSS to Center our form after that this is to style the form D and this is to give the border to our form control which is provided by bootstrap I will hit save let's check the output and you can see it is looking much better okay here let me give some break so I come here give break here and same break here okay let's check the output yeah it is looking good now let's add the button Also let's save this here I have given this class as button button primary this is the class provided by bootstrap and you can see it is looking much better I just zoom out yeah much better let's go to the code and create a function to accept this to I'll come here I will create one state name as title create one more state name as file then I will come here to the input box of our text which is Title Here I can write on change and on change I will pass this value inside our state for that I can write here set title and it will be e. target. files sorry not files value now let's create the function to accept the file I will come here write on change and on change I will accept the file and store it inside our state which is files so I will write here set files and in that I can pass e do Target dot files and we have to accept only first file for that I can give it here zero so it will accept only first file okay it is done so now whatever we will pass inside title or files we will store it inside this two states now let's create the function which will be called on this submit button so I will come to form right here on submit and we will call submit image I will come here create this function in this I will keep this as a sync because we are going to call xos here and I can pass e here so the first thing is I have to prevent the app from reloading for that I can write here e do prevent default after that I will create a new variable name as form data which will store our form data for this we can use object provided by JavaScript which is form data we can write it like this now in this form data I will store my two variables so we can store like this form data do appen first will be title this is the name of the variable which is title and we are passing the value which is stor in this title this is the state after that I will write again form data. append and in this we will pass file this is the variable name and inside this the value will be file now here let me just console this two variable title and file I will save let's go to our application open the console here I will give title as PDF 1 I'll choose some file and you can see we are getting only PDF files I will choose this click on open now and I click on submit you you can see I'm getting the title and the file now we just have to take this two data and store it inside our mongod so let's do that for that I can go to the back end folder this is my backend code I hope you already know the basics of nodejs and mongos but still let me take you through what I have written here so here at the top I have imported this Express and using it inside this variable app after that I installed this MOS here I'm doing the connection with our mongodb and if the connection is successful we will get this message connected to database and here I have just written the basics code to see whether our Port has been started successfully or not and if our Port has been started we will get this message I have already started a server to check that I will come here and you can see I'm getting this connected to database and server started and if you don't know this Basics things then you can go and watch my previous video I'll give the link in the description at there I have explained nodejs and mongodb and all these things from Basics so you can go and watch that now here the first thing we have to do is to install the the malter so you can go to Chrome search for npm malter click on the first link you can run this command to install the molter I've already installed it let me just go down here is the example of how you can use MTO so we have created this form in our reactjs after that I've also installed this Express now let's copy these two line I will go to our project and here I will paste that inside my package.json you can see the molter is already installed and these are the packages which I'm using now I will go to app.js the first line is importing the molter in our project and the second line is defining the location where our PDF files will be stored so I will change this uploads we can write like this and it will be files now I will create the API it will be post API name will be upload files so normally this is the structure of our API but in case of MTO we have to add one more here which is upload so I will write here upload dot single this means it will upload single and the variable name is file this file is referring to this variable which we passed here I can just come here and I will just console.log request. file and I will save the moment I save you can see here one new folder has created which is nam as files but you know this is not the correct way because if we upload the PDF because now if we upload the same PDF twice it will be of same name and it will be on same location so it will be difficult for us to verify which is the correct one in that case we can Define this destination and file name dynamically for that I will remove this line I'll go to documentation I'll scroll a little bit down and and you can see we have got this code so I will copy all this come to our project and I will paste that here here we are assigning this storage with a customized destination and file name from MTO we have got this dis storage in which we can set destination and file name dynamically so inside destination I will pass our destination which will be do files so it is done and here we will change the file name so that all the files will have different names here we have created this variable name as unique suffix and passing date dot now here and we can remove this and here I assigning the file name so our file name will be unique suffix which will be current date and time and after that I can pass file dot original name now our file name will have the original file name also with the current date and time and at last here we are passing that storage as a variable now I will hit save now let's go to the front end folder and call this API for making API call I'm going to use exos I have already installed it so I will import it now I will come inside this function submit image we are already getting this title and file inside this form data so I will come here create a variable name as result it is already asnc so we can write here await exos dopost here we can pass our URL so for URL you can go to Chrome type Local Host and your port number mine is 5,000 you can see I'm getting success it means it is totally running fine I will copy this this success is coming from this backend folder and with this get API here I am writing success that's why it is coming now I will go here I will paste that and my API name is upload file now inside this we have to pass this form data in our form data it is containing two data one is title file title have this value file have this value and because we are passing form we can also pass one parameter here name as headers and it will Define that we are sending the file okay we are done now I will come here and I will console. log this result so whatever response we will get in this we are storing it inside this and we are consoling it here currently we will not get any response let's go to our application let's give the title choose any file and when I hit submit we are getting the error what is error let's see okay cannot post upload files let's see what is wrong here and okay I have not added here so we have to come here add like this I will save again go to application reload this give the title choose the file submit again we are getting one error let's see what is the error no such file or directory let me just say okay I have written here files like this dot we have to give this also I will hit save again I will go to the application reload give title choose file mongodb tutorial when I open this click on submit and we are getting this response okay so I'll come here to my back end and you can see I have added this response s High and here inside these files you can see we have got one file so for now it is totally working fine like we are able to upload the PDF from reactjs and get it inside the nodejs and store it inside some folder using MTA now the next thing is we have to create the schema for that I will come here I will create new file my PDF my schema name will be PDF details here I will input the mongos after that I will write here con PDF schema I will give you a new schema inside this I will write like this and here I will pass the variables So currently we are having just two variables one is PDF and it will be of string and the other one is our title which will also be of string here I can pass my collection name like this and it will be PDF details at last we have to write here mongus do model here I will pass our collection name which is this PDF details and the schema which is this PDF details schema we don't have to write the in codes and it is done now let's save this now I will come to my app.js and you know we will get our title inside request. body and we will get our files inside request. files so let me just create two variables save you can see I am getting this title from request. body storing it inside this title same as file name I'm getting it inside sorry I will to write your file so we are getting file name from request. file. file name now let's import this schema in our folder we can do it like this I will write here require I will pass my file name which is PDF details after this I will create one variable name as PDF schema here I will write mongus do model and our model name is this PDF details so I will copy this paste it here so what it will do whenever we access this variable it will go to our schema and check whether the data exist or not so I will come here make try and catch block inside try block I will write here a wait I will access this variable name as PDF schema and I want to add the data we can add the data through create inside this I will pass pass this title this title is referring to this title here which is the variable and inside this I will pass the value which is refering from this variable title so I will write here title same thing for file name also for file name we will write PDF and for Value we will write file name so I can write like this now when it is done we will send response. send status as okay make sure when you are sending the Json you have written this code Express or Json now inside error I will send one more response okay done I will hit save I will go to our application I will upload the first PDF so PDF 1 choose file it will be sample PDF and when I submit you can see I'm getting this data and it is saying status as okay let's go to our mongodb refresh this and I'm having this schema name as PDF details and when I go there I will see one PDF which is PDF 1 okay my PDF file is not storing so let's see why it is that okay it is because I have passed your file name like this we have to pass it like this n small now I will hit save again go to application I will delete this schema come to application reload this I will pass as PDF 1 PDF will be this sample hit on submit I'm getting data status is okay go to mongodb refresh the schema I've got this PDF details click on that and you can see here we are getting this Ty as PDF 1 and we are also getting the name of the PDF so it is working totally fine like we are uploading the PDF storing the PDF inside one folder and storing the name inside the mongod DB now let's try to access this PDF how we can access them one idea is that I can access the backend folder then access the files and then access this file but that is not possible from anywhere like this is local was 5,000 and if I come here write file and after that pass that file name will it be accessible the answer is no any file is not accessible like this it should have some permission to give that permission we can go to our node folder I will scroll up to make this file accessible we just have to make this file as static we can do that like this app.use inside this first I will pass my location which is files after that I will write Express dot static and inside this I will pass files so it will make our this folder static that means it will be accessible from anywhere and it will return the data so I will go to our application refresh this and boom you can see we are getting the PDF now to get this PDF inside our react we just have to access this location dynamically so let's do that so first let's create the API to get the data from mongodb to react for that I will go to my backend folder scroll down I will create a get API here it name will be get files here I will write try and catch block here I will access our schema which is PDF schema. find it will find all the data inside our schema then I will use promise then I will try to send this data in form of response okay done I will save to check whether data is coming or not I will copy this go to our Chrome go to Local Host 5,000 and paste that AP name and you can see here I'm getting my data so it is working fine now let's go to the front end and get the data for data I will create one state here name as all image and it will be set all image now I will come here this is the function to get the data from backend its name is get PDF here I have created this variable name is result this is my API link and here whatever data I'm getting I'm storing it inside this variable now to call this function we can call it inside use effect so that it will be called only once and here I can pass mtrl Rel save now let's go to our application refresh this and you can see I'm getting one data let me just upload one more PDF I'm getting this uploaded successfully okay now when I refresh this you can see I'm getting two data which is two PDF now let's create the UI for this and you can see this is the UI like this division okay sorry Ive written it inside the form so I will remove this I will paste it here so inside this I'm having this div with the class name is uploaded this is ed4 this is to Output div and the inner div and here I am showing this title and this show PDF button let me show you the output and it is looking good now I will just have to map the data over them so I will come here our data is inside this all image state you can see here I'm setting all the data here so we can access it through this state now I will come here I will write like this all image do map data inside this I will just write return and I will return this cui just title and the button now instead of title I can write here data do title let me just save it and see whether it is working fine or not and you can see I'm getting this two PDF let me add one more PDF 9 I will choose one file click on submit uploaded successfully reload this and when I reload this you can see I'm getting this error cannot read properties of a n map why it is it is because when this code is run all image is empty so to tackle that what we can do we can come here we have already passed it null so I will just scroll down I will add condition here if all image is equal equal to null then we will not do anything otherwise we will map all image so this is the condition which we have to add so that it will not break now let's go to the application and you can see it is working fine and we are getting all the three PDFs now let's create this function so PDF for that I will come here I will create a function on click and on click I will pass show PDF and inside this I can pass data. PDF this is the PDF name which we are getting now let me just create this function I'm getting the parameter I will write it as PDF and now we are not going to display the PDF in our react application because for that we have to use react PDF package and the installation and setup of that package is a little bit longer so I will cover that in the next video for now what I will do I can write here window do open this will open the PDF at a certain location and we can give location as I will just come here go to that PDF and I can copy this location till files I can paste it here and after that the name of the file we are getting inside this PDF so we can access it like this and because we have to open this inside some other tab so we can pass it here blank and we can also pass this no referral now I will hit save let's go to the application I will reload the application and when I click on show PDF it is going there and it is opening sample PDF now let me upload one PDF name as Anye I will choose the file and it will be off tutorial point nodejs I will open it I will click on submit and it is uploaded successfully okay it is not coming here it is because here I am just alerting this uploaded successfully so here also I can call this function name as get PDF and I will hit save now let's come here I will again click on submit when I click on okay you can see there is Anime two times now when I click on this show PDF it should open not JS and yeah it is opening that that's it for the video I hope you understand everything and if yes you did then please like the video and leave comments so that I also know that you are learning from me and it just motivates me and stay tuned for the next video in that I will integrate react PDF and show it the PDF inside our application thank you

Channel: The Debug Arena

Views: 766

Keywords: upload pdf in react, react js pdf, how to upload pdf in react js, how to upload pdf in react js node js mongo db, store file using multer, multer in node js, upload pdf, how to upload pdf, pdf in react js, react-pdf, show pdf using react pdf, store pdf in node js, upload pdf in mongo db, how to upload pdf in react node mongo, uploading of file, file in react native, store file in node react mongo, show file from mongo node to react, react pdf upload to node, mern, learn mern

Id: Fvp6EDIPSCU

Length: 24min 17sec (1457 seconds)

Published: Wed Oct 04 2023