Uploading Image Using Django with Firebase

Python's simplicity and versatility has made it one of the most popular programming languages for web development. Among the many frameworks available, Django stands out as a robust and efficient option for building web applications. Additionally, Firebase, a comprehensive mobile and web development platform, offers cloud storage services to enhance application functionality.

In this tutorial, we will explore the integration of Django with Firebase to enable seamless image uploading capabilities. By leveraging Firebase Storage, we can easily store and manage user-uploaded images within our Django application.

Setting Up Firebase

First, we need to create a Firebase project and configure it for storage.

Creating a Firebase Project

Navigate to the Firebase website (firebase.google.com) and sign in with your Google account. Click "Add project" and provide a name for your project, such as "Django Firebase Image Upload".

In the Firebase console, locate your newly created project and navigate to the Storage section. Click "Get started" to enable Firebase Storage for your project.

Generating Service Account Credentials

To integrate Firebase with Django, we need to generate service account credentials. In the Firebase console, click the Settings icon (gear icon) and select "Project settings". Navigate to the "Service Accounts" tab.

Under the "Firebase Admin SDK" section, click "Generate new private key". This downloads a JSON file containing your Firebase credentials. Store this file securely in your project directory.

Here's an example of the credentials JSON structure ?

{
  "type": "service_account",
  "project_id": "your-project-id",
  "private_key_id": "your-private-key-id",
  "private_key": "-----BEGIN PRIVATE KEY-----\nYourPrivateKeyHere\n-----END PRIVATE KEY-----\n",
  "client_email": "your-client-email@your-project-id.iam.gserviceaccount.com",
  "client_id": "your-client-id",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://accounts.google.com/o/oauth2/token"
}

Setting Up Django Project

Now let's create and configure our Django project for Firebase integration.

Creating the Project

Create a new Django project and navigate to its directory ?

django-admin startproject image_upload_app
cd image_upload_app

Installing Required Packages

Install the necessary packages for Firebase integration ?

pip install django firebase-admin pillow

Configuring Django Settings

Open settings.py and add the following configuration ?

import os
import firebase_admin
from firebase_admin import credentials

# Firebase configuration
cred = credentials.Certificate('path/to/your/firebase_credentials.json')
firebase_admin.initialize_app(cred, {
    'storageBucket': 'your-project-id.appspot.com'
})

# Add to INSTALLED_APPS
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'your_app_name',  # Replace with your app name
]

# Media files configuration
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Creating the Image Upload Feature

Let's create the necessary models, forms, and views to handle image uploads.

Creating the Model

In models.py, create a model to store image information ?

from django.db import models

class UploadedImage(models.Model):
    title = models.CharField(max_length=100)
    image = models.ImageField(upload_to='images/')
    firebase_url = models.URLField(blank=True, null=True)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

Creating the Form

Create forms.py with an image upload form ?

from django import forms
from .models import UploadedImage

class ImageUploadForm(forms.ModelForm):
    class Meta:
        model = UploadedImage
        fields = ['title', 'image']
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control'}),
            'image': forms.FileInput(attrs={'class': 'form-control'})
        }

Creating the View with Firebase Upload

In views.py, create a view that uploads images to Firebase ?

from django.shortcuts import render, redirect
from django.contrib import messages
from firebase_admin import storage
from .forms import ImageUploadForm
from .models import UploadedImage
import uuid

def upload_image(request):
    if request.method == 'POST':
        form = ImageUploadForm(request.POST, request.FILES)
        if form.is_valid():
            # Save the form instance
            instance = form.save()
            
            # Upload to Firebase
            bucket = storage.bucket()
            image_file = request.FILES['image']
            
            # Generate unique filename
            filename = f"images/{uuid.uuid4()}_{image_file.name}"
            blob = bucket.blob(filename)
            
            # Upload the file
            blob.upload_from_file(image_file)
            
            # Make the blob publicly accessible
            blob.make_public()
            
            # Save Firebase URL to database
            instance.firebase_url = blob.public_url
            instance.save()
            
            messages.success(request, 'Image uploaded successfully!')
            return redirect('upload_success')
    else:
        form = ImageUploadForm()
    
    return render(request, 'upload_image.html', {'form': form})

def upload_success(request):
    return render(request, 'upload_success.html')

def image_gallery(request):
    images = UploadedImage.objects.all().order_by('-created_at')
    return render(request, 'gallery.html', {'images': images})

Creating Templates

Create templates/upload_image.html ?

<!DOCTYPE html>
<html>
<head>
    <title>Upload Image</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h2>Upload Image to Firebase</h2>
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit" class="btn btn-primary">Upload</button>
        </form>
    </div>
</body>
</html>

URL Configuration

Create urls.py in your app directory ?

from django.urls import path
from . import views

urlpatterns = [
    path('upload/', views.upload_image, name='upload_image'),
    path('success/', views.upload_success, name='upload_success'),
    path('gallery/', views.image_gallery, name='image_gallery'),
]

Include these URLs in your main urls.py ?

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('your_app_name.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Running the Application

Run database migrations and start the development server ?

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

Visit http://localhost:8000/upload/ to test the image upload functionality. Uploaded images will be stored in Firebase Storage and accessible via their public URLs.

Key Features

• Secure Storage ? Images are stored in Firebase's secure cloud storage
• Public URLs ? Each uploaded image gets a publicly accessible URL
• Scalability ? Firebase automatically handles scaling and CDN distribution
• Django Integration ? Seamless integration with Django's model and form system

Conclusion

We have successfully integrated Django with Firebase Storage to create a robust image upload system. This combination provides scalable cloud storage with Django's powerful web framework, enabling efficient image management for web applications. The Firebase URLs can be used directly in templates to display uploaded images from anywhere on the web.