Image Manager - JSON parse error when uploading images and Image Manager has EnableAsyncUpload set to True

[Gabriela]

Hello,

I'm experiencing an issue and I hope you can help me with this. I saw a similar thread but it's from 2017 and it doesn't answer all of my concers,  so that´s why I open a new one. But if you prefer, I can continue in the other one.

Anyway, we are using RadEditor with ImageManager.

When users of our application are trying to upload an image, the upload seems to be going on forever (there is a yellow dot by the image's name) and when I peek at the Chrome's Dev Tool console (Chrome is updated) , an "Unexpected token < in JSON at position 453" error is logged.

I attached an image showing this error message. 

But when I changed "EnableAsyncUpload" property to false, it uploads correctly and saves the image in the specified location without any problem.

I can leave it like this but it bugs me a lot not to know why the error appears.

Is it really ok leaving EnableAsyncUpload in False? Is there a way to fix the JSON issue?

 

Thank you!

PS: just in case, snippets of how it's declared the editor in the ascx file and how it's configured in the code behind

<div id="HtmlBodyCell" style="<%= HtmlBodyCellStyle %>">
 <Telerik:RadEditor ID="HtmlBodyTextArea" runat="server" Width="475px" Height="400px" />
</div>

 

string[] imgPath = { vpath };

HtmlBodyTextArea.EnableFilter(Telerik.Web.UI.EditorFilters.MakeUrlsAbsolute);
HtmlBodyTextArea.ImageManager.UploadPaths = imgPath;
HtmlBodyTextArea.ImageManager.ViewPaths = imgPath;
HtmlBodyTextArea.ImageManager.MaxUploadFileSize = 200000;
HtmlBodyTextArea.ImageManager.EnableAsyncUpload = true;
HtmlBodyTextArea.ImageManager.RenderMode = RenderMode.Lightweight;

 

[Gabriela]

Update: in case you need it, this is one of the pics I wanted to upload. But it happened to me with any pic (png or jpg) and they are all rather small.

[Gabriela]

Last update: I got to see something but I don't know how it can be fixed when using EnableAsyncUpload=true.

There's a point where Telerik tries to parse a JSON string but it has more information that what it expects, it's information added by the application that I can't change, so that's where the "unexpected token" message comes from. I'm attaching a file where you can see this in the browser's debugger.

Another thing is that the "unexpected token" error message is thrown in Chrome, but in Firefox the message is different: "JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 454 of the JSON data"

Thanks!

 

 

[Rumen]

Hello,

What is the status code of the HTTP request? If it is 50x or 40x it is likely that the response body does not contain the JSON literal RadAsyncUpload expects, but an error message, a redirect or other content (like a login page or an error page).

If the issue is with a redirect, the most likely solution would be to add a <location> element that allows access to the Telerik.Web.UI.WebResource handler to everyone. You can find an example here. If this is not the case, can you send me FiddlerCap of the network traffic so I can see what is in the response?

Another recommendation is to test the scenario with the latest version of Telerik.Web.UI.dll (2019.1.215) and see whether the problem still persists.

Best regards,
Rumen
Progress Telerik

[Gabriela]

Hi Rumen,

From what I see, all response is 200. I'm attaching a pic of the network activity since the beginning of the upload through the Image manager control until the "hang" occurs.

I think the problem is what it's portrayed in the pic that I attached earlier in this thread, called "Error while uploading images3.png".

Telerik sends a request and does receive a response, but what it receives is not only the JSON of the picture being uploaded (that's what it only expects I assume) but other bunch of information that it's added by the application. It's highlighted in yellow in that picture. 

In the global.asax, when the request ends, the app adds additional data, beginning with "<!--", which causes the parseJSON fail. I would delete that but it's not in my hands to decide that...

Regards,

Gaby

 

 

[Rumen]

Hi Gaby,

The highlighted in yellow message in the screenshot shows the browser user agent.

Our further recommendations are:
1) Upgrade to the latest R1 2019 SP1 version (2019.1.215).
2) If this does not solve the issue add the Mandatory Additions to the web.config.
3) Increase the JSON length -> Configure the Maximum Allowed JSON Length for the Whole Application

<configuration>
    <system.web>
        <httpRuntime maxRequestLength="2147483640"/>
    </system.web>
    <system.web.extensions>
        <scripting>
            <webServices>
                <jsonSerialization maxJsonLength="2147483640"/>
            </webServices>
        </scripting>
    </system.web.extensions>
</configuration>

If nothing of the above helps, please provide a simple runnable reproduction project so that we can reproduce the issue and debug it.

Best regards,
Rumen
Progress Telerik

[Gabriela]

Hello Rumen,

Thank you for your reply! And sorry for my delay in answering back.

What we did was to add a condition to the generation of the additional entry, like  the Request.FilePath should not contain "Telerik.Web.UI.WebResource.axd". 

This is very specific to the application, I know, but maybe it could help anyone going through something similar.

Once again, thank you for the follow up!

Gaby

 

 

 

[Rumen]

Hi Gaby,

You are welcome!

Thank you very much for sharing the solution with the community! I am happy to see that the problem is resolved. 

Best regards,
Rumen
Progress Telerik