CODEWITHSUNDEEP
javascriptfirebasefirebase-storage
FiringBlanks
FiringBlanks

Reputation: 2084

Firebase Storage files not downloading. What am I doing wrong?

I need to download a file that has been uploaded to Firebase Storage. I used to get the CORS error but I used gsutil as per the docs and now nothing really happens. The download doesn't start. What am I doing wrong? 

//Create reference of Storage
    let storage = firebase.storage();

    //Create reference to file in Storage
    let pathSubmission = 'Uploads/' + this.place1+ '/' + this.place2+ '/' + this.place3+ '/' + this.downloadSubmissionUID;

    let storageRef = storage.ref(pathSubmission);

    storageRef.getDownloadURL().then((url) => {

      console.log('downloadURL arg: ' + url);

      //Download file (no idea how this works)
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.onload = function(event) {
        var blob = xhr.response;
      };
      xhr.open('GET', url);
      xhr.send();

    })

Upvotes: 0

Views: 1607

Answers (2)

FiringBlanks
FiringBlanks

Reputation: 2084

Figured it out using Kai's blog, here's my solution: 

    //Create reference of Storage
    let storage = firebase.storage();

    //Create reference to file in Storage
    let pathSubmission = 'Uploads/' + this.place1 + '/' + this.place2+ '/' + this.place3 + '/' + this.downloadSubmissionUID;

    //Assign Storage reference the path reference
    let storageRef = storage.ref(pathSubmission);

    //Download file by creating XMLHttpRequest
    storageRef.getDownloadURL().then((url) => {
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.onload = function(event) {
        //Create an `a` tag (since it has an `href` and a `download` attribute) 
        var a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'someFileName';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();                            //Simulates a click event
        var blob = xhr.response;
      };
      xhr.open('GET', url);
      xhr.send();
    })

Upvotes: 2

Sidney
Sidney

Reputation: 4775

Actually, the file is probably getting downloaded. The problem is in this code here:

//Download file (no idea how this works)
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
  var blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();

The browser is doing exactly what it's told. It downloads the file as a blob. Then discards the result, because you aren't doing anything with the data in the onload handler!

First, I'd recommend using fetch, which provides a much more intuitive API than the XMLHttpRequest (in my opinion).

Here's how you might do that:

// Create reference of Storage
let storage = firebase.storage();

// Create reference to file in Storage
let pathSubmission = 'Uploads/' + this.place1+ '/' + this.place2+ '/' + this.place3+ '/' + this.downloadSubmissionUID;

let storageRef = storage.ref(pathSubmission);

storageRef.getDownloadURL()
  .then(url => {
    console.log('Download URL: ' + url)
    return fetch(url)
  })
  .then(response => response.blob())
  .then(blob => {
    console.log('File downloaded as blob')
    // Do something with the blob...
  })
  .catch(error => {
    console.error('Something went wrong while downloading the file:', error)
  })

Upvotes: 1

Related Questions