Firebase's documentation covers downloading an image if you call storage and getDownloadURL, and I have this working fine (straight from the docs):

storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
  // `url` is the download URL for 'images/stars.jpg'

  // This can be downloaded directly:
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function(event) {
    var blob = xhr.response;
  };
  xhr.open('GET', url);
  xhr.send();

  // Or inserted into an <img> element:
  var img = document.getElementById('myimg');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});

However, I already have a URL and want to download an image without calling firebase storage. This is my attempt:

var url = "..."
console.log(url);
// This can be downloaded directly:
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
  var blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();

But, no file is downloaded and no error is shown in the browser's development tools.

Note: I do know the URL is correct because if I put URL directly into my browser search bar, I am able to access the file and download it.

Does anyone know how to download an image using a Download URL that you already have (without calling Firebase Storage as they do in the docs)?

Firebase's documentation covers downloading an image if you call storage and getDownloadURL, and I have this working fine (straight from the docs):

storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
  // `url` is the download URL for 'images/stars.jpg'

  // This can be downloaded directly:
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function(event) {
    var blob = xhr.response;
  };
  xhr.open('GET', url);
  xhr.send();

  // Or inserted into an <img> element:
  var img = document.getElementById('myimg');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});

However, I already have a URL and want to download an image without calling firebase storage. This is my attempt:

var url = "https://firebasestorage.googleapis./v0/b/somerandombucketname..."
console.log(url);
// This can be downloaded directly:
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
  var blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();

But, no file is downloaded and no error is shown in the browser's development tools.

Note: I do know the URL is correct because if I put URL directly into my browser search bar, I am able to access the file and download it.

Does anyone know how to download an image using a Download URL that you already have (without calling Firebase Storage as they do in the docs)?

• javascript
• firebase
• download
• firebase-storage

Share Improve this question Follow edited Aug 2, 2017 at 16:32 Rbar asked Aug 2, 2017 at 6:51 RbarRbar 3,94899 gold badges4545 silver badges7070 bronze badges 2

• If you take a look at the browser's developer tools, does it show some error/s? – Rax Weber Commented Aug 2, 2017 at 6:55
• @RaxWeber no errors are shown in the browser's dev tools – Rbar Commented Aug 2, 2017 at 16:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

This ended up working for me:

var url = "https://firebasestorage.googleapis./v0/b/somerandombucketname..."
var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
  var a = document.createElement('a');
  a.href = window.URL.createObjectURL(xhr.response);
  a.download = "fileDownloaded.filetype"; // Name the file anything you'd like.
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
};
xhr.open('GET', url);
xhr.send();

This is essentially creating an a href to the URL I have and then clicking the a href programmatically when the xhr response is received.

It is not clear to me why the first way doesn't work as well, but hopefully this helps others that face the same issue.