We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

JsonReaderException when in-cell editing an image

Thread ID:

Created:

Updated:

Platform:

Replies:

151005 Jan 28,2020 03:28 AM UTC Jan 29,2020 06:56 AM UTC Blazor 3
loading
Tags: Grid
Responsive Edge
Asked On January 28, 2020 03:28 AM UTC

I am trying to have a grid column show an image and, when double-clicking, use in-cell editing to allow removing of the image. It works fine if there is no image already uploaded but crashes on editing when an image has been 

                <GridColumn Field=@nameof(SiteDto.Image) Width="180">
                    <Template>
                        @{
                            var site = (SiteDto)context;
                            if (site.Image?.Length > 0)
                            {
                                <div class="drawer-logo">
                                    <img src="@site.GetImageSrc()" />
                                </div>
                            }
                        }
                    </Template>
                    <EditTemplate>
                        @{
                            var site = (SiteDto)context;
                            if (site.Image?.Length > 0)
                            {
                                <!-- ### NOTHING WORKS IN THIS CODE BLOCK DUE TO CRASH ### -->
                                <div class="drawer-logo">
                                    <img src="@site.GetImageSrc()" />
                                </div>
                                <EjsButton IconCss="delete" OnClick="@(args => RemoveImage(site))" CssClass="float-right">Remove</EjsButton>
                            }
                            else
                            {
                                <EjsUploader ID="uploadFiles" AllowedExtensions=".jpg,.png,.jpeg" Multiple="false">
                                    <UploaderAsyncSettings SaveUrl="api/site/SaveImage" />
                                    <UploaderEvents FileSelected="@(args => UploadFileSelected(args, site))" />
                                </EjsUploader>
                            }
                        }
                    </EditTemplate>
                </GridColumn>

Stack Trace:

  1. WASM: Unhandled exception rendering component:
  2. WASM: Newtonsoft.Json.JsonReaderException: Error parsing comment. Expected: *, got 9. Path '', line 1, position 1.
  3. WASM: at Newtonsoft.Json.JsonTextReader.ParseComment (System.Boolean setToken) <0x54e02c8 + 0x0009a> in <2073514815234917a5e8f91b0b239405>:0
  4. WASM: at Newtonsoft.Json.JsonTextReader.ReadAsBytes () <0x42b90b0 + 0x0024c> in <2073514815234917a5e8f91b0b239405>:0
  5. WASM: at Newtonsoft.Json.JsonReader.ReadForType (Newtonsoft.Json.Serialization.JsonContract contract, System.Boolean hasConverter) <0x3f18a60 + 0x00134> in <2073514815234917a5e8f91b0b239405>:0
  6. WASM: at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize (Newtonsoft.Json.JsonReader reader, System.Type objectType, System.Boolean checkAdditionalContent) <0x3d67400 + 0x001ac> in <2073514815234917a5e8f91b0b239405>:0
  7. WASM: at Newtonsoft.Json.JsonSerializer.DeserializeInternal (Newtonsoft.Json.JsonReader reader, System.Type objectType) <0x3d63d80 + 0x000a4> in <2073514815234917a5e8f91b0b239405>:0
  8. WASM: at Newtonsoft.Json.JsonSerializer.Deserialize (Newtonsoft.Json.JsonReader reader, System.Type objectType) <0x3d636b0 + 0x0000e> in <2073514815234917a5e8f91b0b239405>:0
  9. WASM: at Newtonsoft.Json.JsonConvert.DeserializeObject (System.String value, System.Type type, Newtonsoft.Json.JsonSerializerSettings settings) <0x3d397f8 + 0x00066> in <2073514815234917a5e8f91b0b239405>:0
  10. WASM: at Syncfusion.EJ2.Blazor.BaseComponent.ChangeType (System.Object value, System.Type conversionType, System.Boolean isClientChange) <0x6a552b0 + 0x00484> in <ee00940cee7542adb6b389ec86003d4f>:0
  11. WASM: at Syncfusion.EJ2.Blazor.BaseComponent.GetObject (System.Collections.Generic.Dictionary`2[TKey,TValue] Data, System.Type ModelType) <0x6621340 + 0x00288> in <ee00940cee7542adb6b389ec86003d4f>:0
  12. WASM: at Syncfusion.EJ2.Blazor.Grids.GridColumn.BuildRenderTree (Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder) <0x4f18690 + 0x005e4> in <ee00940cee7542adb6b389ec86003d4f>:0
  13. WASM: at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0 (Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder builder) <0x37fc908 + 0x0001a> in <5f68772aa89b467fb3621e07562c53ea>:0
  14. WASM: at (wrapper delegate-invoke) <Module>.invoke_void_RenderTreeBuilder(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder)
  15. WASM: at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch (Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Components.RenderFragment renderFragment) <0x37fc208 + 0x00058> in <5f68772aa89b467fb3621e07562c53ea>:0
  16. WASM: at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch (Microsoft.AspNetCore.Components.Rendering.RenderQueueEntry renderQueueEntry) <0x37fbc88 + 0x0004c> in <5f68772aa89b467fb3621e07562c53ea>:0
  17. WASM: at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x37f92f8 + 0x00092> in <5f68772aa89b467fb3621e07562c53ea>:0

Vignesh Natarajan [Syncfusion]
Replied On January 28, 2020 10:36 AM UTC

Hi Customer,  
 
Greetings from Syncfusion support. 
 
Query: “t works fine if there is no image already uploaded but crashes on editing when an image has been  
 
To replicate the reported issue at our end, we have prepared a sample using your code example in our latest version Nuget package (17.4.0.44). We are able to render the image along with button inside our EditTemplate. Kindly refer the below screenshot and sample for your reference 
 
 
 
 
Also you can save the uploaded file in Grid data using OnActionBegin event of Grid once the file is uploaded. (i.e.) We can store the uploaded file name in variable in FileUploaded event and in OnActionBegin event you can save that to grid datasource. Refer the below code  example.  
 
<EjsGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    <GridEvents OnActionBegin="BeginHandler" TValue="Order"></GridEvents> 
. .. . . . . . . 
</EjsGrid> 
  public void BeginHandler(ActionEventArgs<Order> Args) 
    { 
        if(Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save) 
        { 
            // save the file in below aarguments 
            Args.Data  
        } 
    } 
 
 
 
Note: We have prepared a WebAssembly (Clientside Blazor) sample.  
 
Refer the below UG documentation for your reference 
 
 
We have analyzed your issue’s stack trace and it might occur while serializing the model objects while editing a record. So kindly share the following details which will be helpful for us to validate the reported issue at our end.  
 
  1. Share your Model class to check Image property type and GetImageSrc method.
  2. Share your datasource type.
  3. Ensure that you have referred latest version Nuget package and its corresponding script files.
  4. If possible try to reproduce the reported issue in provided sample.  
 
Regards, 
Vignesh Natarajan. 


Responsive Edge
Replied On January 29, 2020 04:07 AM UTC

I found the issue. The image was being stored on the model as a byte[] causing that exception. When I converted it to use a base64 string it works. Thanks.

Vignesh Natarajan [Syncfusion]
Replied On January 29, 2020 06:56 AM UTC

Hi Customer,  
 
Thanks for the update.  
 
We are glad to hear that you are able to resolve your query.  
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon