0

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!

1
  • 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, 2013 at 2:03

1 Answer 1

0

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>
1
  • 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, 2013 at 23:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.