title: How to deal in uncaught in promise error?
body: <p>I am new to Promises and I am sure I am doing something wrong with my code.
  The result is correct but I have an <code>Uncaught (in promise)</code> warning in my console.log.
  What is going on here is the User can submit a form where there are some <code>required</code> fields, some <code>optional</code> fields and an image.
  On submit I am getting the image that gets compressed, resized and oriented so that it upload to the server as a small amount of Kbs.</p>
  
  <p>In the coontroller I validate the code as said, some fields are required so in the <code>error</code> case inside the Ajax call I get the textStatus if a field is missing.</p>
  
  <p>What happens with this code is that if the user inputs the image but none or some of the required fields the XHR textstatus error object appears as <code>Uncaught (in promise)</code>, (The missing required fields).</p>
  
  <p>I am missing the point of how you deal with errors (reject ? ) in promises so I don't really know how to solve this one.</p>
  
  <p>My guess is that if the User submits the image but not the required fields there should be a way to check that during the promise so that it gets rejected even if the user submitted the image (as the image alone does not suffice). Is this done with <code>reject</code> ? But where? and how do you call the error after .then() ?
  And what if the user submits some required fields or all of them but not the image? If I let the promise run I get an <code>undefined</code> error in the promise, that's why I added a check to see if there's any file and if it's an image.</p>
  
  <p>This is my script:</p>
  
  <pre><code>$(document).ready(function () {
  
      $("#AddModel").on("submit", function (e) {
  
          e.preventDefault();
  
          // gets the file from the form input
          var files = $('#modelpic').prop('files');
  
          var form = $(this);
  
          // this strips the submitted form from the file and returns a new form with all the
          // inputs but the file
          var processedFormData = noFileFormData(form[0]);
  
          // only if there's a file and it's an image
          if( files.length !== 0 &amp;&amp; /^image/.test(files[0].type)){
  
              //this calls the promise that manipulates the image and returns a blob
              processImage(files[0]).then(([img, ia])=&gt; {
  
                  processedFormData.append('image', ia, 'processed.jpg');
  
                  return $.ajax({
                      type: 'POST',
                      url: form.prop('action'),
                      processData: false,
                      contentType: false,
                      cache: false,
                      data: processedFormData,
                      success: function (data) {
  
                          //displays preview of the post
  
                      },
  
                      error: function (textStatus) {
  
                          //displays errors
  
  
                      }
                  });
  
              });
          }else{
  
                  //displays an error re the image is not present.
                  // Now this is not optimal as the image is not the only required field
  
          }
      });
  });
  </code></pre>
  
  <p>This is the promise function that prepares the manipulated image, it calls some other functions for the real processing:</p>
  
  <pre><code>function processImage(file) {
  
      return new Promise(function (resolve, reject) {
  
          if (file.type.match('image.*') &amp;&amp; file.length != 0) {
  
              var reader = new FileReader();
  
              reader.readAsDataURL(file);
  
              reader.onloadend = function () {
  
                  var base64img = this.result;
  
                  var exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(this.result));
                  var srcOrientation = exif.Orientation;
  
                  resetOrientationResizeCompress(base64img, srcOrientation).then((img)=&gt; {
  
                      dataURItoBlob(img).then((ia)=&gt; {
  
                          resolve([img, ia]);
  
                      });
  
                  });
              };
          }else{
  
              //don't really know what to do here really, or if this is the way
  
              reject();
  
          }
      });
  }
  </code></pre>