aberezkin/ng2-image-upload how can I prepopulate the image

Question

In angular2 using aberezkin/ng2-image-upload

I have in my template

<image-upload
  [max]="1"  
  [url]="uploadUrl"
  [preview]="true"
  [buttonCaption]="'Select Images!'"
  [dropBoxMessage]="'Drop your images here!'"
  (onFileUploadFinish)="imageUploaded($event)"
  (onRemove)="imageRemoved($event)"
  (isPending)="disableSendButton($event)"
></image-upload>

This is part of a larger form for an e-commerce site's product capture/edit screen including this image upload

It's all great for a new product and a new image but if I have to edit an existing product and thus have the data from the server for that product, including the image, how can I pre-populate image-upload with this image thus allowing a user to keep it or delete it/change it?

Also is there a way to filter file type allowed?

Answer 1

So you want to let user select the image and able to change it befor Uploading

I made a simple example of preview and uploading image I think it will be helpful for you

Preview and uploade image angular2