In this part of Python Django with Google Firebase series I’ll cover Firebase Storage. For showcasing the example of Firebase Storage we’ll use a simple html form for uploading files to Firebase storage & further retrieve it’s URL and push that URL to Firebase database for further usage.
Check out this video, code below follows the video to help:
If you like videos like this consider donating $1, or simply turn off AdBlocker. Either helps me to continue making tutorials.
Transcript / Cheat Sheet
Templates :
First we need to edit our ‘create.html’, need to add Input type = “file” field and a Upload button. Due to browser restrictions we can’t send a file as POST operation to views.py, we need to use JavaScript for uploading file to Firebase storage.
Create.html:
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Sign</title> | |
<style> | |
div{ | |
position : absolute; | |
right : 10px; | |
top : 5px | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
<button type="button" onclick="location.href='{% url 'log' %}'">Logout</button> | |
</div> | |
<H2>Create Daily Progress Report</H2> | |
<form action="/post_create/" method="post"> | |
{% csrf_token %} | |
Work Assigned : | |
<input type="text" name="work" required><br><br> | |
Progress: | |
<textarea rows="5" cols="40" name="progress" required></textarea> | |
<br><br> | |
Document Uplaod: | |
<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"> | |
</form> | |
</body> | |
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script> | |
<script> | |
var config = { | |
apiKey: "AIzaSyB0Il0NLQPxxDyMgoE0fOMd4pYUkbkZVvI", | |
authDomain: "cpanel-5e873.firebaseapp.com", | |
databaseURL: "https://cpanel-5e873.firebaseio.com", | |
storageBucket: "cpanel-5e873.appspot.com", | |
messagingSenderId: "579985583952" | |
}; | |
firebase.initializeApp(config); | |
// Get a reference to the storage service, which is used to create references in your storage bucket | |
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("file uplaoded succesfully"); | |
}, | |
function(error) { | |
}, | |
function() { | |
// Upload completed successfully, now we can get the download URL | |
var downloadURL = thisref.snapshot.downloadURL; | |
console.log("got url"); | |
document.getElementById("url").value = downloadURL; | |
alert("file uploaded successfully"); | |
}); | |
} | |
</script> | |
</html> |
Now we are done with uploading file to Firebase Storage and retrieving uploaded file URL, it’s time to save that URL to Firebase Realtime Database.
Views.py :
def post_create(request): #Just added source code for post_create function/view | |
import time | |
from datetime import datetime, timezone | |
import pytz | |
tz= pytz.timezone('Asia/Kolkata') | |
time_now= datetime.now(timezone.utc).astimezone(tz) | |
millis = int(time.mktime(time_now.timetuple())) | |
print("mili"+str(millis)) | |
work = request.POST.get('work') | |
progress =request.POST.get('progress') | |
url = request.POST.get('url') | |
idtoken= request.session['uid'] | |
a = authe.get_account_info(idtoken) | |
a = a['users'] | |
a = a[0] | |
a = a['localId'] | |
print("info"+str(a)) | |
data = { | |
"work":work, | |
'progress':progress, | |
'url':url | |
} | |
database.child('users').child(a).child('reports').child(millis).set(data) | |
name = database.child('users').child(a).child('details').child('name').get().val() | |
return render(request,'welcome.html', {'e':name}) | |
That’s end up with great tutorial on Python Django with Google Firebase Storage : Uploading files using Forn, i hope you guys enjoyed it 🙂
Get full source code for Django Project Here.
Hello.
I'm learning well. I put key in config but it is not saved in firebase storage. Is it a version issue?