How to upload with file uploaders

[kolkov]

Hi! How to upload resized image with file uploader like this package: https://github.com/jkuri/ngx-uploader

Or is there a better solution?

[vajnorcan]

This is what I did:

• Tell the cropper component not to render the this.cropperSettings.noFileInput = true;

• Use standard HTML5 input element <label class="btn btn-primary" > <input type="file" #fileInput accept="image/*" (change)="uploadPhoto($event)" style="display: none;"> Upload Photo </label>

• and then in the 'uploadPhoto'

  
  public uploadPhoto($event): void {
  const image = new Image();
  const file: File = $event.target.files[0];
  const myReader: FileReader = new FileReader();
  const scope = this;
  
  if (!file) {
    return;
  }
  
  myReader.onloadend = function (loadEvent: any) {
    image.src = loadEvent.target.result;
    scope.cropper.setImage(image)
  };
  
  myReader.readAsDataURL(file);
  }

- Where 'cropper' is decorated with the '@ViewChild'
`@ViewChild('cropper')
  public cropper: ImageCropperComponent;`

[ZikZakJainy]

it's shows an ERROR TypeError: Cannot read property 'setImage' of undefined, at scope.cropper.setImage(image)