Parsing a JSON response after a file upload with jquery

Question

I have written a small script using jquery to upload a file to a server. The file is uploaded successfully and the done: event is called with no problems, but I am having issues to process the answer. This is my script:

    <input id="fileupload" type="file" name="carPicture" accept="image/*" multiple>
    <div id="progress">
        <div class="bar" style="width: 0%;"></div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/vendor/jquery.ui.widget.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/jquery.iframe-transport.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/jquery.fileupload.js")" type="text/javascript"></script>
    <script>
        $(function () {
            'use strict';
            // Change this to the location of your server-side upload handler:
            var url = "uploadCarPicture";
            $('#fileupload').fileupload({
                url: url,
                dataType: 'json',
                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        $('<p/>').text(file.name).appendTo('#files');
                    });
                },
                fail: function (e, data) {
                    alert("File exists");
                    },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .bar').css(
                            'width',
                            progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');
        });
    </script>

I am having two problems:

the variable data seems to be empty since the loop below doesn't run even once.

        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo('#files');
        });

The answer is a JSON document with the following format: {"e":0} where "e" is an error code. "e" could return many different values and I would like to be able to find out the real response and not always assume 0.

Any idea?

What does your console show as the actual response? It sounds like the resulting object is not in the format that you are expecting. Also, instead of $.each, you should be using $(data).each. — DevlshOne
– DevlshOne, Commented Aug 7, 2013 at 13:10
If the response is {"e":0}, then the object obviously does not have a result property, so you cannot iterate over data.result.files. — Felix Kling
– Felix Kling, Commented Aug 7, 2013 at 13:11
Solve the second problem and then the first will solve itself — Tomer
– Tomer, Commented Aug 7, 2013 at 13:12
What are you doing in your controller function, can we get a look? — Aditya
– Aditya, Commented Aug 7, 2013 at 13:23
Thanks for you answers. What JSON should the server response? I tried {"result" : 0} with no luck. What structure should it have? — G A
– G A, Commented Aug 7, 2013 at 17:16

G A · Accepted Answer · 2013-08-08 18:43:16Z

9

I have solved it. I've made a small change in the java script like this:

done: function (e, data) {
      $.each(data.files, function (index, file) {
          $('<p/>').text(file.name);
        });
      },

And I have changed the json that the server was responding to this format:

{ files: [ { error: 0, name: "thumb2.jpg", } ] }

answered Aug 8, 2013 at 18:43

G A

5913 gold badges6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Parsing a JSON response after a file upload with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related