jQuery File Upload done function

Question

I've modified the example code provided on jQuery File Upload's Wiki My scripting works for the add callback but not the done callback. The server is getting the post correctly and returning a JSON response.

I've noticed in the source code some of the callbacks are commented out. I'm not sure if I should uncomment them or not. Or use the callback fileuploaddone But removing the comment did not work.

Not sure if i'm doing this correctly. I'd like the server to return me a JSON object describing the image I just uploaded so the next step of my form can link the image with a backbone.js model.

<form id="uploadform">
    <input id="fileupload" type="file" name="imagefile" data-url="imagefiles" multiple>
    <button type="#" class="btn btn-primary uploadfile" style="display: none">Upload</button>
    <div id="progress">
        <div class="bar" style="width: 0%;"></div>
    </div>      
</form>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {              
        data.context = $('.uploadfile').css('display','none')
            utils.addValidationSuccess('Added file: ' + data.jqXHR.name);
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        },
        add: function (e, data) {
            console.log('added');
            data.context = $('.uploadfile')
                .css('display','block')
                .click(function () {
                    utils.showAlert('Uploading','...', 'alert-warning');
                    data.submit();
                });
        }
    });
});
</script>

Solution

What got things working was using jquery.ajax 's apparently native callback on submit, adjusted code shown below.

<div class="row-fluid">
    <form id="uploadform">
        <input id="fileupload" type="file" name="imagefile" data-url="imagefiles" multiple>
        <button type="#" class="btn btn-primary uploadfile" style="display: none">Upload</button>
        <div id="progress">
            <div class="bar" style="width: 0%;"></div>
        </div>      
    </form>
    <script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css(
                    'width',
                    progress + '%'
                );
            },
            add: function (e, data) {
                console.log('added');
                data.context = $('.uploadfile')
                    .css('display','block')
                    .click(function () {
                        utils.showAlert('Uploading','...', 'alert-warning');
                        var jqXHR = data.submit()
                            .success(function (result, textStatus, jqXHR) {
                                console.log('Done');

                                console.log('e:' + e);
                                console.log('results:' + result );
                                console.log('results.id:' + result.id );
                                console.log('textStatus:' + textStatus );               
                                console.log('jqXHR:' + jqXHR );

                                data.context = $('.uploadfile').css('display','none')
                                utils.showAlert('Success','the file uploaded successfully','alert-success');
                                // utils.addValidationSuccess('Added file: ' + data.jqXHR.name);
                            })
                            .error(function (jqXHR, textStatus, errorThrown){
                                 utils.showAlert('Error','...', 'alert-error');
                            });
                    });
            }
        });
    });
    </script>
</div>