Maintain defaults events in protoUI of custom uploader

Hi,

How to maintain default events when create a prototype from uploader view?

My code of protoUI upload a file in chunks, this work fine, but when the upload of the file ends I want to perform another action in the onFileUpload event or onUploadComplete event or onAfterFileAdd event, but this events not fire.

How can I keep events by default, or how would the event for onAfterFileAdd be added?

Thanks so much in advance

//code in the view calling my custom uploader
{
                                                        id: "uploader:image:tenant",
                                                        view: "uploader",
                                                        value: _("Changes"),
                                                        messageStarting: "Se inicia la carga del archivo",
                                                        messageSucces: "Archivo subido correctamente",
                                                        accept: "image/png, image/gif, image/jpeg",
                                                        upload: "file/upload",
                                                        multiple: false
 }

//code in ready event of view

ready(view) {

$$("uploader:image:tenant").attachEvent("onFileUpload", function (file, response) {
            webix.message("uploadend");
 });
 $$("uploader:image:tenant").attachEvent("onUploadComplete", function () {
            webix.message("done");
 });
 $$("uploader:image:tenant").attachEvent("onAfterFileAdd", function (file) {
  webix.message("done");
            
 });
}

//uploader protoUI uploader code

webix.protoUI({
            name: "uploader",
            
            $init: function (config) {

                //config.messageStarting
                //config.messageSucces
                // Configuración de vista
                // config.view = "uploader";
                //config.value = "" ; //_("default_choose_file");
                config.autosend = true;
                config.borderless = true;
                config.multiple = false;

               
                // Ruta para subida de ficheros por defecto
                if (!("upload" in config)) config.upload = "api/file/upload";

                // Mensaje de inicio de subida de archivo
                if (!("messageStarting" in config)) config.messageStarting= "Inicio subida";

                // Mensaje de fin de subida de archivo
                if (!("messageSucces" in config)) config.messageSucces = "Fin subida";

                // Adición de comportamiento propio
                this.$ready.push(this._deferred);
            },
            // Comportamiento adicional
            _deferred: function () {
                // Modificación de comportamiento al escoger fichero a enviar ( Antes de enviar el archivo a la url )
                this.attachEvent("onBeforeFileAdd", function (file) {
                    this._upload(file.file);
                    // Se cancela el comportamiento original de envío
                    return false;
                });
            },

            // Subida de fichero
            _upload: function (file) {
                
                // Se añade funcionalidad barra de progreso a pagina completa
                //webix.extend($$("page:main"), webix.ProgressBar);
                var messageSucces = "";
                var filename = file.name;
                var originalFilename = filename;
                if ("fileName" in this.config) filename = this.config.fileName;
                if ("messageSucces" in this.config) messageSucces = this.config.messageSucces;
                // Se indica la subida del archivo
                webix.message({ text: this.config.messageStarting });
     

                var $this = this;
                var buffer;

                // Volcado de archivo a FileReader
                var fr = new FileReader();

                fr.onload = function (e) {
                    buffer = new Uint8Array(e.target.result);

                    // División de archivo y envío de cada una de las partes
                    var blobs = [];

                    // División del archivo en blobs
                    for (var i = 0; i < buffer.length; i += 100000)
                        blobs.push(new Blob([buffer.subarray(i, i + 100000)], { type: file.type }));

                    var x = 0;

                    // Envío de cada parte del archivo
                    function sendChunk() {
                       
                        var formData = new FormData();
                        formData.append("chunck" + x, blobs[x], filename + "_" + x);

                        // Envío de cada una de las partes del archivo
                        var xhr = new XMLHttpRequest();
                        xhr.addEventListener("load", function () {
                            // Envío de la siguiente parte del archivo
                            if (x < blobs.length - 1) {
                                x++;
                                //$$("page:main").showProgress({ type: "top", position: ((100 / blobs.length) * (x + 1)) / 100 });
                                sendChunk();
                                // Si es la ultima parte mandamos un mensaje al usuario de archivo subido satisfactoriamente
                            } else {
                                x = 0;
                                //$$("page:main").hideProgress();
                                //webix.message({ text: _("default_file_uploaded_successfully", { filename: originalFilename }), expire: 10000 });
                                webix.message({ text: $this.config.messageSucces });
                                if ($this.config.onload) $this.config.onload(file);
                            }
                        });
                        xhr.open('POST', $this.config.upload, true);
                        // Envío de la parte del archivo
                        xhr.send(formData);
                    }

                    // Inicio del envío de partes de archivo
                    sendChunk();
                };
                fr.readAsArrayBuffer(file);
    },

            // Mensaje de inicio de subida de archivo
            messageStarting: function (value) {
                return value;
                //if (value)this.$view.childNodes[0].innerHTML = value;
    },

            messageSucces: function (value) {
                return value;
    },

}, webix.EventSystem, webix.ui.uploader);

Hi,

In fact, one event can trigger different event handlers. So the code

upl.attachEvent("onAfterFileAdd", function (file) {  webix.message("done"); });
upl.attachEvent("onAfterFileAdd", function (file) {  /* another handler */ });

is valid and will trigger both handlers: Code Snippet

However, there are several issues in a proto component.

1. It is not recommended to redefine the default view, i.e.

webix.protoUI({
      name: "uploader",     // should be different from the default one
}, webix.EventSystem, webix.ui.uploader);

2. In webix production version (webix.js), private methods (which names start with _) will be minified randomly (e.g. bs:function(){ ... }).
   Thus, such custom methods as _deferred will not replace the default ones, but most likely they will interfere (in case they will be actually called).

Thanks so much!!!