angular2-image-upload unable to get hold of images

[Mat Anthony]

Hi,

I'm currently trying to upload/display max 3 images using angular2-image-upload and then use an image zoom on the first image.
I have updated/displayed 3 images successfully, but I’m unable to get hold of the 3 image (i.e. bytes) within my typescript class ImageUploadAndZoomComponent.ts
I have noticed that the onUploadFinished is called after all the images have been uploaded, but this only gives me the 1st image as a FileHolder.
The FileHolder does contain the image in bytes and also the name of the image.
I have also noticed that onBeforeUpload, does get called for the individual images, but only provides the image name and not its bytes.

file:imagezoom.component.html
<img class='img1'> <div class="row"> <div class="col-sm-12"> <image-upload [max]="3" [beforeUpload]="onBeforeUpload" [buttonCaption]="'Select Images!'" [dropBoxMessage]="'Drop your images here!'" [extensions]="['jpg','png','gif']" (removed)="onRemoved($event)" (uploadFinished)="onUploadFinished($event)" (uploadStateChanged)="onUploadStateChanged($event)"> </image-upload> </div> </div> </div>

file:ImageUploadAndZoomComponent.ts
onUploadFinished(file: FileHolder) { this.imageSource= file.src; } onRemoved(file: FileHolder) { console.log(this.file); } onUploadStateChanged(state: boolean) { console.log("onUploadStateChanged "); } onBeforeUpload = (metadata: UploadMetadata) => { return metadata; }

Mat

[Mat Anthony]

Hi All,
  can anybody help me with this, or provide a solution that includes multi image uploads, displayed as small images. Then allow the user to select one of the images and provide a zoom of that image.
  Trying to use just angular 5 libs if possible.

Mat