Unexpected (but correct) server response

8 posts, 1 answers
  1. Volkan
    Volkan avatar
    5 posts
    Member since:
    Jan 2012

    Posted 14 Jan 2012 Link to this post

    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.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2831 posts

    Posted 16 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Volkan
    Volkan avatar
    5 posts
    Member since:
    Jan 2012

    Posted 17 Jan 2012 Link to this post

    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.

  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2831 posts

    Posted 18 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Volkan
    Volkan avatar
    5 posts
    Member since:
    Jan 2012

    Posted 18 Jan 2012 Link to this post

    > 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.
  6. Volkan
    Volkan avatar
    5 posts
    Member since:
    Jan 2012

    Posted 18 Jan 2012 Link to this post

    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}");
        }
    }

  7. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2831 posts

    Posted 20 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Volkan
    Volkan avatar
    5 posts
    Member since:
    Jan 2012

    Posted 21 Jan 2012 Link to this post

    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.

Back to Top