DEV Community 👩‍💻👨‍💻

Massive  brains
Massive brains

Posted on

Image or File Uploads in Adonis.js with Cloudinary

I just started working with adonis JS a little over 2 months now. I recently have to use Cloudinary in my project and i searched for the best way to loosely use it so as to maintain the readable, expressive and approachable structure of Adonis.

This tutorial assumes you are already familiar with Adonis and Cloudinary. I will explain my approach in steps below. So let's get Started!

Step 1: Create a new AdonisJS project


adonis new cloudinary-integration

to create a new adonis project. You should get a fresh adonis project (as at the writing of this post, i'm using version 4.1)

Step 2: Setup an upload controller

Create a new HTTP controller by running

adonis make:controller Upload --type http

and setup a simple index method as shown below

'use strict'

class UploadController {

    async index ({ request, response }) {

        return response.json({status: true, data: 'It Works '})

module.exports = UploadController

And of cause update the /start/routes.js by adding a new route

'use strict'

const Route = use('Route')


//Add this Route
Route.get('/upload', 'UploadController.index')

Step 3: Implementing Cloudinary

At this point, if you do not have a cloudinary account, head over to to create a free account. We would need three major environment variables from cloudinary.


Update your .env file to have these three environment variables. See Screenshot below on where to get them from your cloudinary console.

So your .env file will now look somewhat like this


#Cloudinary Credentials

Next, Let's pull in the cloudinary JS SDK from npm (or yarn).

npm i cloudinary --save

Then, create a file /app/Services/Cloudinary.js with the following code snippet.

'use strict'

const cloudinary = use('cloudinary')
const Env = use('Env')


    cloud_name: Env.get('CLOUDINARY_CLOUD_NAME'),
    api_key: Env.get('CLOUDINARY_API_KEY'),
    api_secret: Env.get('CLOUDINARY_API_SECRET'),

module.exports = {

    upload: async (file) => {

        return new Promise(async (resolve, reject) => {


                let response = await cloudinary.uploader.upload(file.tmpPath, { folder: 'test'})

                resolve({status: true, url: response.secure_url })


                reject({status: false, url: error.message })

We are returning a promise from an async function called upload which we would be passing a file object to.

Step 4: Using the cloudinary Service

Now that we have our Cloudinary service setup. lets create a method in our app/Http/Controllers/UploadController.js to handle uploads.

Our UploadController.js will now look like this

'use strict'

//Import Cloudinary
const Cloudinary = use('App/Services/Cloudinary')

class UploadController {

    async index ({ request, response }) {

        return response.json({status: true, data: 'It Works '})

    async upload ({ request, response }) {

        //TODO: Validate. Input.



                let cloudinary_response = await Cloudinary.upload(request.file('image'))

                return response.json(cloudinary_response)

            return response.json({status: false, data: 'Please upload an Image.'})


            return response.status(500).json({status: false, error: error.message })


module.exports = UploadController

one more thing, lets add a route to our new method. Our routes file will now look like so

'use strict'

const Route = use('Route')


//Add this Route
Route.get('/upload', 'UploadController.index')'/upload', 'UploadController.upload')

Step 5: Testing from Postman

For the purpose of testing, we do not want to use the CSRF protection for now. So in your /config/shield.js Update the csrf key as below so has to exclude the /upload route

csrf: {
    enable: true,
    methods: ['POST', 'PUT', 'DELETE'],
    filterUris: ['/upload'],
    cookieOptions: {
      httpOnly: false,
      sameSite: true,
      path: '/',
      maxAge: 7200

Now to test our upload route and be sure our implementation is working as expected. Try uploading a file from postman as shown below

You should be able to see your newly uploaded file from your cloudinary media library.

That's all folks!

Top comments (0)

We want your help! Become a Tag Moderator.
Fill out this survey and help us moderate our community by becoming a tag moderator here at DEV.