Unexpected (but correct) server response

[Volkan]

Hi!

I'm trying to use kendoUpload through a Java servlet. Despite upload phase gets completed without a problem (that is, servlet receives and parses the input, and returns a successful JSON response with a page of type "text/plain") Kendo complains that unexpected server response. The strange thing is returned JSON response from the server looks ok, see below console output:

Server response: {"status":0,"data":[{"id":"4f11af83ccf2c8eb5e42afa8","text":"","type":"IMAGE","image":{"small":{"id":"4f11af83ccf2c8eb5e42afa7","width":100,"height":74},"large":{"id":"4f11af83ccf2c8eb5e42afa6","width":400,"height":296}}}]}

(I can also verify the above returned JSON from Firebug.) What might I be missing? How can I further diagnose the problem? (Using Kendo UI v2011.3.1129 GPL, Firefox 9.0.1) I reproduced the same error with "text/json" and "application/json" data types too.

BTW, I use kendoUpload as follows:

$(divSelect).html("<input id='input-4f11af83ccf2c8eb5e42afa7' type='file'/>");
$("#input-4f11af83ccf2c8eb5e42afa7").kendoUpload({
  async: {
    saveUrl: "/image/add",
    saveField: "image"
  },
  upload: function(ev) { ev.data = {...}; },
  success: function(ev) { ...; }
};

To further detail the problem, I introduced an error handler function to kendoUpload and placed a breakpoint right in the function body. Below is the stack trace at the breakpoint.

1. ev: Object
   1. XMLHttpRequest: XMLHttpRequest
      1. onabort: null
      2. onerror: null
      3. onload: null
      4. onloadstart: null
      5. onprogress: null
      6. onreadystatechange: null
      7. readyState: 4
      8. response: "{"status":0,"data":[{"id":"4f11e39cccf21c6288c10834","text":"","type":"IMAGE","image":{"small":{"id":"4f11e39cccf21c6288c10833","width":72,"height":100},"large":{"id":"4f11e39cccf21c6288c10832","width":400,"height":558}}}]}"
      9. responseText: "{"status":0,"data":[{"id":"4f11e39cccf21c6288c10834","text":"","type":"IMAGE","image":{"small":{"id":"4f11e39cccf21c6288c10833","width":72,"height":100},"large":{"id":"4f11e39cccf21c6288c10832","width":400,"height":558}}}]}"
      10. responseType: ""
      11. responseXML: null
      12. status: 200
      13. statusText: "OK"
      14. upload: XMLHttpRequestUpload
          1. onabort: null
          2. onerror: null
          3. onload: null
          4. onloadstart: null
          5. onprogress: null
          6. __proto__: XMLHttpRequestUpload
      15. withCredentials: false
      16. __proto__: XMLHttpRequest
   2. files: Array[1]
   3. isDefaultPrevented: function (){return f}
   4. operation: "upload"
   5. preventDefault: function (){f=!0}
   6. __proto__: Object
2. this: d.extend.init

In the above output, I dunno what responseType actually corresponds to, but in the Firebug output I can verify that the server response is of type "text/plain".


Best.

[T. Tsonev]

Hi,

Thank you for sharing details about the problem.

I've tried stubbing the response on jsFiddle, but it appears to be processed successfully - http://jsfiddle.net/u5v8B/

Can you try capturing the network traffic using a debug proxy like Fiddler. This might provide more clues.

All the best,
Tsvetomir Tsonev
the Telerik team

[Volkan]

Thanks for your prompt reply, Tsvetomir.

I looked at your example at jsfiddle.net; yeah, what can I say, it works. (BTW, when you replace saveUrl with "http://jsfiddle.net/echo/json", instead of "/echo/json", it doesn't work. I dunno why but I suspect some security related reason.)

The thing is, I still couldn't figure out my servlet problem. Let me put it this way: I setup an nginx server with a sample JSON file and a Kendo upload form in plain HTML. Via Fiddler2, I traced the response from the nginx server to the upload request as follows:

HTTP/1.1 200 OK
Server: nginx/0.7.67
Date: Tue, 17 Jan 2012 18:00:00 GMT
Content-Type: text/plain
Connection: keep-alive
Content-Length: 223
Last-Modified: Tue, 17 Jan 2012 17:58:26 GMT
Accept-Ranges: bytes

{"status":0,"data":[{"id":"4f11af83ccf2c8eb5e42afa8","text":"","type":"IMAGE","image":{"small":{"id":"4f11af83ccf2c8eb5e42afa7","width":100,"height":74},"large":{"id":"4f11af83ccf2c8eb5e42afa6","width":400,"height":296}}}]}

So far so good. Now I redirect the same request to the servlet and trace the response. Output is as follows.

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 223
Server: Jetty(6.1.26)

{"status":0,"data":[{"id":"4f15b75f74d2cece877f7ca1","text":"","type":"IMAGE","image":{"small":{"id":"4f15b75f74d2cece877f7ca0","width":75,"height":100},"large":{"id":"4f15b75f74d2cece877f7c9f","width":400,"height":534}}}]}

But this time Kendo upload fails somehow. I tried with manually adding Accept-Ranges, Last-Modified, Date, and Connection headers, and setting Content-Type to text/plain, but no luck. I'm running out of options. Any clues will really -- but really -- be appreciated.

[T. Tsonev]

Hello,

This problem proves to be elusive.

Your experiment with nginx must mean something. We don't know what, though. Is this the raw response? What are the chances that it's coming gzipp-ed or with an unusual encoding without the corresponding headers?

What happens if you request the URL directly from the console using jQuery:
$.getJSON("/image/add", function() { console.log(arguments); });

This might require modifying the server handler to return some data.

Is the problem specific to Firefox or it affects all browsers? Do you use proxies, plug-ins or anti-virus software?

All the best,
Tsvetomir Tsonev
the Telerik team

[Volkan]

> Is this the raw response?

Yeah, previous ones were the raw responses pasted from the Fiddler inspection.

> What are the chances that it's coming gzipp-ed or with an unusual encoding without the corresponding headers?

Fiddler tells that transform gets performed with no compression.

> What happens if you request the URL directly from the console using jQuery: $.getJSON("/image/add", function() { console.log(arguments); });

I think you meant $.postJSON, since kendoUpload docs state that so. Anyway, since there doesn't exist a $.postJSON, I tried to implement your sample using jQuery form plugin as follows:

Entity.Attachment_showForm = function(point, divId) {
    var inputId = divId + "-input";
    $("#" + divId).html(sprintf(
        "<form id='%s' method='POST' action='/f/attachment/add' enctype='multipart/form-data'>" +
            "<input type='hidden' name='pointId' value='%s' />" +
            "<input name='image' type='file' />" +
            "<input type='submit' />" +
            "</form>",
        inputId, point.getId()));
    $("#" + inputId).ajaxForm({
        success: function() {
            console.log("Arguments: " + arguments);
        }
    });

As expected printing out the arguments was not a good choice -- it just prints out "[Object ...]". Hence, I placed a breakpoint right in the console.log() line, and here is the value of the arguments in the scope variables:

1. arguments: Arguments[4]
   1. 0: "{"status":0,"data":[{"id":"4f16c49fe4b00976fce4e3ef","text":"","type":"IMAGE","image":{"small":{"id":"4f16c49fe4b00976fce4e3ee","width":100,"height":76},"large":{"id":"4f16c49fe4b00976fce4e3ed","width":282,"height":212}}}]}"
   2. 1: "success"
   3. 2: Object
   4. 3: e.fn.e.init[1]
   5. callee: function () {
   6. length: 4
   7. __proto__: Object
2. this: Object

Is the problem specific to Firefox or it affects all browsers?

I can observe the same problem in Google Chrome as well.

Do you use proxies, plug-ins or anti-virus software?

In Firefox, I have Firebug enabled. No other proxies, plug-ins, anti-virus software, etc.

[Volkan]

Here is a test case to reproduce the problem:

• HTML file:

<!DOCTYPE HTML>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link type="text/css" href="/s/kendo/styles/kendo.common.min.css" rel="stylesheet"/>
    <link type="text/css" href="/s/kendo/styles/kendo.default.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="/s/kendo/js/jquery.min.js"></script>
    <script type="text/javascript" src="/s/kendo/js/kendo.all.min.js"></script>
</head>
<body>
<input id="upload" type="file" />
<script type="text/javascript">
$(document).ready(function() {
    $("#upload").kendoUpload({
        async: { saveUrl: "/f/test" }
    });
});
</script>
</body>
</html>

• Java Servlet:

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class TestServlet extends HttpServlet {
    protected void doPost(HttpServletRequest req, HttpServletResponse res)
            throws IOException {
        res.setContentType("application/json");
        res.getOutputStream().println("{'status':0}");
    }
}

[T. Tsonev]

Hi,

The response from the test servlet is not a valid JSON. I was able to get it working by changing the code to:
res.setContentType("text/plain");
res.getOutputStream().print("{\"status\":0}");

Tested with jetty 8.0.4-1
Kind regards,
Tsvetomir Tsonev
the Telerik team

[Volkan]

Thanks Tsvetomir, that definitely points out that the problem is on my side.
I'll study the issue in much more depth.
Thanks so much again for your kind help.