Uploading images to Cloudinary Storage from a Django DRF Application.

success — Mon, 21 Feb 2022 01:17:12 +0000

Sometimes while working on applications that require the use of images, a simple process like uploading images to a server can become difficult. If you deploy your application to a platform like Heroku, you can’t save images.

Alternatively, we could have our images stored in the database, but the database size will explode over time. Hence, a reason images should be stored in external services like Cloudinary, AWS S3, or Imgur.

The advantage Cloudinary has is that “configuration is quick and easy”. In this tutorial, we will learn about how to save images in Django using Cloudinary.

Cloudinary is an end-to-end image and video management solution for websites and mobile apps. It covers everything from image and video uploads, storage, manipulations, and optimizations to delivery.

Prerequisites

To follow along with this tutorial, you’ll need Python3 installed on your machine and virtualenv as well.

A basic understanding of Django would help the reader follow along better.

Setting up a new Django project

Let’s start by creating a new virtual environment.

A virtual environment allows you to create different spaces on your computer, with a different set of libraries and versions.

By creating a virtual environment, you’ll be able to separate the necessary library installation for a project, without having to install them globally.

Now, you create a virtual environment env in your preferred folder as shown below:

to install virtualenv on your machine run

$ pip3 install virtualenv

Now use your installed virtualenv to create a new virtual environment

$ virtualenv env

Here, we need to change directory to our specified project folder where our env is.

Now you can activate the virtual environment using the following command:

On Linux or Mac:

$ source env/bin/activate

On Windows:

$ .\env\Scripts\activate

After activation we can install the latest Django on our virtual environment using the following command:

$ pip3 install django

Now lets create our Imageapp project using the django admin command

$ django-admin startproject imageapp

Now lets create a django app to hold our models

$ django-admin startapp images

Let’s add our app to the list of installed apps. Navigate to our Imageapp directory and edit the settings.py file,
Your settings.py file should look like this



INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'images.apps.ImagesConfig',
    ]

Setting up a Cloudinary Account

Now, let’s head over to the Cloudinary website to create a new account.
provide your details and we are good.

Installing Django cloudinary Stroage



pip3 install django-cloudinary-storage
pip3 install cloudinary
pip3 install pillow

Next, we have to add Cloudinary to the list of installed apps, your settings.py something like this:



INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'images.apps.ImagesConfig',
    'cloudinary_storage',
    'cloudinary',
    ]

Configuration

To use the Django Cloudinary library, we have to configure our cloud_name, api_key, and api_secret.

We can find our account-specific configuration credentials on the Dashboard page of the account console as shown below:

Dashboard page cloudinary

Now add the following config to the bottom of your settings.py file and fill in your credentials gotten from cloudinary in-between the quotes.



CLOUDINARY_STORAGE = {
    'CLOUD_NAME': 'your_cloud_name',
    'API_KEY': 'your_api_key',
    'API_SECRET': 'your_api_secret',
}

Making Cloudinary our default file storage

Now need to add a default file storage above our CLOUDINARY_STORAGE config and set it to cloudinary as shown bellow:



MEDIA_URL = '/media/'
DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'

Creating a Django Model

Migrations are Django’s way of propagating changes you make to your models (adding a field, deleting a model, etc.) into your database schema.

In the photos directory, edit the models.py file and add the following lines of code to it:



from django.db import models

class Images(models.Model):
    title = models.CharField(max_length=255) # title of the image
    image = models.ImageField(upload_to='images') # image

Now, let’s migrate our model to the database by running the commands below:



python3 manage.py makemigrations

python3 manage.py migrate

A superuser has the permissions to create, edit, update, and delete data in Django admin. We create a superuser by running the command below:

python3 manage.py createsuperuser

Now let’s register the model of photos in the admin.py file, so we can modify it in the Django admin section.



from django.contrib import admin
from .models import Images

admin.site.register(Images)

Now, we can log in to the admin page.

To login to the admin section, go to this link localhost:8000/admin and log in with our just created superuser details.

Now add photos as usual and you are good to go... your image will have a reference in your admin site which if u click it will open the image with the link showing cloudinary storage and in your cloudinary media library directory you will also find your uploaded image.

Conclusion

We have learned how Cloudinary provides a better way to handle media content for our webpage. We have also learned to upload images from a Django DRF apps.

Happy coding...

DEV Community: success