How to upload images and videos from the same field to Cloudinary on Django Framework

Hey guys, welcome to the Devmaesters website. In this article, I will explain how you can create a field in Django model that accepts both image and video files and stores them on the Cloudinary hosting platform.

To follow along with this tutorial, you need to have already set up Cloudinary hosting in your Django project. If you haven't done so, I recommend checking out the following articles on our website: "How to Host Media Files on Cloudinary for Django Projects".

Once Cloudinary hosting has been set up in your project, you can proceed with the following steps:

Step 1: Import the required modules

Import FileSystemStorage, VideoMediaCloudinaryStorage, MediaCloudinaryStorage, as shown below

from cloudinary_storage.storage import VideoMediaCloudinaryStorage, MediaCloudinaryStorage
from django.core.files.storage import FileSystemStorage

Step 2: Create a custom storage class and override the get_valid_name method

class CustomStorage(FileSystemStorage):
    def get_valid_name(self, name):
        if name:
            if name.endswith(('.jpg', '.jpeg', '.png', '.gif')):
                # Images will be stored in Cloudinary using the MediaCloudinaryStorage
                return 'images/' + name
            elif name.endswith(('.mp4', '.mov', '.avi')):
                # Videos will be stored in Cloudinary using the VideoMediaCloudinaryStorage
                return 'videos/' + name
        # If the file extension is unknown or the instance/filename is not available,
        # use the default location and apply the default valid name logic
        return super().get_valid_name(name)

Step 3: Define your model with the custom storage class and override the save method

class TestUpload(models.Model):
    name = models.CharField(max_length=50)
    test_upload = models.FileField(upload_to = 'files/', storage=CustomStorage())

    def save(self, *args, **kwargs):
        if self.test_upload:
            if self.test_upload.name.endswith(('.jpg', '.jpeg', '.png', '.gif')):
                # Use MediaCloudinaryStorage for images
                self.test_upload.storage = MediaCloudinaryStorage()
            elif self.test_upload.name.endswith(('.mp4', '.mov', '.avi')):
                # Use VideoMediaCloudinaryStorage for videos
                self.test_upload.storage = VideoMediaCloudinaryStorage()

        super().save(*args, **kwargs)

Step 4: Finally your code should look like the on shown below;

class CustomStorage(FileSystemStorage):
    def get_valid_name(self, name):
        if name:
            if name.endswith(('.jpg', '.jpeg', '.png', '.gif')):
                # Images will be stored in Cloudinary using the MediaCloudinaryStorage
                return 'images/' + name
            elif name.endswith(('.mp4', '.mov', '.avi')):
                # Videos will be stored in Cloudinary using the VideoMediaCloudinaryStorage
                return 'videos/' + name
        # If the file extension is unknown or the instance/filename is not available,
        # use the default location and apply the default valid name logic
        return super().get_valid_name(name)

class TestUpload(models.Model):
    name = models.CharField(max_length=50)
    test_upload = models.FileField(upload_to = 'files/', storage=CustomStorage())

    def save(self, *args, **kwargs):
        if self.test_upload:
            if self.test_upload.name.endswith(('.jpg', '.jpeg', '.png', '.gif')):
                # Use MediaCloudinaryStorage for images
                self.test_upload.storage = MediaCloudinaryStorage()
            elif self.test_upload.name.endswith(('.mp4', '.mov', '.avi')):
                # Use VideoMediaCloudinaryStorage for videos
                self.test_upload.storage = VideoMediaCloudinaryStorage()

        super().save(*args, **kwargs)

In the code above, whenever a user uploads a file, it checks whether it's an image or a video and assigns the appropriate media storage for saving the file (i.e., VideoMediaCloudinaryStorage for videos and MediaCloudinaryStorage for images).