Maintain defaults events in protoUI of custom uploader

edited September 2018 in Technical questions


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) {
 $$("uploader:image:tenant").attachEvent("onUploadComplete", function () {
 $$("uploader:image:tenant").attachEvent("onAfterFileAdd", function (file) {


//uploader protoUI uploader code

            name: "uploader",

            $init: function (config) {

                // 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
            // 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) {
                    // 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 =;
                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(;

                    // 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) {
                                //$$("page:main").showProgress({ type: "top", position: ((100 / blobs.length) * (x + 1)) / 100 });
                                // Si es la ultima parte mandamos un mensaje al usuario de archivo subido satisfactoriamente
                            } else {
                                x = 0;
                                //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);
              'POST', $this.config.upload, true);
                        // Envío de la parte del archivo

                    // Inicio del envío de partes de archivo

            // 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:

    However, there are several issues in a proto component.
    1) It is not recommended to redefine the default view, i.e.

          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!!!

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!