How to call a function inside an oncomplete when using Ajax

Question

first time writing here. Also my first time touching ajax and I'm a bit stuck.

I've got two variables:

$upload = $application->buildLink('do=upload');
$do = $application->buildLink('do=read-excel');

Each one calls another file with classes. First one uploads given file to uploads folder and the other one read the uploaded file (xlm, for example).

Then I have this script, which starts after selecting a file to upload

 uploader_1 = new qq.FileUploader({
                    element: document.getElementById('file-uploader'),
                    action: '$upload',
                    debug: true,
                    multiple: false,
                    allowedExtensions: ['csv','xlsx','xls'],
                    maxConnections: 1,
                    name: 'file-uploader',
                    dragDrop: true,
                    params: {
                        't': new Date().getTime();
                    },
                    template: '<div class="qq-uploader">'
                              + '<div class="qq-upload-drop-area">'
                              + '<span>Drag your file</span></div>'
                              + '<div class="qq-upload-button btn btn-default btn-sm">Select file</div>'
                              + '<ul class="qq-upload-list"></ul>'
                              + '</div>',

                    onSubmit: function(id, filename) {
                    },
                    onProgress: function(id, filename, loaded, total) {

                    },
                    onComplete: function(id, filename, responseJSON) {
                        $('.qq-upload-success').remove();
                        $('.qq-upload-fail').remove();
                        if (responseJSON['success'])
                        {
                            $('#file-uploader').html('Uploaded: ' + filename );
                        }
                        else
                        {
                            showError();
                        }
                    }

inside "action:" I put upload so the upload class is called. Then $upload is called. I wanted to do the same with $do but I want to do it after uploading, which could be inside onComplete, but I have no clue about how to call it inside there.

Thanks!

Answer 1

Use a Promise in your javascript.

function upload() {
    return new Promise ((resolve, reject) => {
        uploader_1 = new qq.FileUploader({...
            onComplete: function(id, filename, responseJSON) {
                $('.qq-upload-success').remove();
                $('.qq-upload-fail').remove();
                if (responseJSON['success'])
                {
                    $('#file-uploader').html('Uploaded: ' + filename );
                }
                else
                {
                    showError();
                }
                resolve();
           }             

    });
}

then add async/await when calling your js function.

async function yourfunction() {
    await upload('upload');
    //then call your $do function below
    await upload('do');
}