How can i adjust which folder my images upload to in nextjs using CldUploadButton

sdubz

I'm Stumped with the nextjs docs. i know how to do this with react/express using multers and node, but is there a way to just use the next component to adjust to a dynamic folder so i can have users upload to a folder with their id as the folder name?

I have an unsigned upload preset which uploads to a root folder called hub, and whenever i use the CldUploadButton component it uploads all files directly to the root folder my preset is set to and it always uploads to this folder.

i tried this, and it doesn't really do anything besides upload to the root folder.

<CldUploadButton

uploadPreset={process.env.NEXT_PUBLIC_CLOUDINARY_PRESET_NAME}

options={{folder: `${id}`}}>Upload</CldUploadButton>

Is this possible? so it would be root/${id}/file

Zachary

Hi there,

While the NextJS library is a community-created one, please let me take a crack at your problem.

To change the folder it's uploaded in, you would need to change the upload preset, this could be handled through some form of logic on the front end. Alternatively, we also have ways to handle this by using Eval statements to conditionally filter your assets based on a wide assortment of variables from filename to filetype or even metadata.

sdubz

Thanks, for whatever reason the option={{ folder={route}}} worked with a signed upload using a signature endpoint instead of just an unsigned upload. got it working!

Cloudinary Team

Hi there,

Thank you for the update. I'm glad Zach could help.

Please let me know if you have any other questions or queries.

Kind Regards,
Thomas
Developer Support Engineer
Cloudinary Customer Success

--
💡 Improve your site's performance by applying optimization features when delivering assets

---

💬 Community Forums | 🧑‍💻 Discord Server
🧑‍🎓 Academy Training | 📖 Documentation | 📰 Blog