Validate file before upload in jQuery File Upload with upload button enabled

I'm using the latest version (9.11.2) to upload a file. I have implemented a button for the user to click to start the upload, with the add option. Now I also want to add file validation to make sure the file is an image. I found a solution to to this. This works perfectly fine for me, but only if I remove thee add option below.

$('#fileupload').fileupload({
     forceIframeTransport: true,
     url: nexus.admintoolapi + 'user/picture',
     // The regular expression for allowed file types, matches
     // against either file type or file name:
     acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
     add: function (e, data) {
         $uploadButton.show();
         $uploadButton.on('click', function () {
            data.submit();
         });
     },
     success: function (e, data) {
     },
     fail: function (e, data) {
     },
     done: function (e, data) {
     }
     }).on('fileuploadprocessalways', function (e, data) {
        var currentFile = data.files[data.index];
        if (data.files.error && currentFile.error) {
          // there was an error, do something about it
          console.log(currentFile.error);
        }
    });

So the above code will not run the .on('fileuploadprocessalways' at all. But this will:

$('#fileupload').fileupload({
     forceIframeTransport: true,
     url: nexus.admintoolapi + 'user/picture',
     // The regular expression for allowed file types, matches
     // against either file type or file name:
     acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
     success: function (e, data) {
     },
     fail: function (e, data) {
     },
     done: function (e, data) {
     }
     }).on('fileuploadprocessalways', function (e, data) {
        var currentFile = data.files[data.index];
        if (data.files.error && currentFile.error) {
          // there was an error, do something about it
          console.log(currentFile.error);
        }
    });

If I have this, then the wrong file endings will be caught and stop the file upload, but there will be no way for the user to start the upload actively.

I have also tried putting the code from fileuploadprocessalways but then the currentFile and data.files.error were undefined.

add: function (e, data) {
     $uploadButton.show();
     $uploadButton.on('click', function () {
         var currentFile = data.files[data.index];
         if (data.files.error && currentFile.error) {
              // Here no error occurs ever, both conditions are undefined 
              console.log(currentFile.error);
        } else {
            data.submit();

     });
},