How to save a copy of an image (located at a URL) to Firebase Storage (web) using Javascript?

Question

I'm trying to create a copy of an image (which is located at a url), and save it to Firebase's storage facility. I want to store the actual image file and not just the url. If I understand correctly, I first need to convert the image at the url to a blob or file and then upload the data to the Firebase storage.

This is my current attempt with Javascript:

function savePicture(){
    var url = ["http://carltonvet.com.au/sites/default/files/styles/large/public/images/article/cats.jpg"];
    var blobpic = new Blob(url, {type: 'file'}); 
    console.log(blobpic);

    var user = firebase.auth().currentUser;
        if (user != null) {
            var userid = user.uid; 

            var ref = firebase.storage().ref(userid + "profilePhoto");
            ref.put(blobpic).then(function(snapshot) {
                console.log('Picture is uploaded!');
                console.log(snapshot);

                var filePath = snapshot.metadata.fullPath;
                document.getElementById('picTestAddress').innerHTML = ""+filePath;
                document.getElementById('picTestImage').src = ""+filePath;
        });
        }else{
                console.log("Something went wrong, user is null.");
        }
}

I have two HTML tags like this:

<div id="picTestAddress"></div>
<img id="picTestImage" />

I'm pretty sure this is only saving the url and not the physical image.

The "picTestAddress" gets filled in with "qAjnfi387DHhd389D9j3r/profilePhoto", and the console shows the following error for "picTestImage": GET file:///android_asset/www/qAjnfi387DHhd389D9j3r/profilePhoto net::ERR_FILE_NOT_FOUND

I'm using Firebase for Web and Cordova. And I'm testing the app on my android phone.

I understand that the error is because it's looking for the image on my phone's local file system. This makes sense to me, so I thought I could fix this by appending my app's address to the beginning of the filePath (eg: document.getElementById('picTestImage').src = "https://firebasestorage.googleapis.com/v0/b/MY_APP.appspot.com/o/"+filePath;).

To find the correct path, I navigated to the file's location in the Firebase console and copied the "Download url" address - but when I checked this (by entering it into my web browser) it loaded a white page which contained one line of text, which was the original url: "http://carltonvet.com.au/sites/default/files/styles/large/public/images/article/cats.jpg"

So now I think I've just saved the url to the storage instead of the actual image file.

I've been following the Firebase docs, and I think I have the uploading part working correctly, but I think I'm failing when it comes to converting the url to the blob/file with Javascript.

I've looked through some other questions, such as this one: How to store and view images on firebase? and was going to follow the example here: https://github.com/firebase/firepano but it says that it's now a legacy example and I can't seem to find an updated version in Firebase's samples section.

Any advice or help with how to do this would be really appreciated. Thank you in advance!

I guess the first question is: why? You can store the other URL in the Realtime Database, and download it in your app easily (see Zero To App: https://www.youtube.com/watch?v=xAsvwy1-oxE). Otherwise, you'll need to XHR download the file, then re-upload it, like so: https://firebase.google.com/docs/storage/web/download-files#download_data_via_url — Mike McDonald, Dec 21 '16 at 16:02
Hi Mike, thanks for your comment, I wanted to store the image rather than the url in case the third party who hosts the image changes or deletes it, which in turn would break the link on my app. The link you posted helped me to get it working correctly, I'll post the solution below. Thanks again! — Emily, Dec 21 '16 at 17:20

score 4 · Answer 1 · answered Dec 21 '16 at 17:21

The following works:

function savePhoto(){

    var url = "http://www.planetware.com/photos-large/F/france-paris-eiffel-tower.jpg";
    // First, download the file:
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function(event) {
    var blob = xhr.response;

    // Get the current user:            
    var user = firebase.auth().currentUser;
    if (user != null) {
    var userid = user.uid; 

    // Define where to store the picture:
    var picRef = firebase.storage().ref(userid + "/profilePhoto");

    // Store the picture:
    picRef.put(blob).then(function(snapshot) {
    console.log('Picture uploaded!');

    // Now get image from storage and display in div...
    picRef.getDownloadURL().then(function(pic) {
        var userspic = pic;
        document.getElementById('picTestImage').src = userspic;

    }).catch(function(error) {
        console.log("There was an error: "+error);
    });

    });
    }else{
        console.log("We weren't able to confirm there is a current user, something went wrong.");
    }

  };
  xhr.open('GET', url);
  xhr.send();
}

score 4 · Accepted Answer · answered Dec 21 '16 at 20:10

Looks good, though I'd also consider a promisified version:

function getBlob(url) {
  return new Promise(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function(event){
      var blob = xhr.response;
      resolve(blob);
    };
    xhr.onerror = reject();
    xhr.open('GET', url);
    xhr.send();
  }
}

function storageURLForPhoto(oldURL, newName) {
  getBlob(oldURL)
  .then(function(blob) {
    var picRef = firebase.storage().ref().child(newName);
    return picRef.put(blob)
  })
  .then(function(snapshot) {
    return snapshot.downloadURL;
  });
  .catch(function() {
    // handle any errors
  })
}

Little easier to reason about :)

How to save a copy of an image (located at a URL) to Firebase Storage (web) using Javascript?

2 Answers2

Linked

Related