angular2-img-cropper icon indicating copy to clipboard operation
angular2-img-cropper copied to clipboard

How to upload the image on click canvas area instead of speared upload button

Open dhanarajp opened this issue 7 years ago • 6 comments

How to upload the image on click canvas area instead of speared upload button,

dhanarajp avatar Jan 24 '18 07:01 dhanarajp

is it possible can bring in this plugin as per below image, i can able to onclick upload dialog opening but i stuck in drag and drop functionality.

image

dhanarajp avatar Jan 25 '18 17:01 dhanarajp

do you still need help?

web-dave avatar Feb 09 '18 09:02 web-dave

yes, @web-dave

dhanarajp avatar Feb 09 '18 09:02 dhanarajp

how do you trigger the input dialog?

<input *ngIf="!settings.noFileInput" #fileInput type="file" accept="image/*" (change)="fileChangeListener($event)">

and in the onMouseDown

@ViewChild("fileInput") fileInput: ElementRef;

  public onMouseDown(event: MouseEvent): void {
    this.cropper.onMouseDown(event);
    if (!this.cropper.isImageSet() && !this.settings.noFileInput) {
      // load img
      this.fileInput.nativeElement.click();
    }
  }

web-dave avatar Feb 09 '18 09:02 web-dave

That's one way. but I'll test it tonight.

web-dave avatar Feb 09 '18 09:02 web-dave

Hi @web-dave , i got error: [ts] Property 'isImageSet' does not exist on type 'ImageCropperComponent'.

I am using "ng2-img-cropper": "^0.8.6",

dhanarajp avatar Feb 10 '18 12:02 dhanarajp