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

Hello Guys,
In this tutorial I have shown you how you can upload pdf in React JS. To do this we will take the help of multer in node js which will be responsible to store our pdf file at some particular location after that we will store the name of that file to mongo db. At last we will retrieve the pdf from mongo db and show it inside our react js application with the help of React-Pdf.
Frontend Code:
github.com/the-debug-arena/Re...
Backend Code:
github.com/the-debug-arena/Re...
Please Subscribe to my channel. Do share the video.
Thank You.

[@AneesPGP]

thanks brother...
You saved my day. I've been struggling with this for last 2 days straight...
thanks alot

[@teddy2333]

what i've been searching for. Thank You

[@auroralitheroy8567]

Thanks. I am able to complete my project watching only your video..

[@pnpcre.....5975]

Thanks, very helpful. Really thanks.

[@geanselle4863]

You are a god to me now. Thank you so much.

[@akashkaushik8684]

thank you bro!! , it is very helpfull

[@finshiyavp]

Thank you sir....very helpful

[@yomum9404]

This was excellent! thanks !

[@LuisCarlos-kp3mv]

Amazing!

[@neoTriny]

what a wonderful video

[@studywithbii]

If it works for me, truly, I’m gonna pray for you to get all the things you want in this life❤

[@Ali404Y]

Thank you

[@malikbhai2285]

Thanks sir

[@thedebugarena]

Stay Tune for more

[@gopinathkrm58]

I have a doubt how to handle the validation in the backend for the title (because even if title is not present file upload is happening)
I have the same case , but with image upload with title and description. If title or description is not present in the request then no need to upload, only when all 3 (title, description and proper image is present ) then only upload. But in my case the upload is happening (with valid image, but without title or description given). How to handle this scenario ?
I need to prevent the upload process if a title or description is not present

[@thedebugarena]

It is pretty simple. In backend api we are accepting image and title through req.body so after accepting req.body add condition that if(req.body.title==null) return res.json()
Make sure to modify condition as per your requirement and don't forgot to add return before sending the response.
Try this and if you are not able to do this then dm me on instagram.

[@gopinathkrm58]

​@@thedebugarena Thanks for the quick reply, below is my code - I am testing from postman - type as form data
app.post("/uploads", (req, res, next) => {
upload.single("photo")(req, res, (err) => {
const { title, description } = req.body;
if (!title || !description) {
return res
.status(400)
.json({ error: "Title and description are required" });
}
if (err instanceof multer.MulterError) {
return res.status(400).json({ error: err.message });
}
if (!req.file) {
console.log(req.file);
return res.status(400).json({ error: "File not uploaded." });
}
res.send(req.file);
});
});
This code works fine but only issue in validation.
First validate and if ok then only upload, but even though the title/description is not present file upload is happening.

[@mabinaya1314]

📌

[@sonasreedhar5867]

thank you so much bro

[@thedebugarena]

Next part is also out on how to show that pdf in react make sure to checkout that also. Thnx.

[@sonasreedhar5867]

when it uploaded @@thedebugarena

[@thedebugarena]

@@sonasreedhar5867 2 days ago only you can find link at the end of this video

[@anisoueslati5865]

i get this error
Module not found: Error: Can't resolve 'pdfjs-dist/build/pdf.worker.min.js'

[@thedebugarena]

Try to install pdfjs package again

[@rafiuzzamanafridi8782]

can we upload both images, pdf with separate multer middleware & having both together >? if yes suggest some resources

[@thedebugarena]

Yes we can upload both images and pdf with separate middleware. You can ask Chat GPT he will provide solution.

[@rafiuzzamanafridi8782]

@@thedebugarena ok nice

[@sanzzz24]

Bro i wanna attach image of pdf and pdf itself and display respectively, how do i do it

[@thedebugarena]

Didn't get you.

[@shankaridurgasree4965]

i couldn't get the folder "files" created after writing the code. How to resolve?

[@thedebugarena]

Try manually creating the folder and then upload the image or Dm me on instagram

[@shankaridurgasree4965]

@@thedebugarena sortedd! Thankyou

[@hoangng16]

The physical pdf is actually stored in your server. I suppose it'd be better to place it somewhere online, such as using Firebase or any cloud platform.

[@thedebugarena]

Yes buddy you are correct. When you will host your website you can give path to some folders of your server and this method will work. But this is also good way to store pdf at some cloud platform and then get from there. I will be making video on this also very soon.

[@hoangng16]

@@thedebugarena Yeah, thanks for the video. I love to build and share for improvement. My thought on the approach in the video is that it's not scalable.

[@thedebugarena]

@@hoangng16 you are absolutely correct. Thanks for sharing your thoughts.

[@amal-uz1cj]

how to take formData on backend side req.file or req. ?

[@thedebugarena]

There are many ways you can take but commonly used method is req.body. if you want more information you can watch first video of this playlist

[@shahinrohaman6257]

I got axios network error how can I solve it

[@thedebugarena]

There are many reasons due to which it can occur. First test your api through postman just to be sure that issue is with fronted. If you are not able to solve the issue dm me on instagram @the_debug_arena

[@tuhinchakroborty5782]

Same please help

[@loopless6248]

need your help where can we connect

[@thedebugarena]

Dm me on instagram @the_debug_arena

[@adityaparmar4996]

if i want to do this for jpg , pdf and docx all then ? let assume that we dont know which type of file user will be upload

[@thedebugarena]

You can just change the file type to all. In input box just give type='file' nothing much then it will accept all types of files.

[@user-lx5sk8px1j]

It doesn't work for hosted api bro. It is not a good practice.

[@thedebugarena]

It's should work you will have to modify that properly

[@amal-uz1cj]

When i console req.file it shows undefined

[@thedebugarena]

Try req.body and if issue is still there dm me on instagram

[@amal-uz1cj]

yes bro still i have problems .i passed the form data to back end but when i console req.body it shows an empty object. But when i console req.file it shows undefined

[@thedebugarena]

@@amal-uz1cj dm me on instagram

[@amal-uz1cj]

@@thedebugarena link?

[@thedebugarena]

@@amal-uz1cj the_debug_arena

[@gautamanand1201]

Following the worst practices, don't follow him guys.

[@thedebugarena]

Can you please mention the mistake also

[@bilalnaeem7158]

Reason?

[@destrobro7044]

​​@@thedebugarena I think he is talking about how you used require instead of using exports and imports, maybe I'm not sure.
A good video nonetheless 👍

[@thedebugarena]

@@destrobro7044 yes that's another way to import will use that In some other video.

[@josteins4501]

@@thedebugarena Your logic is pretty good but the thing you are missing are proper file structure and and proper seperation of logic. You could have easily broken down your code into more manageable components.(That's what react helps the most with) cheers !! Great effort !!