Cloudinary is one of the tools/platforms that can be used to upload your images. In addition to being quick and simple to use, it also has exceptional documentation.
Obviously, in many cases, having a bucket at the cloud provider is at a better cost and perhaps more predictable. Because it is easier to deal with fixed prices or even estimates than with credits.
But sometimes we like to take advantage of free plan limits or we just don’t want to deal with infrastructure. We just want to deal with an SDK and upload the images.
It was precisely for this reason that I decided to write this article, to show that we can use the tools we use in our daily lives in a simple and effective way.
What are we going to do?
In this article I am not going to explain why we use Express together with Multer. If you need to have a small idea I recommend reading this article.
The purpose of this article is to upload an image through Express with Multer directly to Cloudinary.
As you may have already thought, and as was mentioned in the article previously referenced, the multer only works with two types of storage: DiskStorage and MemoryStorage.
So as we want to upload the image to Cloudinary, we will use a multer storage engine for Cloudinary. And of course we will still use the Cloudinary SDK so that we can assign our credentials so that the upload can be carried out.
Now that we have an idea of things, let’s start programming. But first we will install the following dependencies:
npm i express multer cloudinary multer-storage-cloudinary
And as always we will create a simple application in Express:
Now just create our POST verb type endpoint so that we can upload our images. But first we need to pass our upload as middleware and we still have to indicate that we are going to upload only one image at a time. I also mention that I named the image field “picture”.
Last but not least, as soon as we upload the image, the link will be returned to us so we can see it in the browser. But the same applies if you want to save the link in a database, just use req.file.path.
Now that our Api is already complete, just test it using your favorite client (Postman, Insomnia, etc). As soon as you upload an image, you can go to the “Media Library” tab and see that a folder called “DEV” was created with the image you just uploaded. Similar to this:
What about you?
Have you used Cloudinary in the past or would you prefer to use buckets from cloud providers?
We use analytics to understand the usage, to improve user experience and to measure the performance of our website. We anonymise any information we may collate so we can’t identify you personally.