Custom plugin upload image in CkEditor 4 Angular

[Hunganh3012]

I'm creating a plugin called cmsSelect to upload images from my computer.

var _editor; CKEDITOR.plugins.add('cmsselect', { icons: 'cmsselect', init: function (editor) { _editor = editor; // editor.addCommand('cmsselect', new CKEDITOR.dialogCommand('cmsselectDialog')); editor.ui.addButton('cmsselect', { label: 'Upload Image', command: 'cmsselectDialog', toolbar: 'insert', icon: this.path + 'images/cmsselect.png', }); CKEDITOR.dialog.add('cmsselectDialog', this.path + 'dialogs/cmsselect.js'); editor.addCommand('cmsselectDialog', { exec: function (sender) { _editor = sender; // hiddenUploadElement is not attached to DOM, but it is still possible tovirtually` click into it.
var hiddenUploadElement = CKEDITOR.dom.element.createFromHtml('');
hiddenUploadElement.once('change', function (evt) {
var targetElement = evt.data.getTarget();
if (targetElement.$.files.length) {
// Simulate paste event, to support all nice stuff from imagebase (e.g. loaders) (#1730).
editor.fire('paste', {
method: 'paste',
dataValue: '',
dataTransfer: new CKEDITOR.plugins.clipboard.dataTransfer({ files: targetElement.$.files }),
});
cmsselectactionChange(targetElement.$.files);
}
});
hiddenUploadElement.$.click();
},
});
},
});

function cmsselectactionChange(files) {
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('files', files[i]);
}
let userToken = JSON.parse(localStorage.getItem('client_jwt'));
fetch(window['env'].apiServer + '/api/v1/Media/Files/UploadFiles?moduleName=ckeditorFolder&functionName=ckeditorFolder', {
method: 'POST',
headers: {
Accept: 'application/json, text/plain, /',
Authorization: 'Bearer ' + userToken.access_token,
},
body: formData,
})
.then(response => response.json())
.then(data => {
if (data) {
var result = data.result;
for (var i = 0; i < result.length; i++) {
var imgHtml = CKEDITOR.dom.element.createFromHtml(<img src="${window['env'].mediaServer + '/' + result[i].path}" />);
_editor.insertElement(imgHtml);
}
} else {
alert(data.message);
}
})
.catch(error => {
console.error('Error:', error);
});
}
`
My problem is that ckeditor is not image aware to display the image attribute. But when I copy that image and paste it again, it displays again. I need help @karandatwani92

but if I copy the image and paste it again, it's correct:

[vinhv]

hiddenimag.on not .once nhes