Home
Search

Start | Blogs | Umbraco | RTE img upload error

2023-03-11

Umbraco

How to solve img upload error in the editor in Umbraco

When adding images to the rich text/tiny mce editor I received the javascript error message: "TypeError: imgElm is null insertMediaInEditor umbraco.services.min.js:1 Angular 3 r completeTask d Possibly unhandled rejection: {} angular.js:15697:15 Angular 8 e get g $digest $apply r completeTask". The problem was that I had not added the img element to the appsettings.json file which states that image uploads are allowed in the editor.

Here is the line of code I added that adds it: 

img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id]

So my Umbraco config section of the appsettings.json file went from this:

    "Umbraco": {
      "CMS": {
        "ModelsBuilder": {
          "ModelsMode": "Nothing"
        },
        "Hosting": {
          "Debug": false
        },
        "Content": {
          "ContentVersionCleanupPolicy": {
            "EnableCleanup": true
          }
        },
        "Global": {
          "Id": "d10df5a0-1472-43d7-b4fc-3505a2143be5"
        },
        "RichTextEditor": {
          "ValidElements": "-pre[class|align|style],+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],-strike[class|style],-u[class|style],#p[id|style|dir|class|align]",
          "CustomConfig": {
            "style_formats": "[{\"title\":\"Custom...\",\"items\":[ {\"title\":\"Code\",\"block\":\"pre\"}]},{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading 2\",\"block\":\"h2\"}, {\"title\":\"Heading 3\",\"block\":\"h3\"}, {\"title\":\"Heading 4\",\"block\":\"h4\"}, {\"title\":\"Heading 5\",\"block\":\"h5\"} ]}]"
          }
        }
      }
    }

to this:

"Umbraco": {
      "CMS": {
        "ModelsBuilder": {
          "ModelsMode": "Nothing"
        },
        "Hosting": {
          "Debug": false
        },
        "Content": {
          "ContentVersionCleanupPolicy": {
            "EnableCleanup": true
          }
        },
        "Global": {
          "Id": "d10df5a0-1472-43d7-b4fc-3505a2143be5"
        },
        "RichTextEditor": {
          "ValidElements": "-pre[class|align|style],+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],-strike[class|style],-u[class|style],#p[id|style|dir|class|align],img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id]",
          "CustomConfig": {
            "style_formats": "[{\"title\":\"Custom...\",\"items\":[ {\"title\":\"Code\",\"block\":\"pre\"}]},{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading 2\",\"block\":\"h2\"}, {\"title\":\"Heading 3\",\"block\":\"h3\"}, {\"title\":\"Heading 4\",\"block\":\"h4\"}, {\"title\":\"Heading 5\",\"block\":\"h5\"} ]}]"
          }
        }
      }
    }