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)