Implemented handling of image upload on not saved record

Author: Florian Kroenert

src/web/Xrm.Oss.HtmlTemplating/HTMLWYSIWYGEDITOR/ControlManifest.Input.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="oss" constructor="HTMLWYSIWYGEDITOR" version="0.0.57" display-name-key="HTMLWYSIWYGEDITOR" description-key="HTMLWYSIWYGEDITOR description" control-type="virtual" >
+  <control namespace="oss" constructor="HTMLWYSIWYGEDITOR" version="0.0.59" display-name-key="HTMLWYSIWYGEDITOR" description-key="HTMLWYSIWYGEDITOR description" control-type="virtual" >
     <!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.
     If it is not using any external service, please set the enabled="false" and DO NOT add any domain below. The "enabled" will be false by default.
     Example1:

src/web/Xrm.Oss.HtmlTemplating/components/App.tsx

@@ -36,7 +36,7 @@ export interface FormContext {
 
 export interface FunctionContext {
   editorRef: EditorRef,
-  formContext: FormContext,
+  getFormContext: () => FormContext,
   webApiClient: typeof WebApiClient
 }
 
@@ -86,10 +86,10 @@ export const App: React.FC<AppProps> = React.memo((props) => {
   const [designContext, dispatchDesign] = React.useReducer(designStateReducer, { design: { json: "", html: "" }, isLocked: false } as DesignState);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
 
-  const formContext: FormContext = {
+  const getFormContext: () => FormContext = () => ({
     entityId: (props.pcfContext.mode as any).contextInfo.entityId,
     entity: (props.pcfContext.mode as any).contextInfo.entityTypeName
-  };
+  });
 
   // Init once initially and every time fullscreen activates / deactivates
   React.useEffect(() => { init(); }, [ isFullScreen ]);
@@ -169,7 +169,7 @@ export const App: React.FC<AppProps> = React.memo((props) => {
 
       const functionContext: FunctionContext = {
         editorRef: editorRef.current!,
-        formContext: formContext,
+        getFormContext: getFormContext,
         webApiClient: WebApiClient
       };
 
@@ -230,7 +230,7 @@ export const App: React.FC<AppProps> = React.memo((props) => {
       try {
         const funcRef = getExternalScript(props.pcfContext.parameters.customScriptInitFunc.raw);
 
-        const funcResult = await funcRef({ editorProps: properties, formContext: formContext, webApiClient: WebApiClient });
+        const funcResult = await funcRef({ editorProps: properties, getFormContext: getFormContext, webApiClient: WebApiClient });
 
         if (funcResult && funcResult.editorProps) {
           propertiesToSet = funcResult.editorProps;

src/web/Xrm.Oss.HtmlTemplating/domain/FileUploader.ts

@@ -4,7 +4,7 @@ import { FormContext, FunctionContext, ImageUploadSettings } from "../components
 
 
 // https://learn.microsoft.com/en-us/power-apps/developer/data-platform/file-column-data?tabs=webapi#upload-files
-export const registerFileUploader = ({uploadEntity, uploadEntityFileNameField, uploadEntityBodyField, parentLookupName}: ImageUploadSettings, { editorRef, formContext, webApiClient }: FunctionContext) => {
+export const registerFileUploader = ({uploadEntity, uploadEntityFileNameField, uploadEntityBodyField, parentLookupName}: ImageUploadSettings, { editorRef, getFormContext, webApiClient }: FunctionContext) => {
     editorRef.registerCallback('image', async function (file, done) {
         var img = file.attachments[0];
 
@@ -15,8 +15,16 @@ export const registerFileUploader = ({uploadEntity, uploadEntityFileNameField, u
             }
         };
 
-        if (parentLookupName && formContext?.entity && formContext?.entityId) {
-            (fileRequest as any).entity[`${parentLookupName}@odata.bind`] = `${webApiClient.GetSetName(formContext.entity)}(${formContext.entityId})`;
+        const formContext = getFormContext();
+
+        if (parentLookupName) {
+            if (formContext?.entity && formContext?.entityId) {
+                (fileRequest as any).entity[`${parentLookupName}@odata.bind`] = `${webApiClient.GetSetName(formContext.entity)}(${formContext.entityId})`;
+            }
+            else {
+                (window as any).Xrm.Navigation.openAlertDialog("Your record is not yet created. Please save to be able to upload images");
+                throw new Error("Image upload not possible, record has to be saved first");
+            }
         }
 
         try {