title: resizing an image before saving in state in React
body: <p>I am trying to resize an image before saving it in state so that I can pass it into my payload for upload. The method below handles the resize</p>
  <pre><code>export const handleResize = (fileObject) =&gt; {
      const reader = new FileReader();
      const maxUploadFileSize = 1048576;
      const imageTypes = ['image/jpeg', 'image/png', 'image/gif'];
      if (fileObject.size &gt; maxUploadFileSize &amp;&amp; imageTypes.includes(fileObject.type)) {
          reader.addEventListener('load', () =&gt; {
              minifyImg(reader.result, 1000, fileObject.type, (data) =&gt; {
                  const newFile = imageUrlToFile(data, fileObject.name);
                  return newFile;
              });
          }, false);
      } else {
          return fileObject;
      }
  
      if (fileObject) {
          reader.readAsDataURL(fileObject);
      }
  };
  </code></pre>
  <p>I am using the function above in my component with code below;</p>
  <pre><code>changeHandler(event) {
          const uploadFilesArray = Array.prototype.slice.call(event.target.files);
          const proofOfIdentityArr = [];
          const resizedImages = [];
  
          if (uploadFilesArray.length &gt; 1) {
              this.setState({
                  errText: 'Too many files selected.' +
                      'You can\'t upload more than one file at a time.',
              });
              setTimeout(() =&gt; {
                  this.setState({
                      errText: '',
                  });
              }, 5000);
              return;
          }
          uploadFilesArray.forEach((file) =&gt; {
              const fileUrl = window.URL.createObjectURL(file);
              const reader = new FileReader();
              const fileData = {
                  fileUrl,
                  name: file.name,
              };
              reader.onload = () =&gt; {
                  fileData.imagePreviewUrl = reader.result;
              };
              reader.readAsDataURL(file);
              proofOfIdentityArr.push(fileData);
              
              //importing and using the resizing function
     
              const newFile = utils.handleResize(file));
              resizedImages.push(newFile);
          });
          this.setState({
              proofOfIdentity: proofOfIdentityArr,
              uploadFilesArray: resizedImages,
          });
      }
  </code></pre>
  <p>The function resizes the image but my problem is that it is asynchronous and returns with a resized image late after the state has already been set, so I get an undefined. How can I make my changeHandler function wait for the resize function to return its value before proceeding.</p>