posts/angular/build-image-cropper-form-control-angular/

[utterances-bot]

How to build an image cropper form control in angular

We are going to build an image cropper and package it as a form control which is ready to be used in any of our forms.

https://codinglatte.com/posts/angular/build-image-cropper-form-control-angular/

[LSzelecsenyi]

Very useful article, thanks for sharing!
I tried to implement it, but I have a problem when selecting an image I have TypeError in console. Do you have any idea what is causing this?
The error:

Error: Uncaught (in promise): TypeError: src.match is not a function
TypeError: src.match is not a function
at croppie.js:190
at new ZoneAwarePromise (zone-evergreen.js:876)
at loadImage (croppie.js:181)
at Croppie.bind (croppie.js:1312)
at Croppie.bind (croppie.js:1594)
at NgxCroppieComponent.bindToCroppie (ngx-croppie.js:48)
at NgxCroppieComponent.set imageUrl [as imageUrl] (ngx-croppie.js:31)
at updateProp (core.js:32188)
at checkAndUpdateDirectiveInline (core.js:31874)
at checkAndUpdateNodeInline (core.js:44366)
at checkAndUpdateNode (core.js:44305)
at debugCheckAndUpdateNode (core.js:45327)
at debugCheckDirectivesFn (core.js:45270)
at Object.eval [as updateDirectives] (ImageCropperFormControlComponent.html:2)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258)
at checkAndUpdateView (core.js:44270)
at callViewAction (core.js:44636)
at execEmbeddedViewsAction (core.js:44593)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44636)
at execComponentViewsAction (core.js:44564)
at checkAndUpdateView (core.js:44277)
at callViewAction (core.js:44636)
at execEmbeddedViewsAction (core.js:44593)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44636)
at execComponentViewsAction (core.js:44564)
at checkAndUpdateView (core.js:44277)
at callViewAction (core.js:44636)
at execEmbeddedViewsAction (core.js:44593)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44636)
at execComponentViewsAction (core.js:44564)
at checkAndUpdateView (core.js:44277)
at callViewAction (core.js:44636)
at execEmbeddedViewsAction (core.js:44593)
at checkAndUpdateView (core.js:44271)
at callWithDebugContext (core.js:45631)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:45193)
at ViewRef.detectChanges (core.js:31125)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39679)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)

[mainawycliffe]

Hey, I am sorry I haven't come across this error before. It's been a long time since I worked with croppie in Angular but I can have a closer look at when I get some free time.

[LSzelecsenyi]

Thanks in advance, that would be great!