Error when trying to add an image to transactional email body

Hi,

I am trying to build transactional email content.

  1. Added a new row, then
  2. Insert > Image > selected an image from Media
  3. The body preview still shows '“Choose image” button and the selected image does not appear inserted.
  4. Clicked save button at the bottom and still the same.
  5. Clicked Preview tab, and got the error:

 # An unhandled exception occurred while processing the request.
 
 JsonReaderException: Error parsing comment. Expected: \*, got m. Path '', line 1, position 1.
 
 Newtonsoft.Json.JsonTextReader.ParseComment(bool setToken)
 
 * Stack
 
 * Query
 
 * Cookies
 
 * Headers
 
 * Routing
 
 
 * ## JsonReaderException: Error parsing comment. Expected: \*, got m. Path '', line 1, position 1.
 
   * ### Newtonsoft.Json.JsonTextReader.ParseComment(bool setToken)
 
   * ### Newtonsoft.Json.JsonTextReader.ParseValue()
 
   * ### Newtonsoft.Json.JsonReader.ReadForType(JsonContract contract, bool hasConverter)
 
   * ### Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, bool checkAdditionalContent)
 
   * ### Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType)
 
   * ### Newtonsoft.Json.JsonConvert.DeserializeObject(string value, Type type, JsonSerializerSettings settings)
 
   * ### Newtonsoft.Json.JsonConvert.DeserializeObject<T(string value, JsonSerializerSettings settings)
 
   * ### NewsletterStudio.Web.Infrastructure.UmbracoCommonFacade.GetImage(string mediaIdOrUdi)
 
   * ### NewsletterStudio.Core.Editor.Controls.Image.ImageEmailControlType.DoBuildViewModel(ImageEmailControlData control, EmailControlRenderingData renderingData)
 
   * ### NewsletterStudio.Core.Editor.Controls.EmailControlTypeBase<TControlDataModel, TBlockViewModel.BuildViewModel(IEmailControl model, EmailControlRenderingData renderingData)
 
   * ### NewsletterStudio.Core.Rendering.EmailRenderer.MapToViewModel(EmailContent em)
 
   * ### NewsletterStudio.Core.Rendering.EmailRenderer.SetModel(Email email, RenderingMode mode)
 
   * ### NewsletterStudio.Core.Frontend.Rendering.RenderEmailControllerActions.RenderTransactional(Guid key)
 
   * ### lambda_method2052(Closure , object , object\[\] )
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ActionMethodExecutor+SyncActionResultExecutor.Execute(ActionContext actionContext, IActionResultTypeMapper mapper, ObjectMethodExecutor executor, object controller, object\[\] arguments)
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeActionMethodAsync()
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeNextActionFilterAsync()
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Rethrow(ActionExecutedContextSealed context)
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeInnerFilterAsync()
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilterg__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsyncg__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
 
   * ### Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsyncg__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
 
   * ### Umbraco.Cms.Web.Common.Middleware.BasicAuthenticationMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
 
   * ### Microsoft.AspNetCore.Builder.UseMiddlewareExtensions+InterfaceMiddlewareBinder+<c__DisplayClass2_0+<<CreateMiddlewareb__0d.MoveNext()
 
   * ### Umbraco.Cms.Web.BackOffice.Middleware.BackOfficeExternalLoginProviderErrorMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
 
   * ### Microsoft.AspNetCore.Builder.UseMiddlewareExtensions+InterfaceMiddlewareBinder+<c__DisplayClass2_0+<<CreateMiddlewareb__0d.MoveNext()
 
   * ### Swashbuckle.AspNetCore.SwaggerUI.SwaggerUIMiddleware.Invoke(HttpContext httpContext)
 
   * ### Swashbuckle.AspNetCore.Swagger.SwaggerMiddleware.Invoke(HttpContext httpContext, ISwaggerProvider swaggerProvider)
 
   * ### Microsoft.AspNetCore.Session.SessionMiddleware.Invoke(HttpContext context)
 
   * ### Microsoft.AspNetCore.Session.SessionMiddleware.Invoke(HttpContext context)
 
   * ### Microsoft.AspNetCore.Localization.RequestLocalizationMiddleware.Invoke(HttpContext context)
 
   * ### Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
 
   * ### Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
 
   * ### StackExchange.Profiling.MiniProfilerMiddleware.Invoke(HttpContext context) in **`MiniProfilerMiddleware.cs`**
 
   * ### Umbraco.Cms.Web.Common.Middleware.UmbracoRequestMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
 
   * ### Umbraco.Cms.Web.Common.Middleware.UmbracoRequestMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
 
   * ### Microsoft.AspNetCore.Builder.UseMiddlewareExtensions+InterfaceMiddlewareBinder+<c__DisplayClass2_0+<<CreateMiddlewareb__0d.MoveNext()
 
   * ### Umbraco.Cms.Web.Common.Middleware.PreviewAuthenticationMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
 
   * ### Microsoft.AspNetCore.Builder.UseMiddlewareExtensions+InterfaceMiddlewareBinder+<c__DisplayClass2_0+<<CreateMiddlewareb__0d.MoveNext()
 
   * ### Umbraco.Cms.Web.Common.Middleware.UmbracoRequestLoggingMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
 
   * ### Microsoft.AspNetCore.Builder.UseMiddlewareExtensions+InterfaceMiddlewareBinder+<c__DisplayClass2_0+<<CreateMiddlewareb__0d.MoveNext()
 
   * ### SixLabors.ImageSharp.Web.Middleware.ImageSharpMiddleware.Invoke(HttpContext httpContext, bool retry)
 
   * ### RobotsHeaderMiddleware.InvokeAsync(HttpContext context) in **`RobotsHeaderMiddleware.cs`**
 
     +
 
     21.         **await \_next(context);**
 
   * ### SixLabors.ImageSharp.Web.Middleware.ImageSharpMiddleware.Invoke(HttpContext httpContext, bool retry)
 
   * ### WebPMiddleware.Invoke(HttpContext httpContext) in **`WebPMiddleware.cs`**
 
     +
 
     33.         **await \_next(httpContext);**
 
   * ### Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)

Any idea how to insert a media item in the email body?

ns-image-issue

Btw, the same issue happens when adding an image to a campaign email.

Hi @ewuski !

It’s not clear from the screenshot or the post what exact version of Umbraco and Newsletter Studio your are running?

Based on the error message, it looks like there is something unexpected happening when the data for the chosen media is parsed.

Do you know the media type of the selected image? Is this a standard “Image” from the out-of-the-box configuration of Umbraco or do you know if this has been customized in any way in your website?

// Markus

Ah sorry :slight_smile:

Umbraco version 13.2.1

NS version 13.0.14 - upgraded recently from a lower 13.0 version in the hope that it’ll fix the issue, but it didn’t

It’s a standard Umbraco Image type. nothing added.

The same issue is occurring on both localhost and production.

Hi!

That is indeed strange, I just tried this on a fresh install of Umbraco 13.2.1 and Newsletter Studio 13.0.14 and this is what i got:

ns-image-add

So, we need to understand in what way your environment is different.

Can you please double check about the file type.

Check the “Media Type” of the media item that you are picking:

  • Go to media section
  • Find media item and open it
  • Click on the “Info” tab and notice the “Media Type”:

Check the configuration of this Media Type. Look close at the “umbracoFile” property and let me know the data type used. In this case (and by defualt) it’s a “Image Cropper”.

Please check if your configuration is similar to this one, if not:

  • Share the Data Type used on your Media Type
  • Share the property editor used on that Data Type

If you can include screenshots that would be very helpful.

Cheers!

// Markus

See the screenshots.

When trying to add the image, I’m getting a 500 error in

/umbraco/backoffice/NewsletterStudio/EmailEditor/GetImageControlData

This is the payload sent to GetImageControlData:

{
    "controlTypeAlias": "image",
    "padding": {
        "top": 10,
        "right": 10,
        "bottom": 10,
        "left": 10
    },
    "imageUdi": "umb://media/9da981df67e04b1cacac8dfacd56f5fc",
    "align": "center",
    "link": null,
    "imageSize": 0,
    "imageHeight": 0,
    "aspectRatio": "original",
    "rowAndColumnInfo": {
        "columns": 4,
        "stackOnSmallScreen": true
    },
    "meta": {
        "sizeWasMax": false,
        "imageMax": 580,
        "imageUrl": "",
        "width": "0"
    },
    "icon": "icon-picture",
    "iconSvg": ""
}

Hi!

Thank you!

I notice that the Image Media Type is using a “Upload” field and not a “Image Cropper” which has been the default for quite some time.

Did this error happen after an upgrade or something similar?

It would be great if you could provide the exact versions of Umbraco and Newsletter Studio that you’re using so that I can try to see if I can reproduce and fix the problem

Thank you!

Hi Markus,

I sent you the versions above here Error when trying to add an image to transactional email body - #4 by ewuski

Our site was first built in version 7 and successfully upgraded.

I think we first installed NS when on version 9 or 10 of Umbraco and then upgraded to version 13 of Umbraco and NS with it.

I can’t see any case where we used image insertion in the email body so I am unable to tell you whether it worked in version 10 or not.

We certainly never changed the definition of Image type so it probably preserved the old Upload field as this is what I recall was there always.

Thank you!

Sorry for the confusion, I’ll try to reproduce the issue and provide a fix asasp.

// Markus

@ewuski I have a couple of follow up questions

Can you drill into the data type configuration for “Upload” and let me know the configuration?

I’m assuming this is using the Property Editor “File Upload (Umbraco.UploadField)”. Can you confirm that?

I noticed that you Image Media Type have fields for “width” and “height”, can you check if you media items populate values for these properties when a image is uploaded?

Hi again!

Just wanted to provide an update on this issue.

I managed to reproduce the problem, the fact that your website has been upgraded (probably from a v4/v6/v17 version of Umbraco) mean that your images uses the “File Upload” data type and not the “Image Cropper” (which has been standard for new websites for many years).

We did not support this old way of storing images but this has been fixed in Newsletter Studio 13.0.16.

This should be a simple upgrade without any breaking changes from your current version.

Please give this a try and let me know how it works.

All the best!

/ Markus

Fantastic! Thanks very much for providing the fix so quickly. I can confirm it works, and we are now able to add images to the email body. Thanks once again :folded_hands:

Will it also be working in Umbraco 14+ versions?

Hi!

Great! Thanks for letting me know!

Yes, the same fix was applied in v14.0.6 :slight_smile:

And in v15, v16 and so on :slight_smile:

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.