title: Angular 2 Image resize before upload
body: <p>Im looking to resize an image before it is uploaded to a server, at the moment i am using ng2-imageupload like this:</p>
  
  <pre><code>  &lt;input id="media" class="inputfile" type="file" name="media" image-upload
    (imageSelected)="selected($event)"
    [resizeOptions]="resizeOptions" (change)="onChange($event)"&gt;
  </code></pre>
  
  <p>export class WpMediaFormComponent {
      file: File;</p>
  
  <pre><code>resizeOptions: ResizeOptions = {
      resizeMaxHeight: 768,
      resizeMaxWidth: 438
  };
  
  selected(imageResult: ImageResult) {
      console.log(imageResult);
     this.dataBlob = this.dataURItoBlob(imageResult.resized.dataURL); 
      let blob = this.dataURItoBlob(imageResult.resized.dataURL);
  }
  </code></pre>
  
  <p>This then returns an object, like this:</p>
  
  <pre><code>dataURL:"data:image/jpeg;base64, DATA URI HERE"
  type:"image/jpeg;"
  </code></pre>
  
  <p>I can then convert this object to a blob using this function:</p>
  
  <pre><code>dataURItoBlob(dataURI) {
          // convert base64/URLEncoded data component to raw binary data held in a string
          var byteString;
          if (dataURI.split(',')[0].indexOf('base64') &gt;= 0)
              byteString = atob(dataURI.split(',')[1]);
          else
              byteString = decodeURI(dataURI.split(',')[1]);
  
          // separate out the mime component
          var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  
          // write the bytes of the string to a typed array
          var ia = new Uint8Array(byteString.length);
          for (var i = 0; i &lt; byteString.length; i++) {
              ia[i] = byteString.charCodeAt(i);
          }
  
          return new Blob([ia], {type:mimeString});
      }
  </code></pre>
  
  <p>Before doing this I was uploading the image to the server using this code:</p>
  
  <pre><code> onChange(event: EventTarget) {
          let eventObj: MSInputMethodContext = &lt;MSInputMethodContext&gt; event;
          let target: HTMLInputElement = &lt;HTMLInputElement&gt; eventObj.target;
          let files: FileList = target.files;
          this.file = files[0];
          console.log(this.file);
          //this.update.emit(this.file);
      }
  </code></pre>
  
  <p>Does anyone have idea how I can feed the blob returned from dataURItoBlob method into the file upload onChange event?</p>
  
  <p>Im a little lost here.</p>