Retrieve image file from url using JS / Angular

Question

Im working on exporting data from a wordpress environment to a MongoDB using MongooseJS as data model bridges. I've got a JSON with every objects including all required information.

As a example, I've got user item including an avatarpath field pointing to the wordpress server url: (ex: http://url/wp-content/upload/img/avatar.jpg )

What I would like to do it retrieving the image from its url, upload it to my new storage folder, retrieve the new path, and store the new object in my mongodb.

My issue is that I can't manage to find a way to get the file data from a http get or any other way. Usually, I've got a file input in my html, and I start from the file object from this input. How should I proceed to make this work? Am I going into the wrong direction?

I've found this answer but it seems deprecated: how to upload image file from url using FileReader API?

Here is what I've got for now:

$scope.curateurs_data = {};
$scope.curateurs = [];

  $http.get('resources/json_curateurs.json').success(function(data) {
    $scope.curateurs_data = data;
    console.log(data[0]);
    $scope.getPics();
  });

  //RETRIEVE IMAGE DATA
  $scope.getPics = function(data){
    console.log("RETRIEVING PICTURE")

    var uploadPlace = '/upload/user';
    var images;

    angular.forEach($scope.curateurs_data, function(item, key) {
      $scope.curitem = item;
      console.log($scope.curitem);

      $http.get(item.avatarpath, {responseType: "arraybuffer"}).success(function(data){

        var arrayBufferView = new Uint8Array( data );
        var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL( blob );

        console.log(imageUrl);
        console.log(blob);

        images = blob;

        var pic = {
          images: images
        };

        Upload.upload({
          url: uploadPlace,
          arrayKey: '',
          data: pic,
        }).then(function(response) {
          // Adding data paths to formData object before creating mood
          // MUST respect images array order
          $scope.curitem.avatarpath = response.data.files[0].path;
          console.log(response.data.files[0].path);
        });

      }).error(function(err, status){})  

      $scope.curateurs.push($scope.curitem);

    });
  }

I've also tried something like this but I can't seems to make it work as well.

$http.get(item.avatarpath,{responseType: "blob"}).
        success(function(data, status, headers, config) {
            // encode data to base 64 url
            fr = new FileReader();
            fr.onload = function(){
                // this variable holds your base64 image data URI (string)
                // use readAsBinary() or readAsBinaryString() below to obtain other data types
                console.log( fr.result );
            };
            fr.readAsDataURL(data);
            console.log(fr.readAsDataURL(data));
        }).
        error(function(data, status, headers, config) {
            alert("The url could not be loaded...\n (network error? non-valid url? server offline? etc?)");
        });

Answer 1

Use node's http object on the backend to download the image. Something like:

http.request(url, function(response) {                                        
     // Your code to write the file out or store it in the database here.                                                 
});