Easyimage don't trigger change after upload success when using angular reactive forms

[thalisvilela]

When using easyimage with Reactive forms, it does not trigger the change on the form control, passing invalid data to the backend. Only the placeholder image element tiggers the change, the one having the placeholder blob address:

<figure class="easyimage easyimage-full"><img alt="" src="blob:http://localhost:4200/ca2c741f-ea9d-4d67-8cbb-379d050f6ddd" width="3840" />
<figcaption></figcaption>

When the image upload response arrive, the change to the src parameter to the final image url dont't trigger change, so, if you hit save in your app, the blob value gets sent to whatever backend functionality.

If after the image upload we make any change, then the correct src value with the correct image url gets passed.

[jacekbogdanski]

From what I see, the easyimage (or rather upload loader) is not firing the change event upon finishing the upload process: https://github.com/ckeditor/ckeditor4/blob/a41004afe2479972c7775d42d5d359a2d085dbf1/plugins/easyimage/plugin.js#L341-L352 My assumption is that Reactive Forms are integrated with the ControlValueAccessor interface that is implemented by CKEditor 4 React component and is based on onChange event: https://github.com/ckeditor/ckeditor4-angular/blob/master/src/ckeditor/ckeditor.component.ts#L290

That's the reason why you see the properly updated src value of the image when you make some editor changes - the change event is fired and forms are notified about new editor content.

Therefore, the proper fix for this issue should be made in the editor itself, but I'm leaving that issue open here since we will need to write some test coverage for that anyway.

[jacekbogdanski]

Related issue in CKEditor 4 repo: https://github.com/ckeditor/ckeditor4/issues/4856

[thalisvilela]

For anyone having this issue, i got around it by firing a 'change' event from the editor instance, inside a setTimeout. The delay amount appears to be irrelevant, but i set it to 100ms just in case.

ckEditorConfig: any = { 
      // ... other configurations are here, including the easyimage configurations
       on:{
            fileUploadResponse:($event)=>{
                setTimeout(()=>{
                    $event.editor.fire('change')
                },100)
            }
        }
    }

And in the html: <ckeditor [config]="ckEditorConfig"></ckeditor>