FineUploader OnComplete not being called

Question

I'm having trouble with the onComplete call. It does not seem to be running the code inside onComplete. Here is what I have:

<script>
    $(document).ready(function () {
        $("#fine-uploader").fineUploader({
            request: {
                endpoint: 'upload2.php'
            },
            text: {
                uploadButton: 'Upload a file'
            },
            callbacks:{
                onComplete: function(id, fileName, responseJSON) {
                        alert("completed");
                        if (responseJSON.success) {
                            $('#imgPreview').html('Thumbnail:<img src="../images/test/' + fileName + '" alt="' + fileName + '">');
                        }
                   }
            }
        });

    });
</script>

The alert inside onComplete never comes up and the html update inside the if statement never appears although the file successfully uploads. I have seen other similar questions on this board, but the suggestions have not worked for me. Specifically, some users seem to use a different format for the onComplete section as:

.on('complete', function(event, id, fileName, responseJSON) {
            alert("Success: " + responseJSON.success);
            if (responseJSON.success) {
                 $('#files-upload').append('<img src="img/success.jpg" alt="' + fileName + '">');
            }

});

I don't understand the difference or which I should be using and haven't been able to find anything in the documentation to help.

I'm a little bit new to this stuff, so any help or suggestions would be greatly appreciated. Thanks!

We need to see what you have in your php file; i think the problem is that the response is not correctly encoded. — mbouzahir, Aug 28 '13 at 02:03

Ray Nicholus · Accepted Answer · 2013-08-29T01:35:49.117

Event handlers work a bit differently between the jQuery plug-in and non-jQuery plug-ins in Fine Uploader. You are using the jQuery plug-in, so the events should be treated as jQuery custom events, per the documentation.

So, your code should look like this:

<script>
    $(document).ready(function () {
        $("#fine-uploader").fineUploader({
            request: {
                endpoint: 'upload2.php'
            },
            text: {
                uploadButton: 'Upload a file'
            }
        })
            .on('complete', function(event, id, fileName, responseJSON) {
                alert("completed");
                if (responseJSON.success) {
                    $('#imgPreview').html('Thumbnail:<img src="../images/test/' + fileName + '" alt="' + fileName + '">');
                }
           });

    });
</script>

Thanks! One small syntax error in case someone else tries to use this code in the future: The ")}" should be "})" on the line before ".on('complete'..." Once I found that, it worked great. — CMM, Aug 28 '13 at 23:31

FineUploader OnComplete not being called

1 Answers1

Linked