Uploading Image Using Django with Firebase

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 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.
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.
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 adminfrom django.urls import pathfrom . import viewsurlpatterns = [        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 renderimport 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:
simmytarika5
Django-Projects
Firebase
How To
Python
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Set Git Username and Password in GitBash?
How to Permanently Disable Swap in Linux?
How to Install Jupyter Notebook on MacOS?
How to Import JSON Data into SQL Server?
How to Install and Use NVM on Windows?
Read JSON file using Python
Python map() function
Adding new column to existing DataFrame in Pandas
How to get column names in Pandas dataframe