How to host media files on Cloudinary for Django projects

Hello, welcome to the devmaesters website. In this post I am going to be showing you how you can setup cloudinary and use it to host Images for your Django project in a production or local environment.

First thing you need to do is to install a Django package called django-cloudinary-storage that helps in connecting your Django project to the cloudinary platform. To do so execute the command below in your terminal after activating your virtual environment (always make sure that your virtual environment is active before installing packages) to install the package.

pip install django-cloudinary-storage

Wait for package to finish installing then add the package to your installed app.

There are two ways to add the package and what you are going to be using it for will determine which one to use.

  •  If you are going to use this package for static and/or media files, make sure that cloudinary_storage is before django.contrib.staticfiles as shown below

INSTALLED_APPS = [
    # ...
    'cloudinary_storage',
    'django.contrib.staticfiles',
    'cloudinary',
    # ...
]
  • If you are going to use it only for media files though, it is django.contrib.staticfiles which has to be first as shown below;

INSTALLED_APPS = [
    # ...
    'django.contrib.staticfiles',
    'cloudinary_storage',
    'cloudinary',
    # ...
]

Confirm that the following configurations are in your projects urls.py file

urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Next thing you need to do is to setup environment variables for your Django project then create an environment variable called ENVIRONMENT when working within your development environment set the value of environment variable to DEVELOPMENT and during production set it to PRODUCTION. The aim of this is that when testing out our app locally there is no need to be uploading our media files to cloudinary as we can save if on our device.

Next go to your settings.py file and add this below the staticfiles configuration. What this does is that it checks for the current value of the environment variable you created previously and if it's value is PRODUCTION, it makes all the media files you upload from then onwards to be uploaded to cloudinary.

if os.environ["ENVIRONMENT"] == "PRODUCTION":
    DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'

Next go to the cloudinary website through this link and create a free cloudinary account. After your account have been created go to the dashboard page and copy the cloud name, api key and api secret.

cloudinary

Finally copy and paste this into your project settings.py file;

CLOUDINARY_STORAGE = {
    'CLOUD_NAME' : os.environ['CLOUD_NAME'],
    'API_KEY' : os.environ['CLOUD_API_KEY'],
    'API_SECRET' : os.environ['CLOUD_API_SECRET']
}

Then create the following environment variables;

  • CLOUD_NAME = "<cloud name you copied from your cloudinary dashboard>"

  • CLOUD_API_SECRET = "<api secret you copied from your cloudinary dashboard>"

  • CLOUD_API_KEY = "<api key you copied from your cloudinary dashboard>"

And that's all you need to do to setup cloudinary as a media storage for your Django project.

Conclusion

Through this post I have been able to explain the process of setting up cloudinary as a media storage platform for your Django project. Follow the youtube link below to watch the video of the post and if you have any question you can drop a comment down below and I'll respond as soon as I can.

 

Author
author-image

Hello, my name is Abubakar Zakari. Am a budding fullstack developer from Nigeria who loves developing softwares and learning new frameworks and langauges.

Comment

Select image


Comments
message profile
joegar
2023-07-27
in localhost it works perfectly but when I deploy it to render.com and i upload photos/image the result is Server Error (500)
message profile
Admin
2023-07-27
There has to be more to the error, check the logs and let me know the specific cause.
message profile
sumit kumar
2023-11-30
TypeError at /admin/BackEnd/addcate/6/change/ request got values for both 'fields' and 'body', can only specify one. Request Method: POST Request URL: https://canteen-ysvr.onrender.com/admin/BackEnd/addcate/6/change/ Django Version: 3.2.23 Exception Type: TypeError Exception Value: request got values for both 'fields' and 'body', can only specify one. Exception Location: /opt/render/project/src/.venv/lib/python3.7/site-packages/urllib3/_request_methods.py, line 199, in request_encode_body Python Executable: /opt/render/project/src/.venv/bin/python Python Version: 3.7.10 Python Path: ['/opt/render/project/src', '/opt/render/project/src/.venv/bin', '/usr/local/lib/python37.zip', '/usr/local/lib/python3.7', '/usr/local/lib/python3.7/lib-dynload', '/opt/render/project/src/.venv/lib/python3.7/site-packages'] Server time: Thu, 30 Nov 2023 06:06:25 +0000 *********************** Why show this error ************************

DEVMAESTERS

Newsletter

Services

Frontend Development |Backend Development |Full Website Development |Bootstrap Website upgrades | Website Debbugging | Website Hosting & deployment

Contact

Interested in hiring me or collaborating with me on a project, click on any of the links below to get my social media handle

Or contact me via Tel: (+234)-806-225-7480 | Email: abubakarzakari1703@gmail.com

Copywright@devmaesters.com
Privacy Policy

By using our website,
you agree that devmaesters can store cookies on your device and disclose information in accordance with our privacy policy.