nextJS

I'm getting this weird error: Cannot read properties of undefined (reading 'node')
I'm using cloudinary nodejs api in a next.js 14 server actions. It has been working perfectly until recently. When I remove cloudinary from the project, it works perfectly, whenever i add it, i get this error "TypeError: Cannot read properties of undefined (reading 'node')". Please advise
Inquiry About Video Analytics Update Timing
I’m curious about when the video analytics get updated. I’ve tried using the iframe and the cloudinary-video-player along with the CldVideoPlayer from Next.js, but I’m not seeing any updates in the Video Analytics. Anyone know how often this data refreshes? Thanks for any help!
Invalid Signature : String to sign
I am using next js to develop my project. below is the code written at route.ts, I stuck on this issue more than a week. Please someone advise what exactly going wrong on below lines of code. I spent a lot of time to resolve this issue. youtube tutorials, chatGPT doesnot solve my issue. Please point out where is the…
Missing dependency: Signed Upload requires an API key
Hi everyone and thanks for your help in advance! I am trying to do a simple signed image upload to my NextJS app but I am getting this error: Missing dependency: Signed Upload requires an API key This is my 'pages/api/sign-cloudinary-params' file import { v2 as cloudinary } from 'cloudinary'; cloudinary.config({…
How do you modify the public id for an image asset uploaded with the CldUploadWidget component?
I have a nextjs app that is implementing Cloudinary uploads using the CldUploadWidget react component. Everything is working great except that I have been unable to modify the public id for uploaded assets. I have my upload preset configured in my cloud settings to allow overwrites, unique filename: false, and use…
NextJS 14 Image upload with Server actions.
Hi there folks.I've had some struggle with getting my code working in NextJS with Server actions and TypeScript. Now that I solved it. I would like to share my code in case somebody else stumbled upon the same problem. Lets first start with the page.tsx. I use Shadcn for my forms and custom hooks for passing some props to…
How can I upscale images programmatically without restriction to image size for my nextjs project?
I am building an AI image and video editing web app using nextjs. Based on the AI image feature I would like the cloudinary api upscale feature to upscale any images irrespective of the image size. How do I achieve that? Here is the cloudinary api uspscale feature code am using in my project "import { upscale } from…
Preserve multiple AI transformations
Hello, I have a NextJS application and I use the CldUploadWidget to upload images and the CldImage component to apply transformations. What I'm trying to do is the following: 1. The user uploads an image with a guy with black shirt and black hat. 2. Applies transformation to recolor the shirt to be white with the recolor…
Is there a way to crop custom coordinates using the React/NextJS SDK?
Hi! We use the nextJS component for displaying cloudinary images which works great. We want to build in the ability for admins to crop and move images around for profile pictures, which gives us a "zoom/scale" value and an x/y coordinate. It looks like both are supported via API, but not clear how we'd do this in our react…
Uploading images to cloudinary via Nextjs + React-Hook-Form + Zod
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…
Upload image to cloudinary using next js (App router)
I have been trying to upload an image from my next js app to cloudinary using App router version of next js. I will be really happy if someone can look into this for me.
"Error: Must supply api_key" in Heroku log
Everything works fine when I run my app on the development side but after I deploy to Heroku and my site is in production, I see in the Heroku logs.. "Error: must supply api_key". Not sure what's happening here, does it have something to do with the "unsigned" setting? I made the update to "Unsigned uploading enabled" but…
Upload API give me 502 Bad Gateway
Hi. I'm in a Next js 13 project. I tried to upload a image using an unsigned upload preset call restaurant and Upload API but it gives me a 502 Bad Gateway. This is my code 'use client' import { useSession } from 'next-auth/react' import { useRouter } from 'next/navigation' import { useState } from 'react' function…
Make file available upon user button click.
Using Node.js/Next.js. My API grabs some data, generates an excel file and then uploads the file to Cloudinary. When the user clicks a button I need the excel file to be available to them for download. It appears the excel file link is saved in result.secure_url. I'm stuck on how to get this link into a clickable button. I…
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME not recognized
made my .env.local with: NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="fdfsdfsdf" NEXT_PUBLIC_CLOUDINARY_CLOUD_PRESET="sdfnbyy" run with npm run dev on localhost ▲ Next.js 14.1.0 - Local: http://localhost:3000 - Environments: .env.local ✓ Ready in 1851ms but when i try to run widget i got this error: Uncaught Error: A Cloudinary…
Rendered image dimensions don't seem to match sizes attribute?
Hi, I'm building a website using Next.js and serving images using Cloudinary. I am using the next/image component and can see the srcset of 16, 32, 48, 64, 96, 128, 256, 384, 640w... in my rendered image's attributes. I am using g_auto,f_auto,c_fill,w_XXX,q_auto:best. I'd like to know why the returned intrinsic size…
search API subfolder
Hi! I am new to Cloudinary so bear with me... Right now the following code grabs all of my Cloudinary media, but I just need assets from a folder/subfolder. How can I specifically grab assets within a particular folder using the Cloudinary search API? Thanks! const results = (await cloudinary.v2.search…
How do I improve the upload speed of videos/large files to cloudinary?
Hi, Ive written the function below to allow users of my website to upload videos to cloudinary. Whilst the function works, it is extremely slow. Its not my internet connection, as I've got 50mbps up and to upload a 30MB file its taking 30-40 seconds. My users will be uploading video files of about 400-500MBs, so this speed…
405 Cloudinary ONLY on production using Vercel - Nextjs
Please help, 2 weeks stuck. So far no answers works, no AI, nobody, no workaround, I have no idea where to look anymore. Uploading images on development works perfect, on production 405. Add headers, take headers, change CORS, use Axios, change to fetch, clear cache, downgrade Nextjs, try different npm's etc... No idea on…
Why do some files get uploaded while others say "Could not decode base54"?
I have worked with Cloudinary's API for a few years so I'm basically doing the same thing I've always done, but I'm encountering this new issue. I uploaded avif, jpegs, etc and everything worked fine. Then I tried to upload a png which was created from a screenshot on my Macbook. It kept saying Bad Request 400 Could not…
Need help uploading nextjs prisma please?
I have no idea how to do it, I don't understand anything in the doc
getting issues in next-cloudinary package's cldVideoPlayer component
Dear Cloudinary Team, I hope this message finds you well. My name is Skysparko, a longstanding member of the Cloudinary community. I have consistently admired the quality and efficiency of your services, which is why I am reaching out today with a specific concern regarding my recent project. To optimize performance and…
If I just use cloudinary optimized URL will it be enough?
I am using Nextjs to build an application. Also using Cloudinary as a CDN to deliver assets like images and video. If I just use the optimized URL Cloudinary provides from its dashboard will it be enough? Also, will the image be optimized by the Nextjs image component as I am not using the images from the public folder?…
Why cloudinary.uploader.upload_stream() does not work with the latest NextJS version?
let cloudinary = require("cloudinary").v2; let streamifier = require('streamifier'); let cld_upload_stream = cloudinary.uploader.upload_stream( { folder: "foo" }, function(error, result) { console.log(error, result); } ); streamifier.createReadStream(req.file.buffer).pipe(cld_upload_stream);
CldUploadButton not loading, stuck on spinning loader
Hi I have issue with my nextjs app, the CldUploadButton does not show the upload options, just shows the loading spinner. I tried to create a simple test app but the result is the same, there is no errors in console or logs. What could be causing this? This is my code: import type { NextPage } from 'next' import Head from…
Where I can find CLOUDINARY_FOLDER environment variable for my project?
I cloned one project from GitHub. In my .env.local file I have set the CLOUD_NAME, API_KEY and API_SECRET variables, and I also need to set the CLOUDINARY_FOLDER variable, but I don't know where I can find that. I am getting this error: Error:…
Correct configuration of cloudinary library for Next.js server side code
I'm using Next.js. I call various cloudinary API methods in several different places, but always in either API or server side methods like getStaticProps. I want to avoid having to configure the library again and again, so I've followed the Next.js example which puts initialization and config in a separate file which you…
Why are some of my uploads silently failing the first time or two?
I am using a Next.js API route (i.e. server-side function) to upload a raw file to a specific location within my Cloudinary account. Here is the code: import { v2 as cloudinary } from 'cloudinary' import { Readable } from 'stream'; export default async function uploadInfoJSON(req, res) { console.log("enter upload…
What is the alternative of Transformation from cloudinary-react in next-cloudinary?
Previously we were using cloudinary-react which is working fine but recently we decided to migrate to next-cloudinary. I have got a question which couldn't find in documentation. In cloudinary-react we used Transformation component for applying transformations. How we could do the same thing in next-cloudinary? For…
Are credits charged for each request? How can I mitigate the cost?
Hello, First things first - thank you for such a lovely service and your help. These tools are taking my personal projs. to higher levels. Second - I'm wondering about how to mitigate credit usage in a Next.js app. I have a few images and a video uploaded to the CDN. In the Next app I am using your <CldImage/> and…
Uploading images and saving urls in database
Hi, I need to make a feature for users to be able to upload an image and then get the url from this image and save it to database so I can map over it and display it in my app. So far I understand that uploading the files from frontend can be done with cloudinary widget but how to get url back? I am using next.js and…
Can I run the Cloudinary-AI-Background Removal from a React function
I am trying to call the Cloudinary-AI-Background removal from a function in my Nextjs project. My plan is to upload the image using the upload widget and remove the background with a button, i also want to get the URL of this new optimized image so I can store it on my database and display it in my application. Can this be…
Next Cloudinary: High-performance image delivery and uploading at scale in Next.js
Next Cloudinary is a library for integrating Cloudinary in Next.js applications. It extends the built-in Image component by wrapping it, using Cloudinary tech (as a Loader), and extending it with a bunch of things like transformations. It also provides a really easy to use Open Graph Social Card component as well as…

nextJS

Discussion List