Angular 2 Image resize before upload

Question

Im looking to resize an image before it is uploaded to a server, at the moment i am using ng2-imageupload like this:

  <input id="media" class="inputfile" type="file" name="media" image-upload
  (imageSelected)="selected($event)"
  [resizeOptions]="resizeOptions" (change)="onChange($event)">

export class WpMediaFormComponent { file: File;

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);
}

This then returns an object, like this:

dataURL:"data:image/jpeg;base64, DATA URI HERE"
type:"image/jpeg;"

I can then convert this object to a blob using this function:

dataURItoBlob(dataURI) {
        // convert base64/URLEncoded data component to raw binary data held in a string
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 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 < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        return new Blob([ia], {type:mimeString});
    }

Before doing this I was uploading the image to the server using this code:

 onChange(event: EventTarget) {
        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        let files: FileList = target.files;
        this.file = files[0];
        console.log(this.file);
        //this.update.emit(this.file);
    }

Does anyone have idea how I can feed the blob returned from dataURItoBlob method into the file upload onChange event?

Im a little lost here.

Answer 1

So I figured it out with the help of @Brother Woodrow, and this thread: How to convert Blob to File in JavaScript

Here is my updated code, not the only thing I had to change was the selected method:

selected(imageResult: ImageResult) {
    // create a blob 
    let blob: Blob = this.dataURItoBlob(imageResult.resized.dataURL);
    // get the filename
    let fileName: string = imageResult.file.name;
    // create a file
    this.file = new File([blob], fileName);
    console.log(this.file);
    // event emitter send to container then to http post 
    this.update.emit(this.file);        
}

I can now upload 3MB and they are pushed to the server around 150kB in seconds which is great for the user especially as this app will mostly be used by mobile devices.