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

[@AneesPGP]

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

[@auroralitheroy8567]

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

[@studywithbii]

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

[@teddy2333]

what i've been searching for. Thank You

[@geanselle4863]

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

[@Neera-codes]

Thanku bro it was really helpful 😄 , subscribed you !

[@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.

[@akshaikumar6001]

Bro after uploading when i click on the link which sent by the cloudinary api its shows failed to load PDF document how to fix this? Should I give any permission?

[@finshiyavp]

Thank you sir....very helpful

[@pnpcre.....5975]

Thanks, very helpful. Really thanks.

[@yomum9404]

This was excellent! thanks !

[@akashkaushik8684]

thank you bro!! , it is very helpfull

[@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

[@neoTriny]

what a wonderful video

[@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

[@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

[@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

[@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

[@sanzzz24]

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

[@thedebugarena]

Didn't get you.

[@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

[@LuisCarlos-kp3mv]

Amazing!

[@ErnaganitheshNaganithesh]

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

[@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.

[@malikbhai2285]

Thanks sir

[@thedebugarena]

Stay Tune for more

[@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

[@loopless6248]

need your help where can we connect

[@thedebugarena]

Dm me on instagram @the_debug_arena

[@Ali404Y]

Thank you

[@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.

[@mabinaya1314]

📌

[@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 !!

[@Smit-j8n]

thank you bro!! , it is very helpfull