Use Server Actions to Upload Files in Next.js with Cloudinary - Dev Hints

We'll walk through using Server Actions to submit a file in a form, using FormData to capture the image file, and uploading the image buffer using the Cloudinary Node SDK upload stream API.

📝 Cloudinary Node SDK

--

Cloudinary helps developers build performant experiences for the web with powerful optimization and transformation APIs.

🚀 Get started with a free account!

#cloudinary #devhints #nextjs #upload #serveractions #images #webdevelopment

[jhkadvkj]

Great video, just what I was looking for

[mystupidbrain]

Thank you. Exactly the video I was looking for.

[totallynotdavid]

Good video, I tried to build this with Cloudflare Pages with the nextjs-server-actions-upload project in the cloudinary-examples repo. But got this error:

The following routes were not configured to run with the Edge Runtime: /index

Is it not possible to deploy this through Cloudflare Pages?

[mariocrusso]

Works on Localhost but when pushed to vercel, don't work.

[MarkusNode]

Great video - thank you!
Can you also please show - how I need to design a nextjs 14 component - to automatically upload the entire contents of a windows directory to Cloudinary and automatically tag all images via AI?

[elieserlaguerre]

thank you for posting this video, but I don't have a question though, do you have a version where the code is not in typescript? I was trying to follow along but I got stuck because I'm not using typescript.

[mphatsomtogolo]

What if I wanted to submit a form with a couple of input fields and an image as well. Say for example, a blog. How can I do this? I used to use filepond with express js and I just started learning react.

[kaushaljoshi]

How can I setup cloudinary config in a separate file, and import it whenever I need to use cloudinary?

[whezboo]

can we get the url for the uploaded image and store in a different database?

[AndrulisTravel]

Nice! It would be useful to have multiple image (with restriction to jpg, png and etc.) upload with some nice drag and drop functionality :)

[SkyNightSnow]

What would be the correct way if I wanted to upload an array of images?

[hichamamroussi]

Why did you convert the image to a buffer and you didn't send it directly as a file ?

[heuvije]

there is also a next-cloudinary package isn t it ?..

[Maskedlapis]

Does this work the videos too? I want to upload videos and images

[coding]

Its work perfectly in dev mode but in build it crash

[alihammad]

Files error
Error: Error: [object Object]

[HueCodes]

i don't know what with this tool i use nextjs and use next-cloudinary it has the worst docs i don't how to get the image to show in my project. adn this video only make it more confusing to me

[lukassmida]

This DOES NOT WORK for utf-8 characters.

[danipuntocom]

Hi Colby! Thanks for your awesome videos!
Any idea on how can I remove files from the file array?
I've managed to remove the previews, but the input file array stays intact.
When I submit the form, the original file list is sent to the server action.
Is there any way to send a modified file list through the server action?
Thank you and keep it up!!