title: How to save a copy of an image (located at a URL) to Firebase Storage (web) using Javascript?
body: <p>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.</p>
  
  <p>This is my current attempt with Javascript: </p>
  
  <pre><code>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.");
          }
  }
  </code></pre>
  
  <p>I have two HTML tags like this:</p>
  
  <pre><code>&lt;div id="picTestAddress"&gt;&lt;/div&gt;
  &lt;img id="picTestImage" /&gt;
  </code></pre>
  
  <p>I'm pretty sure this is only saving the url and not the physical image.</p>
  
  <p>The "picTestAddress" gets filled in with <code>"qAjnfi387DHhd389D9j3r/profilePhoto"</code>, and the console shows the following error for "picTestImage": <code>GET file:///android_asset/www/qAjnfi387DHhd389D9j3r/profilePhoto net::ERR_FILE_NOT_FOUND</code></p>
  
  <p>I'm using Firebase for Web and Cordova. And I'm testing the app on my android phone.</p>
  
  <p>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 <code>filePath</code> (eg: <code>document.getElementById('picTestImage').src = "https://firebasestorage.googleapis.com/v0/b/MY_APP.appspot.com/o/"+filePath;</code>).</p>
  
  <p>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: "<a href="http://carltonvet.com.au/sites/default/files/styles/large/public/images/article/cats.jpg" rel="nofollow noreferrer">http://carltonvet.com.au/sites/default/files/styles/large/public/images/article/cats.jpg</a>" </p>
  
  <p>So now I think I've just saved the url to the storage instead of the actual image file. </p>
  
  <p>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.</p>
  
  <p>I've looked through some other questions, such as this one: <a href="https://stackoverflow.com/questions/13955813/how-can-i-view-and-store-images-in-firebase">How to store and view images on firebase?</a> and was going to follow the example here: <a href="https://github.com/firebase/firepano" rel="nofollow noreferrer">https://github.com/firebase/firepano</a> 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.</p>
  
  <p>Any advice or help with how to do this would be really appreciated.
  Thank you in advance! </p>