JsonReaderException when in-cell editing an image

[Responsive Edge]

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]

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  

        } 

    } 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151005/ze/BlazorApp11056023548  

 

Note: We have prepared a WebAssembly (Clientside Blazor) sample.  

 

Refer the below UG documentation for your reference 

 

https://ej2.syncfusion.com/blazor/documentation/grid/events/#onactionbegin  

 

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]

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]

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.