Firebase cloud storage upload / download files

Wadie Mendja November 25, 2020
Cloud Storage allows developers to quickly and easily download and upload files like images, vidoes, audio..etc to a Google Cloud Storage bucket provided and managed by Firebase. So in this article we're going to cover how you can download and upload files to the cloud storage with JavaScript.

cloud storage for firebase download / upload

Here is the example that we're going to be practicing with:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>firebase storage</title>
<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-storage.js"></script>
</head>
<body>
<input type="file" id="file">
<progress id="progress_bar" value="0" max="100"></progress>
<img src="" alt="" id="image">
<script src="app.js" type="text/javascript"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

- In the head we've imported the firebase-app.js and firebase-storage.js.
- In the body we created a file input so the users can choose the files that they want to upload.
- A progress bar (as an upload indicator): to tell the user how much data has been transferred to the cloud (%).
- In this example we're going to be uploading images, so I just add an image tag just so when the upload finishes we're going to be displaying the image in our web app.(download part)
- An app.js file to code JavaScript in a separate file.

1) Upload files:

Todo:

  1. Create an event listener for the file input (change event).
  2. Get the file that the user chose.
  3. Create the reference were you want to store the file(e.g: /doc/images/img.jpg).
  4. Upload the file (put() method).
  5. Calculate the percentage of how much data has been transferred to the cloud.
  6. Assign the the percentage as a value to the progress bar.
 app.js

// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "test-6dc98.firebaseapp.com",
databaseURL: "https://test-6dc98.firebaseio.com",
projectId: "test-6dc98",
storageBucket: "test-6dc98.appspot.com",
messagingSenderId: "xxxxxxxxx",
appId: "1:xxxxxxxxxx:web:xxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
document.getElementById('file').addEventListener('change', (event) => {
const file = event.target.files[0];
const storageRef = firebase.storage().ref('images/' + file.name);
storageRef.put(file).on('state_changed', (snapshot) => {
const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log(progress);
const progressBar = document.getElementById('progress_bar');
progressBar.value = progress;
});
});
view raw app.js hosted with ❤ by GitHub

2) Download files:

Todo:

  1. Select the uploaded image(which has the reference that we just created).
  2. Get its URL (getDownloaURL() method).
  3. Assign the URL as a source to the img tag.
storageRef.getDownloadURL().then(function(url){
const image = document.getElementById('image');
image.src = url
});
view raw getDownloadURL.js hosted with ❤ by GitHub

Further details in the following video:


Github repo:

Demo:
Tags

Post a Comment

0 Comments