Uploader and Form Integration

The purpose of any form is to collect data from users. This library provides UI Form and HtmlForm components with lots of controls while the Uploader component helps get user files (text documents, pictures, etc.)



Related sample:  Uploader and Form Integration

The Uploader control together with the component that displays pre-uploaded files are included into the form as any other controls:

{view:"form", elements:[
    { view:"text", label:"Title", labelPosition:"top", name:"title" },
    { view:"button", label:"Save", type:"form", click:save_form },
    {
        view:"uploader", upload:"php/upload.php",
        id:"files", name:"files",
        value:"Add documents", 
        link:"doclist",  
        autosend:false //!important
    },
    {
        view:"list", scroll:false, id:"doclist", type:"uploader" 
    }]
}

Beware to switch off autosending to send files together with other form data.

Form Saving

While saving the form, follow the scheme:

  • send files to server;
  • (optionally ) get response of uploading script and use its data. Described here;
  • save the form data via Ajax POST request;
  • (optionally) get response from a form-saving script and use its data.

Files are processed with a script defined as upload value of the Uploader (read more) while form data is processed with the help of another one. You write both scripts on your favorite language to match your needs.

The AJAX request to send the form is defined as a callback to Uploader send() method, so yo first get data from uploading script response and can use it while saving form data.

Scheme of Form Saving

function save_form(){
    $$("files").send(function(){ //sending files
        //...callback
 
        webix.ajax().post(
            "php/saveform.php", // saving form
            $$("myform").getValues(), 
            function(text){  // response
                webix.message(text);
            }
        );
    });
}

To learn more about how to send Ajax requests in Webix, read the Ajax Operations article.

Back to top