Upload image from URL to Firebase Storage

I'm wondering how to upload file onto Firebase's storage via URL instead of input (for example). I'm scrapping images from a website and retrieving their URLS. I want to pass those URLS through a foreach statement and upload them to Firebase's storage. Right now, I have the firebase upload-via-input working with this code:

var auth = firebase.auth();
var storageRef = firebase.storage().ref();

function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();
 var file = evt.target.files[0];


  var metadata = {
    'contentType': file.type
  };

  // Push to child path.
  var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);

  // Listen for errors and completion of the upload.
  // [START oncomplete]
  uploadTask.on('state_changed', null, function(error) {
    // [START onfailure]
    console.error('Upload failed:', error);
    // [END onfailure]
  }, function() {
    console.log('Uploaded',uploadTask.snapshot.totalBytes,'bytes.');
    console.log(uploadTask.snapshot.metadata);
    var url = uploadTask.snapshot.metadata.downloadURLs[0];
    console.log('File available at', url);
    // [START_EXCLUDE]
    document.getElementById('linkbox').innerHTML = '<a href="' +  url + '">Click For File</a>';}

Question what do I replace

var file = evt.target.files[0];

with to make it work with external URL instead of a manual upload process?

var file = "http://i.imgur.com/eECefMJ.jpg"; doesn't work!

Solution 1:

There's no need to use Firebase Storage if all you're doing is saving a url path. Firebase Storage is for physical files, while the Firebase Realtime Database could be used for structured data.

Example . once you get the image url from the external site this is all you will need :

var externalImageUrl = 'https://foo.com/images/image.png';

then you would store this in your json structured database:

databaseReference.child('whatever').set(externalImageUrl);

OR

If you want to actually download the physical images straight from external site to storage then this will require making an http request and receiving a blob response or probably may require a server side language ..

Javascript Solution : How to save a file from a url with javascript

PHP Solution : Saving image from PHP URL

Solution 2:

This answer is similar to @HalesEnchanted's answer but with less code. In this case it's done with a Cloud Function but I assume the same can be done from the front end. Notice too how createWriteStream() has an options parameter similar to bucket.upload().

const fetch = require("node-fetch");

const bucket = admin.storage().bucket('my-bucket');
const file = bucket.file('path/to/image.jpg');

fetch('https://example.com/image.jpg').then((res: any) => {
  const contentType = res.headers.get('content-type');
  const writeStream = file.createWriteStream({
    metadata: {
      contentType,
      metadata: {
        myValue: 123
      }
    }
  });
  res.body.pipe(writeStream);
});