Uploading images to cloudinary via Nextjs + React-Hook-Form + Zod

Pedro_Souza

Hi, after resolving a problem with my next app, i decided to make a quick tutorial from what i have done, making it clear that this can be not the best example, its just a test.

I used React-Dropzone to catch values and React-Hook-Form to handle my form (that contains name, description and an optional array of images):

(i will skip react-dropzone cause its not the actual meaning of this post).

after that, i create a function to recieve the array and send it to Cloudinary:

I call this function in my react-hook-form submit function (with the help of ZodProvider):

This function is responsable to make the call from next js project route:

And this function in the next api:

Hope you liked this quick tutorial

millie_axelrod

Hi Pedro,

That's fantastic! It's wonderful to see community members like you taking the initiative to not only solve problems but also share their solutions with others. Thank you for your contribution and willingness to help others learn and grow within our community. Your efforts are truly appreciated!

Kind regards,
Millie

Pedro_Souza

https://community.cloudinary.com/discussion/comment/1394#Comment_1394

Thanks!