JavaScript: Transform image URL into File Object

Question

I am trying to get the image from a URL within an input box. Essentially, I want to transform an image URL into a file object.

For comparison, if you go to Google Images and select a random image, you'll be able to copy either the Image or the Image's URL.

In my case, the user would grab that URL (such as https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png ) and paste into the input box then click my "add image" button. I want to locally have access to this image file from the URL which I am able to pass onto a function from ng-file-upload called Upload.dataUrl(myImageFile) , which will do the uploading for me.

At the moment, I have checked to make sure it the URL is an valid image, though I'm not sure how to get the image (image URL versus just image).

formSubmit: function(){
      var url = document.forms["imageForm"].elements["urlImage"].value;
      console.log(url);
      if (!$scope.checkURL(url)) {
        console.log("It looks like the url that you had provided is not valid! Please only submit correct image file. We only support these extensions:- jpeg, jpg, gif, png.")
        return(false);
      }
      $scope.testImage(url, function(testURL, result) {
        if (result == "success") {
          // you can submit the form now
          console.log("SUCCESS!");
          //document.forms["submitForm"].submit();

          //!!!---------------------!!!
          //Correct URL link, but not sure how to get the image from URL
          //!!!---------------------!!!

        } 
        else if (result == "error") {
          console.log("The image URL does not point to an image or the correct type of image.");
        } 
        else {
          console.log("The image URL was not reachable.  Check that the URL is correct.");
        }
      });
      return(false); // can't submit the form yet, it will get sumbitted in the callback

    },
    checkURL: function(url){
      return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
    },
    testImage: function(url, callback, timeout) {
      timeout = timeout || 5000;
      var timedOut = false, timer;
      var img = new Image();
      img.onerror = img.onabort = function() {
          if (!timedOut) {
              clearTimeout(timer);
              callback(url, "error");
          }
      };
      img.onload = function() {
          if (!timedOut) {
              clearTimeout(timer);
              callback(url, "success");
          }
      };
      img.src = url;
      timer = setTimeout(function() {
          timedOut = true;
          callback(url, "timeout");
      }, timeout); 
    }

Any assistance would be greatly appreciated!

Answer 1

You don't need to difficult it too
It's very simple

document.getElementById("myImage").src = document.myform.myinput.value;