Video

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

🙌

the SDK only accepts a string or an instance of Buffer or Uint8Array

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: czcams.com/video/ULp6-UjQA3o/video.html or here's how to do it with Server Actions: czcams.com/video/5L5YoFm1obk/video.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) !

@@colbyfayock Thank you sir.

what kind of locations are you referring to by "other drives"? are you looking to use Next Image for more external services than Cloudinary?

thanks for the feedback! in this particular example, is there something particular you would have liked to see?

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

here's how you can install and configure the SDK! czcams.com/video/0ZZSNJm7VpI/video.html

🙌

🙌

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: czcams.com/video/_bTX2L0jPzA/video.html

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

no problem, glad you found it helpful!

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

@@daytatech-youtube great points!

✌😁

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: czcams.com/video/_bTX2L0jPzA/video.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; }

💯

agreed!

🙌

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!

GIF has the 256 color gamut. AVIF has ALOT more especially when it supports HDR and WCG (Wide Color Gamut). More closer to Animated PNG quality.

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

We're so happy you liked the episode! 🙏

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

💯

Working on it almost there

@@ideacharlie 👀

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

thanks for the idea, did you have a specific use case in mind that wouldn't be handled with Cloudinary?

@@colbyfayock Everything would be handled on a server side function. I already managed to do it if you want to have a look just tell me

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

@@colbyfayockThank you Colby! I replied to you but somehow my comments get deleted! Maybe I'm not allowed to share github links?

@@danipuntocom yeah it likely got filtered by CZcams 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

@@colbyfayockThank you for the invite! I've just posted the question on Discord.

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

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

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

@@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.