can you be a little more specific about what challenges you're facing? happy to take feedback to the team, or unless you mean the video itself, for future videos
not totally sure if im following, but the API is the delivery URL, so you would add the Cloudinary URL to an image tag, or in the case of the React SDK you would use the AdvancedImage with the URL Gen SDK, with or without any transformations just like any other image URL, and it will deliver the image
thanks! we have lots of great videos on Next.js, all which you can find here: cld.media/devhints for uploading specifically, you can either use our upload widget: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ULp6-UjQA3o.html or here's how to do it with Server Actions: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5L5YoFm1obk.html they dont specifically mention how to upload to a specific folder, but fortunately it's as easy as setting the `folder` option when in "Fixed Folder" mode and `asset_folder` when in "Dynamic Folders" mode (most likely if it's a new account) !
This is a great video for someone familiar with Cloudinary as it focuses on the meat of the work and makes it relatively short. For someone new, a bit more detail would be great!
Hi @@colbyfayock! In this video, I didn't get what 'examples/galaxy_qtrsjt' was. I guessed that's the path to the galaxy image in our cloudinary media library and going back to the beginning of the video helped confirm that. Then after applying each transformation, you share the result in a browser window. Not sure where the url is coming from. Again, I would guess that you ran the script and logged the result of cloudinary.url(...). But that isn't explicitly stated. Does cloudinary.url return an object or string, etc. is not clear.
@@aniruddhaganesh9388 thanks great feedback! just to confirm, yeah `examples/galaxy_qtrsjt` is the "public ID" which is the identifier used to generate a URL. the cloudinary.url method returns a fully constructed URL as a string, aased on that public ID and any transformations applied
Please help, I'm getting Invalid cloud_name cloud I already setup my env files correct and they are console logging as shown on my other files meaning they are passing correctly, please fix this issue in your website. CLOUDINARY_CLOUD_NAME=cloud CLOUDINARY_CLOUD_KEY=irrelevant information... CLOUDINARY_CLOUD_SECRET=irrelevant information...
hi there, the environment variables will depend on the SDK you're using, which SDK are you using? if you're getting that error that means that the SDK isn't finding the values as you have them set.
hey im not totally sure what you mean by the play pause functionallity + const, but, in order to use the player in a server component, you can either apply the "use client" directive to the top of the page/component or create a light wrapper component that includes that directive and passes all the props through, similar to this example: next.cloudinary.dev/nextjs-14
hey we dont have a tutorial specifically about this but the same type of functionality shoudl apply that you've seen here. there's not an endpoint to bulk upload, so you would loop through the acceptedFiles from React Dropzone and upload them all this video is in Node, but you can see how you can easily do that, including how you can work with concurrency to make it faster: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_bTX2L0jPzA.html
I use "astro": "^4.6.1", and when putting [...media].js inside of pages/api/cloudinary directory, I am getting error - "getStaticPaths() function is required for dynamic routes."
this example is in Next.js, but if you're using astro, it depends on how you want to render the page. if you're using SSG, you need to use getStaticPaths, if you want to use SSR, you cna see an example here for how to make that work: docs.astro.build/en/guides/routing/#server-ssr-mode
If you are using Vercel, there are some severe limitations to large file uploads, namely getting the the callback functions setup in a backend api. Also, server uploads are limited to 4.5mb so you have to opt in to using a client component for large file uploads. Vercel has some documentation on how to do this but its tricky to setup. Good luck
daytatech had some good information there about the limitations. it may make sense, as they say, to perform the upload clientside, where then, the idea route would be to create an endpoint that solely signs your upload parameters, then upload directly to Cloudinary from the client, to avoid having the function as a middleman. i dont have good resources to pass off other than the docs: cloudinary.com/documentation/authentication_signatures i can put together an example if this is something you would find helpful
if you don't have access to an environment where you can use your API Key / Secret to perform a secure request, you can pass the return_delete_token from the upload to give you that ability. if you go here and search for that parameter, you can find more info: cloudinary.com/documentation/image_upload_api_reference#upload_optional_parameters
absolutely! the upload will return an object containing the resource information, including a public ID (cloudinary ID) and URL, along with width, height, and other properties. you can grab those values and store it wherever you'd like immediately after the upload I recommend storing those values as well to help with being able to provide a width and height inside your application when visualizing it. some people and integrations store the entire resource object when possible.
adding it to the list 👍in the meantime, here's a code example that may help: github.com/cloudinary-community/cloudinary-examples/tree/main/examples/remix-product-gallery
if you're uploading in a node environment, here's a video that can help: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_bTX2L0jPzA.html otherwise, let me know how you're uploading and i can give some advice
something like this should work: import { v2 as cloudinary } from 'cloudinary'; cloudinary.config({ cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME, api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY, api_secret: process.env.CLOUDINARY_API_SECRET, }); export function getCloudinary() { return cloudinary; }
here are a few ways you can do that: support.cloudinary.com/hc/en-us/articles/203068641-Can-I-bulk-download-all-of-my-Cloudinary-resources let me know if you had something else in mind!
Thanks for the video. Regarding 10:19, is there any option to change the respective colour of these cloud icons? For colour-blind users, it may be preferable to set icon colours that are more easily distinguishable.
Great question! We do have a series of transformations to help people with common color blind conditions, applying stripes or color adjustments to differentiate between colors that are similar for them. cloudinary.com/documentation/transformation_reference#e_assist_colorblind You could absolutely apply this in your WordPress plugin's settings or on specific pages/posts.
can you elaborate on whats not working? an example of code would help as well. feel free to jump into the discord and share with me: discord.gg/cloudinary also here's some example code that works: github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-server-actions-upload
@@colbyfayock I used the same code as you in the video, just to be sure there are no differences to interfere with the upload pattern, it just remove the original encoding so utf-8 is converted to latin1 or so. The only option is to convert it back to utf-8 encoding in server action, but that is very ugly and unstable solution.
@@lukassmida4885 yeah i agree that doesn't sound great, though i appreciate your patience here, do you have an example file you can point me to or something? do you suspect this is a Cloudinary SDK issue or a Next.js Server Action issue? i hadn't noticed any issues with the files i tried to upload, though i only tried images so far, but with that, they seemed to upload to the account as expected. mostly trying to figure out if this is something that i need to address in my example, something wrong with the SDK, or if it's somewhat out of our control if it's a Next.js limitation
@@colbyfayock It's issue with server actions, have you tried to upload files that use characters from Czech or polish language set in their filename? You could try naming the file "český-přístav-žvaní.jpg" or something like that and see if the character encoding of the name is broken when sent and logged from server action receiving the FormData. It's surely not a problem with your Cloudinary :)
@@lukassmida4885ah okay, yeah i see the file name in the File instance, bummer. im not really sure of how to better set that up, but might be worth an Issue on the Next.js GitHub? could at least see if they'd give an official recommendation if not a consideration on how to improve it in the library itself
when using tags the assets will be displayed alphabetically by public ID by default, but you can also specify an array of objects that correspond to the asset itself so like... mediaAssets: [ { publicId: "my-image" }, { publicId: "my-other-image" } cloudinary.com/documentation/product_gallery#displaying_assets
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
hey sorry to hear about your experience, there's nothing Server Actions specific with the Next Cloudinary library, however i hope to add helpers in the future if you have any specific feedback on points i can address in the Next Cloudinary documentation (or any documentation) i'd love to hear it here's an example using Server Actions as well as how you can show them: github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-server-actions-upload you can also join the Cloudinary discord where you can ask your specific question and @ me there: discord.gg/cloudinary or DM me on Twitter
hey not totally sure what you mean, where do you see this message? do you have an example you're able to share? you may not be able to post a link here, but you could also join the Cloudinary discord to get more help: discord.gg/cloudinary
Hi Colby! Thanks for your awesome videos! I''m trying to combine server actions with react-dropzone (btw thank you for your explanation here! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8uChP5ivQ1Q.html). 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!!
hm, good question, do you happen to have example code anywhere with what you've put together so far? my understanding is you can't really mutate data between the form and the action, aside from passing in additional arguments: nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#passing-additional-arguments you may be able to mutate the inputs managed on the page when you detect they've changed, but that could be a bit hacky maybe a good question would be, what kinds of files are you trying to remove? i wonder if it would be more appropriate to use React Dropzone restrictions? whether using existing options or their custom validation? react-dropzone.js.org/#section-custom-validation
@@danipuntocom yeah it likely got filtered by RU-vid from sharing a link :( do you have Twitter to DM me or Discord where you can join the Cloudinary server and share with me there? discord.gg/cloudinary
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
@@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 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.
definitely agree, you can actually get that out of the box with the CldUploadWidget available with Next Cloudinary: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ULp6-UjQA3o.html hoping to get a video on creating your own dropzone and uploading with Cloudinary, but i don't have an ETA on that
@@colbyfayock another idea, also to use Cloudflare image service, 100k images with CDN just 5$ and multiple variants of image sizes included :) They have API and if you use custom loader with Nextjs Image, you will avoid Vercel's limit for image optimization, because Image component will use Cloudflare image CDN.