Uploading Image Using Django with Firebase

Last Updated : 23 Jun, 2021

Firebase is a product of Google which helps developers to build, manage, and grow their apps easily. It helps developers to build their apps faster and in a more secure way. No programming is required on the firebase side which makes it easy to use its features more efficiently. It provides cloud storage. It uses NoSQL for the storage of data.

Here, We are going to learn How we can upload images using Django in firebase. While working with the database we may require to upload a pdf file also.

Step By Step Implementation

Step 1: Firstly, We are going to create a project on Firebase to connect our static web page. Visit the Firebase page for configuring your project. Visit the website and click the On Add Project button as shown below:

Step 2: Give a Name to your project and click on the Continue button.

Step 3: Now click on the Continue button.

Step 4: Now choose Default Account For Firebase and click on the Create Project button.

Step 5: Now your project is created, and you are now good to go.

Step 6: Now click on the 3rd icon that’s the Web button(</>).

Step 7: Give a nickname to your web project and click on the Register App button.

Step 8: Now you will see the configuration of your App like this. Copy this code somewhere as we will use it later.

Step 9: Click On The Realtime Database button As Shown In Figure.

Step 10: Now Click On Create Database.

Step 11: Now Click On Test Mode and then Click On Enable.

Step 12: Activate Firebase Storage. Click on the Storage button on the left and click on Get Started.

After that this box will pop up. Click on Next.

Then click on Done.

Creating a project in Django:

Use the below command to create a Django project:

$ django-admin startproject imageupload

Let’s verify your Django project works. Change into the outer mysite directory, if you haven’t already, and run the following commands:

$ python manage.py runserver

You’ll see the following output on the command line:

Performing system checks...
System check identified no issues (0 silenced).
You have unapplied migrations; your app may not work properly until they are applied.
Run 'python manage.py migrate' to apply them.
April 09, 2021 - 15:50:53
Django version 3.2, using settings 'imageupload.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Integrating Firebase Database to Django Project:

Now, we hope that you have already created a project in Django. If not then refer to How to Create a Basic Project using MVT in Django? Since we are using firebase as a Database, We need to install pyrebase. For this type the following command in terminal:

$pip install pyrebase4

Create a views.py file in your project directly. The Structure should be like this.

Step 13: Go to the urls.py file and create a path to move to the webpage to upload the image.

Python

from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
   
    path('check/',views.check,name="check"),
   
]

Step 14: Then move to views.py file and write the following function to render to html page.

Python

from django.shortcuts import render
import pyrebase

def check(request):
    return render(request,"check.html")

Step 15: Then we will move to check.html page and write the following code to upload the image in firebase. Comments are written inside to understand it better.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Work</title>
    <style>
     body{
            background-image: url(https://images.unsplash.com/photo-1493723843671-1d655e66ac1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
        }
        div{
        position:absolute;
        right:10px;
        top:5px;
        }
        input{
            margin-top:20px;
            height: 30px;
            width: 150px;
            padding: 12px 20px;
            border-radius: 5px;
            color: black;
        }
        input[type="submit"]{
            background-color: rgba(7, 179, 185, 0.753);
            color: rgb(255, 255, 255);
            border: none;
            border-radius: 5px;
        }
        button{
            background-color: rgba(7, 179, 185, 0.753);
            color: white;
            width: 150px;
            height: 30px;
            border: none;
            border-radius: 5px;
            opacity: 0.3;
        }
    </style>
</head>
<body>
<div>
<button type="button" onclick="location.href='{% url 'log' %}' ">Logout</button>
    </div>
<h2>Add Image</h2>
<form action="/postcreate/" method="post">
    {% csrf_token %}
    <br>
    Title:
    <input type="text" name="work" required><br><br>
    Type Something:
    <textarea rows="5" cols="40" name="progress" required></textarea>
    <br><br>
    Document Upload:
    <input type="file" name="files[]" id="files">
    <input type="hidden" name="url" id="url">
    <button type="button" onclick="uploadimage()">Upload</button><br><br>
    <input type="submit" value="Submit"><br><br>
</form>
</body>
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
<script>
    var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL:  "",
    storageBucket:  "",
  };
  firebase.initializeApp(firebaseConfig);
  function uploadimage(){
  var storage = firebase.storage();
  var file=document.getElementById("files").files[0];
  var storageref=storage.ref();
  var thisref=storageref.child(file.name).put(file);
  thisref.on('state_changed',function(snapshot) {
  console.log('Done');

  }, function(error) {
  console.log('Error',error);

}, function() {
  // Uploaded completed successfully, now we can get the download URL
  thisref.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
    document.getElementById("url").value=downloadURL;
    alert('uploaded successfully');
  });
});
}
</script>
</html>

Now move to your project directory and run our project using the given command :

python manage.py runserver

Output:

Search Data in Django From Firebase

annianni

Improve

Article Tags :

Practice Tags :

python

Uploading Image Using Django with Firebase

Step By Step Implementation

Creating a project in Django:

Integrating Firebase Database to Django Project:

Similar Reads

Thank You!

What kind of Experience do you want to share?