How to upload image to Cloudinary and save the image url to mongodb. using next js 13.4+ in app router

Question

I have a page where I have a file input field. User will select a image from device and press upload button. After clicking upload button, image will be uploaded to Cloudinary and image url will be saved to mongodb table. I want to do this in Next.js 13.4 using app router. But cannot find suitable guide. Anyone please help.

I tried using available resources i find online but no tutorial based on Next.js 13.4+ version.

Answer 1

Cloudinary has a tutorial on how to upload assets specifically for NextJS. The tutorial covers how to integrate the upload widget, upload preset creation, and customization of the widget.

https://cloudinary.com/documentation/upload_assets_in_nextjs_tutorial