1

just to start off I am pretty new to javascript.

I am using an library to resize images. The problem here is that the function returns the variable imgBlob before the library has finished resizing, which results in imgBlob being "undefined".

I am using below code:

        function resizeImage(fileInput) {
        var imgBlob;
        ImageTools.resize(fileInput.files[0], {
            width: 320, // maximum width
            height: 240 // maximum height
        }, function (blob, didItResize) {
            // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
            if (didItResize == true) {
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function () {
                    imgBlob = reader.result; 
                }

            } else {
                // error message ?
            }

        });

        return imgBlob;
    }



    document.getElementById('verzenden').onclick = function() {
        var imgBlobs = [];

        var imgHuisnummerField = document.getElementById('imgHuisnummer');
        if (imgHuisnummerField.value != "") {
            imgBlobs.push(resizeImage(imgHuisnummerField)); //pushes "undefined" to the array.

        }

How am I able to wait for the whole resizeImage function to finish before it returns the imgBlob? I have tried using async with await, but that leaves a 'Promise' which doesn't work as expected.

The async attempt:

        async function resizeImage(fileInput) {
        var imgBlob;
        await ImageTools.resize(fileInput.files[0], {
            width: 320, // maximum width
            height: 240 // maximum height
        }, function (blob, didItResize) {
            // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
            if (didItResize == true) {
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function () {
                    imgBlob = reader.result; 
                }

            } else {
                // error message ?
            }

        });

        return imgBlob;
    }

It returns a promise which doesnt get solved..

Yoshi
  • 231
  • 1
  • 5
  • 13
  • Can you add your async await code? A async await function or a promise object will solve this problem if you use it the right way here. – Dennis Spierenburg Jun 12 '18 at 20:43
  • You need to move your `return` code so that it is inside of the success callback for the `resize` method call. – Scott Marcus Jun 12 '18 at 20:46
  • @DennisSpierenburg I have added the async attempt, but it just leaves a Promise – Yoshi Jun 12 '18 at 20:47
  • You added the await on the wrong place, chech the url how you can make a async await call. You should add the await function on your variable in your onclick function – Dennis Spierenburg Jun 12 '18 at 20:50
  • use a callback function as as second parameter. I suppose you could call the resizeImage function passing the push function as this callback parameter. – Warley Noleto Jun 12 '18 at 20:51
  • @ScottMarcus The function still returns a undefined. When debugging the success callback happens after the method has been called o.O – Yoshi Jun 12 '18 at 20:51

0 Answers0