FineUploaderBasic calling cancelAll()

I am using FineUploaderBasic to integrate uploading to my existing web site. The problem I have is with cancelling current uploading file. This is my code:

<div id="button" class="btn btn-large btn-primary">
    <i class="icon-upload icon-white"></i>
        Upload
    <i class="icon-upload icon-white"></i>
</div>
<a href="#" id="cancelling">cancel</a>
<div id="uploader"></div>

<script>
window.onload = function () {
    var uploader = new qq.FineUploaderBasic({
        debug: true,
        element: document.getElementById('uploader'),
        button: document.getElementById('button'),  
        request: {
            endpoint: 'upload'
        },    
        multiple: false,  
        maxConnections: 1,  
        allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'jpe',
            'mp3', 'wma', 'wav',
            'mp4', 'flv', '3gpp', 'webm',
            'zip', 'rar', 'gz', 'tar', 'tgz', 'iso'
        ],
        callbacks: {
            onSubmit: function (id, fileName) {},
            onUpload: function (id, fileName) {},
            onProgress: function (id, fileName, loaded, total) {
                $('#cancelling').click(function () {
                    cancelAll();
                });
            },
            onComplete: function (id, fileName, responseJSON) {},
            onError: function (id, name, reason, xhr) {},
            onCancel: function (id, fileName) {
                alert('cancelled');
            }
        }

    });
}    
</script>

But above does not work for cancel link. When I press cancel while progressing upload, my javascript console gives this error:

ReferenceError: cancelAll is not defined

I could not find any descriptions of calling cancelAll() in official documentation.

How can I call it? What is the right implementation?

Edit: This is my working code:

<div id="uploader">
    <div id="button" class="btn btn-large btn-primary">
            <i class="icon-upload icon-white"></i>
            Загрузить файл
        <i class="icon-upload icon-white"></i>
    </div>

    <h4><div id="progress" class="hide"></div></h4>
    <a id="cancel_link" href="#" class="hide"><h4>Cancel uploading</h4></a>
</div>
<script>
    window.onload = function()
            {
                         var uploader = new qq.FineUploaderBasic
                 ({

                element: document.getElementById('uploader'),

                button: document.getElementById('button'),

                request:
                {
                   endpoint: 'upload'
                },

                    multiple: false,

                maxConnections: 1,

                validation:
                {
                    allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'jpe', 
                                                                                        'mp3', 'wma', 'wav', 
                                                                                        'mp4', 'flv', '3gpp', 'webm', 
                                                                                        'zip', 'rar', 'gz', 'tar', 'tgz'],

                     sizeLimit: 20971520 // 20 MB = 20 * 1024 * 1024 bytes

                },

                messages:
                    {
                     sizeError: 'Error: {sizeLimit}',
                     typeError: '{file} error. valid: {extensions}.'
                        },

                callbacks:
                    {
                      onSubmitted: function(id, fileName)
                      {
                         $('#cancel_link').show();
                         $('#button').hide();
                         $('#progress').show();
                         $('#progress').html('Submitted...');

                         var cancel_btn = document.getElementById('cancel_link');
                         var self = this;
                                    qq(cancel_btn).attach('click', function(){
                                            self.cancel(id);
                                            });
                                    },

                    onProgress: function(id, fileName, loaded, total)
                                    {
                                        if(loaded<total)
                                        {
                                            progress = '"' + fileName + '" загружено ' + Math.round(loaded / total*100) +'%';
                                            $('#progress').html(progress);
                                        }
                                        else
                                        {
                                            $('#progress').html('Подождите...');
                                        }
                                    },

                                    onComplete: function(id, fileName, responseJSON)
                                    {
                                        $('#cancel_link').hide();

                                        if(responseJSON.success)
                                        {
                                            $('#progress').html('Подождите...');
                                            window.location.replace(responseJSON.url);
                                        }
                                    },

                                    onError: function(id, name, reason, xhr)
                                    {
                                        $('#cancel_link').hide();

                                        $('#progress').hide();
                                        $('#button').show();
                                        alert(reason);

                                    },

                                    onCancel: function(id, fileName)
                                    {
                                        $('#cancel_link').hide();

                                        $('#progress').hide();
                                        $('#button').show();
                                    }
                                }

                            });
                        }
    </script>

Everything works in Firefox, but progress of uploading (percents) does not show in Android what can be problem? As far as I know fineuploader support ios and android.

cancelAll is documented here.

You are getting the ReferenceError because cancelAll is not in the scope of the inner-body of the onProgress handler, but don't worry about that just yet because ...

Note that onProgress is:

called during the upload, as it progresses.

By doing this,

onProgress: function (id, fileName, loaded, total) {
    $('#cancelling').click(function () {
        // ...
    });

You are actually binding a click handler to the cancel button each time the onProgress callback is fired. That means there may be potentially thousands of click handlers ready to handle that click event. If you clicked that element, it would execute the inner function as many times as that binding happened.

Also, you intend to call cancelAll() when the user has clicked the cancel button. Well, that would cancel all uploads, not just the corresponding upload.

See where this is going? A user might click that button, and cancel all the uploads many, many, many times. That's not going to do.

Lastly, (and this is minor) there is no need to define noop functions for your callbacks (e.g., onSubmit, onUpload, onComplete, ...).

My first suggestion is just to use FineUploader UI mode (non-basic). It draws the UI (including a cancel button) for you. What you could do to customize it more (if you need) is to edit some of the templates that Fine Uploader uses.

The other suggestion -- and this will require more work on your part -- is to continue using FineUploader Core (basic) mode and programmatically draw the UI yourself. One way to do this would be to edit the onComplete callback:

window.onload = function () {
    var uploader = new qq.FineUploaderBasic({
        debug: true,
        element: document.getElementById('uploader'),
        button: document.getElementById('button'),  
        request: {
            endpoint: 'upload'
        },    
        multiple: false,  
        maxConnections: 1,  
        callbacks: {
            onSubmitted: function (id, name) {
                var el = document.getElementById('uploader');
                el.innerHTML = "<div id='file-"+id+"'>Cancel</div>";
                var cancel_btn = document.getElementById('file-'+id);
                var self = this;
                qq(cancel_btn).attach('click', function () {
                    self.cancel(id);
                })
            }
        }
    });
}

The onSubmitted callback handler is your best bet for making custom UI changes on a per-file basis because it is

called when the file or Blob has been successfully submitted to the uploader

Just to reiterate, I strongly recommend you use FineUploader UI (non-basic) mode as it will save you a lot of hassle starting off. If you are ok with putting the extra effort in, and you have a good understanding of web and browser standards then go all out for Core (basic) mode.

Good luck and let me know if you have any more questions.