How I successfully uploaded images to Cloudinary from my Sails App ⛵️

Kelvin Omereshone
codeburst
Published in
3 min readJun 17, 2019
Photo by David Rangel on Unsplash

Images! Oh boy, they sure do make the web personal. From user avatar to Facebook news feed and everything in between.

This article is centered on documenting how I set up image uploads to Cloudinary from my Sails web service. Hope it could help you if you are into such things 😉

Author’s Assumptions

The following assumptions are being made:

  • You are using Heroku to host your codebase for your backend,
  • Sails is your NodeJS framework
  • Heroku CLI is installed on your machine

Let’s Get Started

So let’s say you want to implement the common scenario of a user updating his/her avatar after signing up for your web application. So you have an update-profile.js(or something of the sort) action. See where I am going already?

Why Cloudinary?

Because I think it’s cool and they have quite a lot of useful image manipulation features and all. I think they rock! You could check them out.

In your Sails app, install the Cloudinary addon from the Heroku CLI by running the following command:

heroku addons:create cloudinary:starter

This will install the Cloudinary starter addon which is quite sufficient to get you started. After this is done, install the cloudinary module from NPM via the below command:

npm install cloudinary --save

If everything went well, you would now be able to require the cloudinary dependency from your Sails app as we would do below in our update-profile.js action.

Requiring cloudinary

As you could see above, I am globally setting Authentication parameters via the config method on the cloudinary object.

N.B: I set up the environment variables on both Heroku and as a custom object in my Sails app to cater for both production and development use cases.

You can access those details from your cloudinary dashboard. Get there by using the Heroku web client or from the CLI via:

heroku addons:open cloudinary

Then finally, using Sails skipper I implemented the upload

The meat

I know it seems pretty straight forward. But let me explain a bit at least from the try block above 😉

So the cloudinary object exposes and uploader object that has an upload method, this method, in turn, take as argument the file to be uploaded, then an optional configuration option. So in my case, I am using Sails skipper to grab the fd(file descriptor) and passing it as the file to the cloudinary uploader upload method and telling cloudinary to save the file in a folder called avatar(It will be created if doesn’t already exist by Cloudinary).

The upload method returns a Promise which will be an object containing the path created by cloudinary for access to the uploaded image and I am updating the avatar_url property for that user with the URL(secure_url in this case).

And that’s it

So that’s how I did it after getting burned via some examples online. The documentation (Heroku’s and Cloudinary’s) was of immense help. Do well to check them out and let me know if you have a more suitable implementation for uploading to Cloudinary in your Sails App.

Happy Deploying 🚀🚀🚀🚀

More Vitamins

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Written by Kelvin Omereshone

Currently building Sailscasts — a platform to learn server-side JavaScript with the Sails.js framework. Come learn and master Sails.js @ https://sailscasts.com

Responses (1)

What are your thoughts?

Nice article. I had used Cloudinary for direct file uploading from PHP application. It is quite awesome for image manipulation and storage and the API is also well documented and easy to use.

--