捕获未捕获（承诺）的DOMException javascript

Question

I'm trying to display the error when a user upload a corrupt file or file that is not and image. When you upload a file that is not an image an Uncaught (in promise) DOMException: appear.

How do I catch this error and display it in a div. I've tried try and catch, window.onerror but doesn't do anything when this error occur.

This is my code.

$('.upload-result').on('click', function(ev){
      if($('#upload').get(0).files.length === 0){
        $('.nofile').show();
      }else{
        if($.inArray($('#upload').val().split('.').pop().toLowerCase(), ['gif','png','jpg','jpeg']) == -1){
            $('.invalid-file').show();
        }else{

          $uploadCrop.croppie('result',{ //error occurs here 
            type: 'canvas',
            size: 'viewport'
          }).then(function (resp){
            $.ajax({
              url: "{{url('dashboard/program/imageUpload')}}",
              type: "POST",
              data: {"image":resp, "id":id},
              success:function(data){
                $('.success').show(0, function(){
                  setTimeout(function(){
                    location.href = "{{route('program')}}"
                  }, 1000);
                });
              },
              error: function (xhr, textStatus, errorThrown) {
                  alert("fail");
              }
            });
          });
        }
      }

    });

    window.onerror = function() {
      alert("an error");
    }

Answer 1

Adding a catch statement after the then, keeps your application safe and you can simply handle various errors dynamically.

$uploadCrop.croppie('result', {
   //error occurs here
   type: 'canvas',
   size: 'viewport',
})
.then(function(resp) {
   $.ajax({
      url: "{{url('dashboard/program/imageUpload')}}",
      type: 'POST',
      data: { image: resp, id: id },
      success: function(data) {
         $('.success').show(0, function() {
            setTimeout(function() {
               location.href = "{{route('program')}}"
            }, 1000)
         })
      },
      error: function(xhr, textStatus, errorThrown) {
         alert('fail')
      },
   })
})
.catch(err => /* handle your error here */)

The important part is this:

.catch(err => /* handle your error here */)

If you want to learn more about Promises and why they are there and how to use them, then just read this: MDN Promises or medium.com: promises explained with gambling