title: Retrieve image file from url using JS / Angular
body: <p>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.</p>
  
  <p>As a example, I've got user item including an avatarpath field pointing to the wordpress server url: (ex: <a href="http://url/wp-content/upload/img/avatar.jpg" rel="nofollow noreferrer">http://url/wp-content/upload/img/avatar.jpg</a>)</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>I've found this answer but it seems deprecated:
  <a href="https://stackoverflow.com/questions/20903812/how-to-upload-image-file-from-url-using-filereader-api">how to upload image file from url using FileReader API?</a></p>
  
  <p>Here is what I've got for now:</p>
  
  <pre><code>$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);
  
      });
    }
  </code></pre>
  
  <p>I've also tried something like this but I can't seems to make it work as well.</p>
  
  <pre><code>$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?)");
          });
  </code></pre>