Issue with syntax for javascript promise

Question

I am using pdfjs to read a pdf file and get its pages as images. After all the images are loaded, I need to call an ajax to send and get details from the server. The code for iterating pages in the pdf has been taken from here: https://ourcodeworld.com/articles/read/405/how-to-convert-pdf-to-text-extract-text-from-pdf-with-javascript

I am having problem writing the syntax for the promise that will call the ajax function after all the required details mentioned above has been fetched.

Here is my code:

getDataUrlsAndSizesFromPdf(file).then(proceedAndCheckOnServer(file));

const getDataUrlsAndSizesFromPdf = function(file) {
    PDFJS.disableWorker = true;
    fileReader = new FileReader();
    fileReader.readAsArrayBuffer(file);

    return new Promise(function(resolve, reject) {
        fileReader.onload = function(ev) {   
            PDFJS.getDocument(fileReader.result).then(function (pdf) {
                var pdfDocument = pdf;
                var pagesPromises = [];

                for (var i = 0; i < pdf.pdfInfo.numPages; i++) {
                    var pageNum = i + 1;

                    pagesPromises.push(getImageUrl(pageNum, pdfDocument));
                }

                Promise.all(pagesPromises).then(function () {
                    console.log(pdfPagesInfo);

                    resolve();
                }, function () {
                    console.log('failed');

                    reject();
                });
            }, function (reason) {
                console.error(reason);
            });
        }
    });
}

function getImageUrl() {
    return new Promise(function (resolve, reject) {
        PDFDocumentInstance.getPage(pageNum).then(function (pdfPage) {
            var scale = 1;
            var viewport = pdfPage.getViewport(scale);

            var canvas = document.getElementById('dummy-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var task = pdfPage.render({canvasContext: context, viewport: viewport})
            task.promise.then(function(){
                var sizesArr = {
                    height : viewport.height,
                    width : viewport.width
                }
                pdfPagesInfo.sizes[pageNum.toString()] = sizesArr
                pdfPagesInfo.images[pageNum.toString()] = canvas.toDataURL('image/jpeg');

                resolve();
            });
        });
    });
}

function proceedAndCheckOnServer() {
    ....
}

What I want is "proceedAndCheckOnServer()" to be executed when all the details have been fetched from "getImageUrl()". But presently the execution directly goes to "proceedAndCheckOnServer()" without waiting for the promise from "getDataUrlsAndSizesFromPdf" to be resolved. I am new to javascript promises. Please help me with the syntax.

Answer 1

You are calling your function instead of using a callback function.

proceedAndCheckOnServer is invoked, and the result of that function is used as the parameter to then .

getDataUrlsAndSizesFromPdf(file).then(proceedAndCheckOnServer(file));

Try one of these:

getDataUrlsAndSizesFromPdf(file).then(()=>proceedAndCheckOnServer(file));

getDataUrlsAndSizesFromPdf(file).then(function(){ proceedAndCheckOnServer(file) });

Or resolve your getDataUrlsAndSizesFromPdf promise with file and use the function without () to pipeline the result.

getDataUrlsAndSizesFromPdf(file).then(proceedAndCheckOnServer);