My Uploader not firing any http request

Webix JS
#1

Hey, I’m new to webix and I’m using webix jet too. I’m trying to write code for uploading file to server, well I’m not prepared the server completely yet, but this code not firing any http request, based on network activity on inspect element.
But strangely, onUploadComplete method got executed. can anyone help me please ?

here is my code

//
import {JetView} from "webix-jet";

export default class UploadView extends JetView{
  config() {
    return {
      view		: "layout", //optional line
      responsive	: true,
      cols: [
        { gravity:1, template:""},
        {
          gravity		: 2,
          rows: [
            { gravity: 1, template: "" },
            { view:"template", icon:"mdi mdi-upload", template:"<i class='mdi mdi-upload'></i> Upload File", type:"header" }, // 1st row
            {
              minWidth	: 300,
              maxWidth	: 500,
              view		: "form",
              id			: "formUpload",
              elements:[
                { view:"text", label:"Song's title", labelPosition:"top", name:"title", id: "fileName",
                 on	: {
                   onChange	: (newv, oldv) => {
                     this.$$("upl1").define("formData", {
                       title	: newv
                     });
                     this.$$("upl1").refresh();

                     webix.message("Value changed from: "+oldv+" to: "+newv);
                   },
                   onEnter		: () => {
                     this.sendfile();
                   }
                 }
                },
                {
                  cols	: [
                    {
                      view	: "uploader",
                      upload	: "//docs.webix.com/samples/server/upload",
                      id		: "upl1",
                      css		: "webix_primary",
                      value	: "<i class='mdi mdi-plus-circle'></i> &nbsp; Add File",
                      //accept	: "audio/*",
                      inputName	: "file",
                      autosend	: true,
                      multiple	: false,
                      on			: {
                        onBeforeFileAdd: (file) => {
                          const fileName	= file.file.name;
                          const cleanName	= fileName.split(".");

                          this.$$("fileName").show();
                          this.$$("fileName").setValue(cleanName[0]);

                          this.$$("upl1").define({
                            formData	: {
                              title	: cleanName[0]
                            },
                            value 		: "<i class='mdi mdi-plus-circle'></i> &nbsp; Change File"
                          });
                          this.$$("upl1").refresh();

                          return false;
                        },
                        onFileUpload	: (file, resp) => {
                          if (resp){
                            webix.message(resp);
                          }
                        },
                        onFileUploadError	: (file, error) => {
                          webix.message("Error : "+error.toString());
                        },
                        onUploadComplete 	: (resp) => {
                          const msg	= resp ? resp.toString() : "";
                          webix.message("Done! "+msg);
                        }
                      }
                    },
                    {
                      view	: "button",
                      label	: "<i class='mdi mdi-cloud-upload'></i> &nbsp; Upload",
                      click	: () => {
                        this.sendfile();
                      }
                    }
                  ]
                }
              ]
            },
            {gravity: 1, template: ""}
          ]
        },
        { gravity:1, template:""}
      ]
    };
  }

  init() {
    this.$$("fileName").hide();
  }

  sendfile(){
    const myfile	= this.$$("upl1");

    myfile.send(() => {
      myfile.files.data.each((obj) => {
        webix.message(JSON.stringify(obj));
      });
    });

    console.log("sure you do something ?");
  }
}
#2

Anyway, how to write code on this form ? for better reading

#3

for large code try to use snippet tool https://snippet.webix.com/basic

#4

Hello @boypanjaitan_guest,

I’m trying to write code for uploading file to server, well I’m not prepared the server completely yet, but this code not firing any http request

By returning false within the onBeforeFileAdd event handler you are preventing the file from being added to the DataStore (inner storage of every data-driven component) of the uploader component, meaning there is nothing to be sent over when you execute the send() method. Generally, this is also applicable to every event handler starting with onBefore... - by returning false you will prevent the related action (this can be useful in some circumstances).

Please take a look at the following example: https://snippet.webix.com/b8la8e7v. The only change here is the removal of the return false line within the onBeforeFileAdd handler.

But strangely, onUploadComplete method got executed. can anyone help me please ?

The onUploadComplete event handler will get triggered by the execution of the send() method, even if the uploader doesn’t contain any files that can be sent over.

Anyway, how to write code on this form ? for better reading

The best way to provide your code is by putting together a small sample using our Snippet Tool - https://snippet.webix.com/basic, as correctly noted by intregal. Alternatively, if the issue cannot be replicated using a snippet, you can use either markup or markdown to format your message appropriately. For example, you can put your code inside of a code block using markdown, which would look like this:

~~~
your code
~~~