title: Angularjs upload file and file reader to resize image?
body: <p>i am using angularjs file upload <a href="https://github.com/danialfarid/angular-file-upload" rel="nofollow">angularjs-file-upload</a> to upload file to server side. in the following process, i am checking the image size width and height and html5 file reader and canvas to create different size from the same file. but, i have some problem with onloadend event. </p>
  
  <pre><code>$scope.onFileSelect = function ($files) {
      file = $files[0];
      $scope.loading = true;
      //$files: an array of files selected, each file has name, size, and type.
  
      img = new Image();
      img.onload = function () {
          var self = this;
          if (self.width &gt; sizes.width &amp;&amp; self.height &gt; sizes.height) {
              var i, len = Images.channel.length;
              for (i = 0; i &lt; len; i++) {
                  var size = Images.channel[i];
                  var reader = new FileReader();
                  reader.readAsDataURL(file);
                  reader.onloadend = function () {
                      var tempImg = new Image();
                      tempImg.src = reader.result;
                      tempImg.onload = function () {
                          var canvas = document.createElement('canvas');
                          canvas.width = size.width;
                          canvas.height = size.height;
                          var ctx = canvas.getContext("2d");
                          ctx.drawImage(this, 0, 0, size.width, size.height);
                          var dataURL = canvas.toDataURL("image/jpeg");
                          //extract data from urlString
                          var n = dataURL.indexOf(",");
                          var data = dataURL.toString().substring(n); //we skip the ',' symbol used by navigator to detect canvas text
                          var imageFile = new Blob([data], { type: "plain/text"});
                          $scope.$apply(function () {
                              $uploadWrapper(pinholeAdminServerRoutes.image.upload,
                                  imageFile,
                                  {   "operationType": size.operationType,
                                      "objectId": $scope.channel.id,
                                      "size": size.label
                                  }, function (response) {
                                      $scope.loading = false;
                                  }, function (error) {
                                      $scope.loading = false;
                                  });
                          });
                      };
                  };
              }
          } else {
              $scope.$apply(function () {
                  $scope.imageSizeNotValid = true;
                  $scope.loading = false;
              });
          }
      };
      img.src = _URL.createObjectURL(file);
  };
  </code></pre>
  
  <p>the final result is that the following code will just upload the final image.</p>