Adding Cloudinary support to your Strapi Application

1

In today's article, I will show you how to simply change the default upload provider of your Strapi application to Cloudinary. It is really easy and very straightforward. I will be showing you how to connect your Strapi application to use Cloudinary as a storage place for assets(photos and videos)

This is a companion discussion topic for the original entry at https://strapi.io/blog/add-cloudinary-support-to-your-strapi-application
2

Thanks for the write up. I noticed a slight typo, the yarn add should be yarn add @strapi/provider-upload-cloudinary, not @strapi-provider-upload-cloudinary.

Regards,

Dorian

4

Thanks for the heads-up @Dorian. We’ll update that very soon.

1 Like
6

If you’d like to use a single environment variable as the one available in Cloudinary’s dashboard, check out: https://github.com/arthurdenner/parse-cloudinary-url.

7

Hi! Nice tutorial!
I have a question. Were you able to post a video to the media library and receive a preview?
I posted this thread days ago and I’m still looking for a solution. I think there must be a bug in strapi that hasn’t been fixed.

9

@localhost_101

Context: I’m trying to migrate to a new file upload provider (default to Cloudinary).
Question: Is there a best practice for migrating files that have already been uploaded to the original provider?

I did some searching but couldn’t find an answer; only other people with the same question.

10

Hello Strapi Team how do i specify a folder in the Upload actionOptions as of the documentation
have tried
upload:{
config:{
actionOptions:{
upload:{
folder:“myfolder”
}
}
}
}

but it’s not working any help here

1 Like
11

did get any solution?

12

I’ve tried it also but with no luck. I thought that the only requirement is that the folder must already exist in Cloudinary before one save media in Strapi.

13

In Section 6: Adding Front End, after Line 12 to 17, you mentioned on two different occasions to add a file in the root of the front-end named ./utils/apollo.js and each time the code inside is different. Please elaborate.

1 Like
14

I spotted this too, definitely a typo. I believe the section reference to ./utils/apollo.js is actually supposed to be ./pages/_app.js.

But even with that, the article ends abruptly, and there’s other typos in the last snipped of code that is referencing, ./pages/index.js.

I ended up completing the Front End by going directly to the source at GitHub - bigpreshy/frontend-cloudinary

Worth pointing out that the front end image output uses the NextJS image handler, that references a Cloudinary URL as a URL parameter. That Cloudinary URL is missing optimization parameters though, so be sure to add f_auto,q_auto, and any other optimization parameters that you need to the URL.

https://cloudinary.com/documentation/image_optimization

Edit: Added more Cloudinary details.

15

is there any way to redirect where the files are being uploaded based on mimetypes or collection in strapi folder to a specific folder in cloudinary