Transloadit fires onStart multiple times

Question

I'm implementing Transloadit and everything works great, except for onStart() which sometimes executes multiple times which results in the same image being added multiple times to my page, because onSuccess() runs after every onStart().

When looking at the assemblies log in my Transloadit account, I see multiple duplicate assemblies which matches with the number of times onSuccess() has been run.

Why is the Transloadit plugin executing onStart() and onSuccess() multiple times? wait is set to true, which should make onSuccess() fire only once after all files have been processed (I only allow one file upload).

I see one progression bar when the image upload is starting, after that onSuccess() runs once, twice or sometimes three to four times.

Update 1: Just noticed that two progress bars are overlapping, so the plugin is being run twice.

Update 2: Every time an image is being uploaded, the plugin is bound again. After upload #1, onSuccess() fires twice. After upload #2 it fires three times and so on. Seems like I'll have to unbind the plugin after every time it is being used.

First, loading the library:

<script src='https://assets.transloadit.com/js/jquery.transloadit2-v2-latest.js' type='text/javascript'></script>

Code on the page. getStarted() is executed by a button click after file has been selected.

getStarted = function(){

    var form = $("#form_image");

    if(jQuery().transloadit) {

        form.transloadit({
            wait: true,
            autoSubmit: false,
            processZeroFiles: false,
            params: {
                auth: {key: '123456789'},
                template_id: '123456789'
                },
            onStart: function(){
                console.log('transloadit started');
            },
            onUpload: function(){
                console.log('transloadit upload started');
            },
            onProgress: function(bytesReceived, bytesExpected) {
                console.log('bytesReceived: '+bytesReceived);
            },
            onSuccess: function(assembly) {
                console.log('transloadit success');
                addImageToPage(assembly);
            },
            onError: function(assembly) {
                console.log('transloadit failed');
            }
        });

    form.trigger('submit.transloadit');
    }
}

Answer 1

The problem was that transloadit() was being bound to the same form over and over again each time getStarted() ran. By checking whether the plugin was already bound I could avoid it being bound again.

getStarted = function(){

    var form = $("#form_image");

    //checking whether plugin is already bound
    var uploader = form.data('transloadit.uploader');

    if(jQuery().transloadit && !uploader) {

        form.transloadit({...});
        form.trigger('submit.transloadit');
    }
    else if(jQuery().transloadit && uploader) {
        form.trigger('submit.transloadit');
    }

}