Header Ads

Python Django with Google Firebase Tutorial : Firebase Storage Upload Data Using Form #Part6


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.



No comments:

Powered by Blogger.