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: battuosai03@gmail.com
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