The OOB Rich Text control (CKEditor inside the UI Toolkit) has no upload plugin enabled - its image dialog only takes a URL, because the coach has no server end point for the upload. Three options, from simplest to most complete:
1. Paste / drag as data URL - enable the CKEditor image2 / uploadimage feature but let it produce an inline data:image/png;base64,... instead of a server upload. The picture then lives inside the rich text value (fine for small images, the variable grows with the picture):
// "load" event of the Rich Text control's parent coach view
var ed = CKEDITOR.instances[ me.context.element.querySelector("textarea").id ];
ed.on("fileUploadRequest", function (evt) {
var file = evt.data.fileLoader.file, reader = new FileReader();
reader.onload = function () { evt.data.fileLoader.responseData = { url: reader.result }; evt.data.fileLoader.fire("uploaded"); };
reader.readAsDataURL(file); evt.stop();
});2. Upload to the document store, insert the URL - put a UI Toolkit File Uploader (BPM document store or ECM) next to the editor; after the upload the control gives you the document id, build the download URL and insert it into the editor:
// after the File Uploader "on upload" event: docId of the new document
var url = "/rest/bpm/wle/v1/document/" + docId + "/content?snapshotId=" + tw.system.model.processApp.currentSnapshot.id; // or the ECM /content URL
CKEDITOR.instances[editorId].insertHtml('<img src="' + url + '" />');3. Custom coach view with a full editor (CKEditor 5 or TinyMCE as a managed web asset) whose upload adapter posts to your own service - the cleanest result but you own the editor.
Note for e-mails: an inline data URL image renders in most mail clients, a link to the BAW document store only works for logged-in users.
References