-
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…