Uploading Images & Videos in Next.js with Cloudinary - Dev Hints

Set up easy image and video uploading for you or your visitors in a Next.js app using the Cloudinary Upload Widget.
Learn how to setup and configure the CldUploadWidget component including adding the ability to sign uploads for secure uploads to your Cloudinary account.
📝 Next Cloudinary CldUploadWidget Docs
next.cloudinary.dev/cldupload...
Instructor: Richard Bray (@RichardBray)
--
Cloudinary helps developers build performant experiences for the web with powerful optimization and transformation APIs.
🚀 Get started with a free account!
cld.media/nextclduploadwidget
#cloudinary #devhints #nextjs #uploadvideo #uploading #fileupload #webdevelopment

[@arditqerimi745]

I placed all secret variables in .env, also in server action I am able to console all of them, but again it says API Key undefined

[@colbyfayock]

do they match the following names? NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="" NEXT_PUBLIC_CLOUDINARY_API_KEY="" CLOUDINARY_API_SECRET="" API key needs to be public specifically

[@eunarussia8833]

I'd like to know how do I upload multiple images with cloudinary (using Next.js)

[@colbyfayock]

if you're uploading in a node environment, here's a video that can help: kzbin.info/www/bejne/lZO3iWWCZc-DsKM otherwise, let me know how you're uploading and i can give some advice

[@user-dz3ub5pb6v]

index.mjs:1 Missing dependency: Signed Upload requires an API key that is what I have in the browser's devtools console when just after refreshing the page... I have created the same api route, and it even generates a signature as I see in the server console but when I am trying signed preset it says "uploading 0 assets" and doesn't end uploading at all, as in the unsigned preset case where even if something goes wrong with the preset name, it is trying at least to load that image and once it is 'uploaded' it just says something like: "there is no such preset". I tried all the same code as in the video and it works well with unsigned preset, but with the signed one, it requires an API key, and I can't find a good resource where I will see where to pass that API key. I have tried to pass it in the as a parameter, but it doesn't distinguish it, and nothing except for chatgpt says that it can be used that way. There is no source which will have the good description of how to do signed preset uploads with CldUploadWidget

[@raj-dr2iy]

In order to sign the requests, you need to use Cloudinary API Key and Secret, so set additional environment variables: NEXT_PUBLIC_CLOUDINARY_API_KEY="" CLOUDINARY_API_SECRET=""

[@colbyfayock]

@@raj-dr2iy is there anywhere i can add something to make this more clear?

[@raj-dr2iy]

Sure! Firstly, ensure to set up a .env file with all the credentials in the project's root directory.@@colbyfayock

[@maneshwar3468]

@@raj-dr2iy Thanks for sharing.

[@maneshwar3468]

@@colbyfayock Yes, include about the environment settings in the video.

[@_bestbeast]

I am facing problems that I am not able to click any link aur button of upload widget

[@colbyfayock]

are you using CldUploadWidget? try checking out this example that shows how to set up a button, including adding the onClick handler to open the widget: github.com/cloudinary-community/cloudinary-examples/blob/main/examples/nextjs-clduploadwidget/pages/index.js#L44

[@lev1ato]

I am not able to build production nextjs app with: import { v2 as cloudinary } from 'next-cloudinary'; it says: Module not found: Can't resolve 'http' and so on for all the modules Please help me

[@lev1ato]

export const runtime = 'edge'; Breaks it, but it is needed for deploying to production.... Please help me figure it out.

[@colbyfayock]

@@lev1atohey unfortunately the Node SDK isn't supported on Edge runtime :( you would either need to use the standard runtime for the endpoints that use the Node SDK or manually write the code to hit the REST API and sign the requests. i have an example of how i've done that before here: github.com/colbyfayock/tweezer/blob/main/src/pages/api/upload.js

[@mantasbeniusis9777]

You should import it from a different package. Note that it is from 'cloudinary' and not 'next-cloudinary'

[@lev1ato]

@@mantasbeniusis9777 yeah I made a typo above, but the example Colby gave me actually helped me solve it. I just had to make couple of changes to make it work with the Next.js App router.

[@keyzhao1775]

only cover image not cover uploading video as title

[@colbyfayock]

hey you're right in that the video doesnt specifically upload a video file but the same exact process works just the same for videos (or any other files) unless you limit it specifically to images, so it "just works"