Form.IO - Form events not firing

I'm using Form.IO JS library for developing various new forms. Recently, the need to perform some actions upon opening the form has been presented. So, I searched the documentation on form events. Except from 'change' / 'submit' / 'focus' / 'blur' events, no other event is firing after initialising my form. I'm providing some of my code below:

Formio.createForm(document.getElementById('formio'), components, formOptions)
      .then(function(form) {
         // Working
         form.on('change', function() {
           console.log('change');
         });
         // NOT WORKING
         form.on('initialized', function() {
           console.log('initialized');
         });
         // NOT WORKING
         form.on('render', function() {
           console.log('render');
         });
       });

Does someone have any ideas whatsoever on why those events are not firing? Thanks in advance!

The initialized event should fire just fine as you've described. The render event will fire when you re-render the form.

See JSFiddle and take a look at the comments and the console output.

EDIT:

From our discussion below, it seems like you just want to know a certain point in the form render process where it's OK to add some custom logic. When the createForm resolves to the form instance, we're already in a place where a form has been initialized and rendered.

Formio.createForm(document.getElementById('formio'), components).then((formInstance) => {
  // the createForm promise has resolved to 
  // the already-initialized and rendered form instance
  console.log(formInstance);
});

We can add event listeners here...

Formio.createForm(document.getElementById('formio'), components).then((formInstance) => {
  customUploadBtnClickListener();
});

but there's no need, Form.io handles that for you! A button with "action: 'custom'" takes a "custom" property, which is just a javascript string that the renderer will safely evaluate.

var formJson = {
  components: [
    /* ...rest of components... */
    {
      label: "<br>",
      action: "custom",
      showValidations: false,
      leftIcon: "fa fa-paperclip fa-rotate-90",
      customClass: "customUploadBtn",
      tableView: false,
      key: "customUploadBtn",
      type: "button",
      custom: "console.log(\"Clicked!\");",
      input: true
    },
    /* etc... */
  ]
};

I've made a JSFiddle with all this explained and some more conceptual stuff, let me know if this helps clear things up.