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{
}
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 >
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:
Similar Reads
Django - Upload files with FileSystemStorage
Django ships with the FileSystemStorage class that helps to store files locally so that these files can be served as media in development. In this article, we will see how to implement a file upload system using FileSystemStorage API to store the files locally. Note:This method should only be used i
3 min read
Android - Upload an Image on Firebase Storage with Kotlin
Firebase Cloud Storage stores files in the Google Cloud Storage bucket and makes them accessible through both Firebase and Google Cloud. It allows us to upload and download files from mobile clients through the Firebase SDKs, and perform server-side processing such as image filtering or video transc
6 min read
Search Data in Django From Firebase
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 st
4 min read
Integrating TinyMCE with Django
TinyMCE is a online rich text editor which is fully flexible and provides customisation. mostly used to get dynamic data such as articles in GFG and much more, their is no static database for posts Installation - To integrate it with Django web app or website you need to first install its pip librar
2 min read
How to upload an image using HTML and JavaScript in firebase ?
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 st
3 min read
How to upload files in firebase storage using ReactJS ?
Firebase Storage is a powerful cloud storage solution provided by Google's Firebase platform. It allows developers to store and retrieve user-generated content, such as images, videos, and other files, in a secure and scalable manner. In this article, we will explore how to upload files to Firebase
2 min read
Django Get the Static Files URL in View
In Django, static files such as CSS, JavaScript, and images are essential for building interactive and visually appealing web applications. While Django provides robust mechanisms to manage static files, we might need to access the URLs of these static files directly within our views, especially whe
3 min read
Count number of Faces from Image using Django
This article outlines the process of creating a face-counting feature in images through a Simple Django Web App. The project allows users to count the number of faces in uploaded images. Users simply need to upload an image, and the web app will automatically analyze the image to determine the count
6 min read
Firebase Integration With Web
Firebase is a platform developed by Google for creating mobile and web applications. We will see how to integrate or connect firebase with our sample Web application. Approach: Follow the below steps to integrate your web app with firebase. Firstly we will create a HTML page in the index.html file.O
3 min read
Fetch and Send with Firestore using ReactJS
To perform fetch and send with Firestore using React require sending and receving data on the firestore database. Firestore is a NoSQL database developed by Google as an alternative to the Firebase database. It has been designed to provide a better developer experience and simplify the development p
4 min read