Ajax InvokeCommand with custom Callback Primary tabs View(active tab)

Question

I tried to do a what described in https://api.drupal.org/comment/56868#comment-56868, but for Drupal 8.

Drupal.behaviors.corsFileAutoUpload = {
  attach: function (context) {
    $(context).find('input[type="file"].s3fs-cors-upload').once('auto-s3file-upload').on('uploadToS3', Drupal.s3fs_cors.uploadToS3);
    },
}

To invoke this from PHP, I used the following code.

$response->addCommand(new InvokeCommand($selector, 'uploadToS3');

But I got an error from core/misc/ajax.js line number of 1266, as the method for the element is not available. On inspecting eventlistener in Chrome, it was very well visible and I was also able to fire it from Browser Console. I am missing something here. How do we call a custom jQuery function using InvokeCommand?

Answer 1

In the JS side try with this:

(function($) {
  $.fn.uploadToS3 = function() {
    // Your code here.
  };
})(jQuery);

the PHP part looks ok to me.

Answer 2

What's your selector, where you're trying to trigger the method ?? This won't be available according to your error. I guess you have an event/method mixup.

To trigger a custom event do something like:

new InvokeCommand('html', 'trigger', array(
  'your_bound_event',
  array('param1', 'param2'),
)));

And in your behavoir:

$(document).on('your_bound_event', function(ev, param1, param2) {
  console.log('hit');
});