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>

it might help if you tell us a bit more about what errors, messages or other you're experiencing instead of just saying "it doesn't work" ;) — Zathrus Writer
– Zathrus Writer, Commented Jan 23, 2013 at 9:37
does your server returns you a json object or are you asking on how to do that? — gmaliar
– gmaliar, Commented Jan 23, 2013 at 9:45
The done callback was never called. No javascript errors occurred according to my console. — PaulWoodIII
– PaulWoodIII, Commented Jan 23, 2013 at 10:06
Guy the server did return a JSON object describing the image that it received. — PaulWoodIII
– PaulWoodIII, Commented Jan 23, 2013 at 10:07

PaulWoodIII · Accepted Answer · 2013-01-23 10:05:44Z

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>

Rod · Accepted Answer · 2015-01-20 14:48:54Z

0

I had the same problem with this code.

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
              alert("done");
        }     
    });
});

Just with not setting the dataType, the done callback is now executed ... Code below just work ...

$(function () {
    $('#fileupload').fileupload({
            done: function (e, data) {
                  alert("done");
        }     
    });
});

The server return some json.

answered Jan 20, 2015 at 14:48

Rod

1

Collectives™ on Stack Overflow

jQuery File Upload done function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related