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
Uploader controls as well as the component to display pre-uploaded files is included into the form like any of its 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.
While saving the form, follow the scheme:
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 favourite 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 responce 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){ //responce
webix.message(text);
}
);
});
}
To learn more about how to send Ajax requests in Webix, read the Ajax Operations article.
Back to top