Function returns Undefined value!

Question

I’m trying to take the dimension of an image along with other parameters during the upload preview.

<script>


        function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object


    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var imagem = new Image();
      var reader = new FileReader();


          // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.


            imagem.src = e.target.result;

          var span = document.createElement('span');
          span.innerHTML = ['<img id="foto" class="materialboxed responsive-img" width="650" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');

        var output = [];

        output.push('<li><strong>', '</strong> (', theFile.type || 'n/a', ') - ',
            theFile.size, ' bytes -',imagem.onload = function() {

                  var height = this.height,
                   width = this.width;
                   alert(width+'x'+height);
                    return width+'x'+height+'oi';

                   },'</li>');
            document.getElementById('list').insertBefore(span, null);
            document.getElementById('list1').innerHTML = '<ul>' + output.join('') + '</ul>';

        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }


  }

  document.getElementById('file').addEventListener('change', handleFileSelect, false);

    </script>

I’m not able to capture function returned value imagem.onload, however the value appears in alert when I click to make the preview of the image with the dimension, and the returnonly give undefined. Where am I wrong? I’ve tried using variables to try to get the value, but it doesn’t, however alert displays the value.

Answer 1

It turns out that the function onload is asynchronous and returns nothing, that is, it will only be executed when the image has fully loaded, so the desired value is not returned.

When working with asynchronous functions, we should work with within that function. That is, we should only capture the size of the image within this function and not return its value.

function handleFileSelect(evt) {
    let files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var file of files) {

        // Only process image files.
        if (!file.type.match('image.*')) {
            continue;
        }

        var imagem = new Image();
        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            // Render thumbnail.
            imagem.src = theFile.target.result;

            var span = document.createElement('span');
            span.innerHTML = `<img id="foto" class="materialboxed responsive-img" width="650" src="${theFile.target.result}" title="${escape(theFile.name)}"/>`;

            var output = [];

            imagem.onload = function() {

            var height = this.height,
                 width = this.width;

            let result = `<li><b>${file.type || 'n/a'} - ${file.size} bytes - ${width}x${height}</b>`;

            document.getElementById('list').insertBefore(span, null);
            document.getElementById('list1').innerHTML = `<ul>${result}</ul>`;

            }
        });

        // Read in the image file as a data URL.
        reader.readAsDataURL(file);
    }
}

document.getElementById('file').addEventListener('change', handleFileSelect, false);

<input type="file" id="file" />

<ul id="list"></ul>
<ul id="list1"></ul>