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: nextjs-upload-devat.vercel.app/
🔥Join member to get source: / @devathtml
🔥Source code: www.buymeacoffee.com/qk1dkys/...
🔥Source code: / 85741604
📚 Join Membership:
/ @devathtml
📚 My Courses:
• Playlist
📚 VScode Extensions:
ES7+ React/Redux/React-Native snippets
Community Material Theme
Material Icon Theme
☕☕ Buy Me a Coffee . Thank You ! ☕☕
www.buymeacoffee.com/QK1DkYS
Paypal : paypal.me/tuananh251192
Vietcombank: 0061001044348 (LE TUAN ANH)
Momo : 0374481936
🌎 Find Me Here:
Mail: battuosai03@gmail.com
Github: github.com/devat-youtuber
Codepen: codepen.io/tuan-anh-the-decod...
🚀 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
Пікірлер: 22
Demo: nextjs-upload-devat.vercel.app/ 🔥Join member to get source: kzread.info/dron/GRDayozk2qch3vw-qAtQng.htmljoin 🔥Source code: www.patreon.com/posts/85741604
Thank you from Argentina, this was reaaally helpfull, specially the part when you upload to temp since I was stuck there because of vercel and you had the answer!!
Thanks for video 🥰🥰
Thanks from Australia!!!!
@DevATHTML
11 ай бұрын
🥰🥰🥰
Hi, thanks for the tutorial! What would i use instead of these server actions when i deploy?
thank you for the tutorial, i really need this 😅
@DevATHTML
Жыл бұрын
🥰
love from bangladesh
what about upload pdf file?
Thank you for this great tutorial Can you you make a tutorial about How to update multi documents in different collections in one query at mongoose ?! I've never seen such a tutorial
Hello. I don't want to use a 3rd party storage service like Cloudinary for images and videos. I keep video and image files under public with Multer, but in this case, images and videos uploaded later in production environment don't work. I want to keep the uploaded videos and images on my own server. How can I do this? Do I need to create a separate backend using Express or something similar?
@investandcyclecheap4890
8 ай бұрын
did you ever find an answer? this is a good question
The nextjs version in my project is 13.5 and it gives an error, can you help me with this and when will the new one of these great videos come?
Làm 1 trang hoàn chỉnh có tiếng về next 13 cho member đi a
Hello, I'm having this error in deploy, in my local everithing works well. errMsg":"Server return invalid JSON response. Status Code 500. SyntaxError: Unexpected token < in JSON at position 0". I don't know how to continnue. Please, can you help me?. Thank you!!!
@BoldBrainBox
9 ай бұрын
I'm stuck in this error too
@criptoflashes
9 ай бұрын
@@BoldBrainBox I cracked out, I. just switch to the Next.js version that Dev A.T Viet Nam use. 13.4.19, try that! I can't believe I've spend so many hours in this error
a ơi anh có thể làm 1 seri full E-comer nextjs13 dc ko anh, chức năng như Seri E-comer a từng làm bên Nextjs bản cũ á anh ^^. Rất hóng ạ.
@DevATHTML
Жыл бұрын
Ok sắp rồi á, chờ nextjs nó update thêm một vài version nữa, chứ giờ vẫn còn một số lỗi nên chưa làm được
Be careful, server actions are an alpha feature, don't use it in production!
@DevATHTML
Жыл бұрын
Yes, videos to study