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

  Рет қаралды 6,984

Cloudinary

Cloudinary

5 ай бұрын

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

Пікірлер: 15
@user-dz3ub5pb6v
@user-dz3ub5pb6v 4 ай бұрын
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
@raj-dr2iy 3 ай бұрын
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
@colbyfayock 3 ай бұрын
@@raj-dr2iy is there anywhere i can add something to make this more clear?
@raj-dr2iy
@raj-dr2iy 3 ай бұрын
Sure! Firstly, ensure to set up a .env file with all the credentials in the project's root directory.@@colbyfayock
@maneshwar3468
@maneshwar3468 19 күн бұрын
@@raj-dr2iy Thanks for sharing.
@maneshwar3468
@maneshwar3468 19 күн бұрын
@@colbyfayock Yes, include about the environment settings in the video.
@eunarussia8833
@eunarussia8833 Ай бұрын
I'd like to know how do I upload multiple images with cloudinary (using Next.js)
@colbyfayock
@colbyfayock Ай бұрын
if you're uploading in a node environment, here's a video that can help: kzfaq.info/get/bejne/lciEi5V9ldC0qnU.html otherwise, let me know how you're uploading and i can give some advice
@lev1ato
@lev1ato 3 ай бұрын
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
@lev1ato 3 ай бұрын
export const runtime = 'edge'; Breaks it, but it is needed for deploying to production.... Please help me figure it out.
@colbyfayock
@colbyfayock 3 ай бұрын
@@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
@mantasbeniusis9777 3 ай бұрын
You should import it from a different package. Note that it is from 'cloudinary' and not 'next-cloudinary'
@lev1ato
@lev1ato 2 ай бұрын
@@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.
@_bestbeast
@_bestbeast 5 ай бұрын
I am facing problems that I am not able to click any link aur button of upload widget
@colbyfayock
@colbyfayock 4 ай бұрын
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
Image Gallery in React with Cloudinary - Dev Hints
3:49
Cloudinary
Рет қаралды 4,7 М.
Simple Next.js Image Upload with UploadThing
16:23
Cand Dev
Рет қаралды 11 М.
2000000❤️⚽️#shorts #thankyou
00:20
あしざるFC
Рет қаралды 15 МЛН
Они убрались очень быстро!
00:40
Аришнев
Рет қаралды 3,1 МЛН
Smart Sigma Kid #funny #sigma #comedy
00:19
CRAZY GREAPA
Рет қаралды 8 МЛН
Uploading Files With Next.js Just Got Way Easier
12:20
Ravi - Perfect Base
Рет қаралды 77 М.
How Neovim saved me at least 30 minutes today
8:12
Rasmus Bergström
Рет қаралды 8 М.
I Created A Mobile App Using These Simple Tools!
10:48
Simon Grimm
Рет қаралды 612 М.
I use Drag and Drop to build modern Python Apps
14:08
Softlinks
Рет қаралды 44 М.
5 Tips and Tricks To Make Your Life With Next js 14 Easier
17:11
developedbyed
Рет қаралды 29 М.
МОЩНЕЕ ТВОЕГО ПК - iPad Pro M4 (feat. Brickspacer)
28:01
ЗЕ МАККЕРС
Рет қаралды 77 М.
Samsung S24 Ultra professional shooting kit #shorts
0:12
Photographer Army
Рет қаралды 18 МЛН
WWDC 2024 - June 10 | Apple
1:43:37
Apple
Рет қаралды 10 МЛН
DC Fast 🏃‍♂️ Mobile 📱 Charger
0:42
Tech Official
Рет қаралды 482 М.
Cadiz smart lock official account unlocks the aesthetics of returning home
0:30