Using Cloudinary for Image Management in Lumen

Cloudinary is a cloud-based end to end image management application. This means that they assist us with image storage on the backend and various image transformations on the frontend. According to cloudinary, they are "the image backend for web and mobile developers".

Lumen on the other hand is a very fast Laravel-based micro-framework used for developing REST APIs. If you're familiar with Laravel, then you're good to go with Lumen. If you're not, it's quite easy to get a hang off. You can check out the docs at here.

To get started, we'd need a fresh installation of Lumen. You'd need php and composer installed on your local machine. Pull a fresh copy of lumen by running:

composer create-project laravel/lumen --pref-dist

You'll also be needing an account on cloudinary. You can sign up for a free account here.

JRM2K6 has developed a wonderful laravel package called cloudder. This package makes it very easy to interact with the cloudinary API.

Within your new lumen application, pull in clouder with

composer require jrm2k6/cloudder:0.4.*

Ok. That's all we'll be needing.

Next, open up your .env file (can be found in the root folder of your Lumen installation) and add the following:

CLOUDINARY_API_KEY=XXXXXXX
CLOUDINARY_API_SECRET=XXXXXXXX
CLOUDINARY_CLOUD_NAME=YOUR_CLOUDINARY_CLOUD_NAME

Update the values to reflect your details as shown on your cloudinary dashboard.

Next, head over to your bootstrap/app.php file. Uncomment the section with

$app->withFacades();

We'd only be needing this line but if you wish to make use of Eloquent in your application, you can go ahead and uncomment the section with
$app->withEloquent();.

Next, just under the $app->withEloquent() line, add this:

class_alias('JD\Cloudder\Facades\Cloudder', 'Cloudder');

This would enable us use Cloudder facade like so use Cloudder;.

Next, register the Cloudder ServiceProvider right under similar registrations like so:

$app->register(JD\Cloudder\CloudderServiceProvider::class);

Next, we'll setup a controller to handle our request. If you are familiar with Laravel, you'd definitely know of the php artisan make:controller ControllerName command for creating controllers. This is not available in Lumen. We can manually create this though. In app\Http\Controllers, create a file called ImageController.php and add the following to it:

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Cloudder;
class ImageController
{
    public function upload(Request $request)
    {
    }
}

We just created an ImageController class and added a method called upload. Notice we are injecting an instance of Illuminate\Http\Request which we imported near the top of the file using the use keyword. The will make parameters from our post request available to us in the method. Notice also that we are pulling in the Cloudder facade.

Next, add the following lines to the upload method:

$file_url = "http://yourdomain/defaultimage.png";
if ($request->hasFile('image') && $request->file('image')->isValid()){
    $cloudder = Cloudder::upload($request->file('image')->getRealPath());
    $uploadResult = $cloudder->getResult();
    $file_url = $uploadResult["url"];
}
return response()->json(['file_url' => $file_url], 200);

We assign a default value to the $file_url variable. Then we check if a valid file is available in our Request instance (assuming the image is sent with a key/name image). If it exists, we go ahead and pass the real path of our uploaded image to Cloudder's upload method. We won't be saving any data, but you can save the url and publicId of the image if you wanted to (Of course, you'd want to ). This method can take other parameters like a user-generated publicId. You can look up Cloudder's docs here for more useful methods. Finally, we return the file url as a JSON response. You can embed this url in the src attribute of your <img/> tag to have a look.

Finally, we'll just set up a post route for the upload in the routes/web.php file like so:

$router->post('/upload', 'ImageController@upload');

You can go ahead and test the api with POSTMAN by sending a post request to http://your.domain/app_folder/upload. Make sure to set the name of your file as image.

Cloudinary offers you a lot and you can check out the docs here.
This is a skeletal overview of how you can make use of Lumen and Cloudder to upload your images to Cloudinary. Feel free to drop your questions if you have any. Let me know your thoughts too.

Happy Coding - DevMelas