Changing Default Strapi Media Uploader to Cloudinary

hey guys how's it going julie here and today we have another video on strappy and in this one i will show you how to connect strappy to cloudnary if you watched my previous video where we set it up with atlas and heroku i talked about the issue where if your project is deployed to heroku the data gets reset even if you follow that video and have set up strappy and atlas if you want to store images you will want a third party service to store them on otherwise they will not be saved and this is where cloudnery comes in cloudnary is a cloud-based image and video management platform but today we're going to use it only for image storage purposes cloudnary is not the only provider that you can hook up to strappy aws and google cloud storage being the two other popular solutions and the connection methods are almost identical and i will link an article on how to connect all three in the description all right with all that out of the way let's get started here i have a local install of strappy and in my collection types i have two posts with a title description and an image field now let's upload an image to see how strappy handles image uploads by default let me just get this image sure let's add it here as well and let's go into posts and see what it looks like now here you can see that it provides kind of a local url which if you upload this to heroku after probably 24 hours or so it's going to get reset and this is where cloudnary comes in now all we want from cloudnary i already have my account set up all we want is this cloudname api key and the api secret that's all we need and to make cloudnary your default image uploader is essentially just two steps first of all we need to install this strappy provider upload cloudnary plugin so we're gonna copy this stop the server and install it when with npm all right it is installed let's run the server again and the second step is we need to create a configuration file for this upload plugin now what we want to do is we want to go to extensions and we want to create a folder called upload and in that folder we want to create a folder called config and in the folder config we want to create a settings.json file and in this file is where we're going to keep this connection information from cloudnary i'm just going to paste in our settings don't mind this this is fine and here we want to paste in our cloud name our api key and our api secret now normally you would want to use environment variables to hate to hide your api keys but i'm not overly concerned about this random setup but if you are pushing a real production app you should probably hide those keys now let's save this and restart the server all right now let's deploy this to heroku and see what it looks like live all right i'm gonna come back when it is all done building up and we will see what cloudnary links look like all right our app is all done being built up now let's open it and see what we're dealing with let's go into our admin and let's first of all you see already it has broken image links and this is exactly how your image links would look like if heroku did the whole reset server thing it would think that there is an image but there actually would be one so let's go ahead and delete those and re-upload them with our new cloudnary upload all right let's get an image and let's go into our posts and see if there's any difference and here they are we can see that we are using cloudnary we are using cloudnary to host our images so instead of what we have here which is this local looking link we have a link to cloudnary which is not going to get erased or reset when it is deployed to roku and that is pretty much it we have cloudnary as our default image uploader now remember if you want to use aws or google cloud storage the setup method is almost identical and i will detail it in the blog post in the description thank you very much for watching this video and i hope i'll see you in the next one

Channel: Learning on the Job

Views: 4,347

Keywords: Strapi, Cloudinary, WebDev, Web Development, Headless CMS

Id: NnOng-on7cQ

Length: 7min 5sec (425 seconds)

Published: Sun Jul 19 2020