NextJS Server Actions Upload Image Files to Cloudinary, Mongodb, Mongoose

NextJS Server Actions Upload Image Files to Cloudinary, Mongodb, Mongoose.

In this video we’ll look at handling file uploads using server actions in NextJs 13, we’re going to use signed upload in Cloudinary as our cloud storage.

🔥Main features:
– Saving files Inside Local Directory
– Upload files to the cloudinary

Demo: https://nextjs-upload-devat.vercel.app/
🔥Join member to get source: https://www.youtube.com/channel/UCGRDayozk2qch3vw-qAtQng/join
🔥Source code: https://www.patreon.com/posts/85741604

📚 Join Membership:
https://www.youtube.com/channel/UCGRDayozk2qch3vw-qAtQng/join

📚 My Courses:
https://www.youtube.com/playlist?list=UUMOGRDayozk2qch3vw-qAtQng

📚 VScode Extensions:
ES7+ React/Redux/React-Native snippets
Community Material Theme
Material Icon Theme

☕☕ Buy Me a Coffee . Thank You ! ☕☕
https://www.buymeacoffee.com/QK1DkYS
Paypal : https://paypal.me/tuananh251192
Vietcombank: 0061001044348 (LE TUAN ANH)
Momo : 0374481936

🌎 Find Me Here:
Mail: [email protected]
Github: https://github.com/devat-youtuber
Codepen: https://codepen.io/tuan-anh-the-decoder/pens/public

🚀 Please! Subscribe, Like and Share. 🔥
🚀Thanks for watching video!🔥
🚀Have you good day!🔥

#code #reactjs #nextjs
00:00 – Demo
01:02 – Setup Nextjs
02:03 – Setup Libraries
03:41 – Upload Form
06:12 – handleInputFiles
09:30 – Preview ( PhotoCard )
12:32 – handleDeleteFile
15:12 – ButtonSubmit ( useFormStatus )
17:26 – handleUpload
20:40 – Saving files Inside Local Directory
32:04 – Upload files to the cloudinary
37:34 – Get All Photos
48:17 – Delete Photo
52:20 – Connect to MongoDB (mongoose)
55:47 – Photo Model (mongoose)
57:09 – Save Photos to Mongodb
01:00:34 – Get All Photos
01:02:28 – Delete Photo
01:04:55 – Deploy Vercel