Webix uploader can exist not only in the form of a button that you press to start the upload process. It can be bound to any page element and any page event can be used to call the uploader.
All you need is to follow the following steps:
Note that you cannot use this functionality in IE8.
Related sample: Invisible Uploader for Datatable
Such uploader can be used with data management components (datatable in particular) and allows uploading pictures on the fly.
Initialization
//app init
webix.ui({
view:"datatable", ..
});
//uploader init
webix.ui({
view:"uploader",
id:"uploadAPI",
apiOnly: true,
upload:"php/photo.php",
...
});
Uploader is initialized with the separate webix.ui() call.
Uploading is controlled through the view and uploader events. (Event Handling is described separately):
View Events
For the 'visible part' you should define the event that starts the uploading. In the above-mentioned datatable, clicking any photo should enable file browsing dialog on your machine.
The file dialog is triggered by the same-name method that is applied to the uploader object and takes upload context hash as parameter. You will be able to use the context object later to reflect upload result on client.
webix.ui({
view:"datatable",
...,
on:{
onItemClick:function(id){
if (id.column == "photo")
$$("uploadAPI").fileDialog({ rowid : id.row });
}
}
});
Uploader Events
webix.ui({
view:"uploader",
//configuration
on:{
onBeforeFileAdd:function(item){
var type = item.type.toLowerCase(); //deriving file extension
if (type != "jpg" && type != "png"){ //checking the format
webix.message("Only PNG or JPG images!");
return false;
}
},
onFileUpload:function(item){
var id = item.context.rowid;
var row = $$("people").getItem(id);
row.photo = item.sname;
$$("people").updateItem(id, row);
}
}
});
Comments:
Look for more item properties in the main Uploader article.
Uploader initialization:
webix.ui({
view:"uploader",
id:"uploadAPI",
apiOnly: true,
upload:"php/photo.php"
});
If you want to drag-and-drop files with the apiOnly uploader, you should define the desired drop area by the addDropZone method, e.g.:
$$("uploadAPI").addDropZone(document.getElementById("uploader_container"));
//$view contains the object of the topmost element of the component
$$("uploadAPI").addDropZone($$("mylist").$view);
Then, all the files dropped to the area will be added to uploader files and, if autosend is not cancelled, will be sent to the server script.
Additionally, you need to take care of how the files should be displayed. For Webix list there's a ready-made solution:
First, you define type uploader type for the list:
{ view:"list", id:"mylist", type:"uploader" }
Then, link to it in the uploader configuration. You should mention list ID:
{ view:"uploader", id:"uploadAPI", link:"mylist" }
Related sample: Dnd with Invisible Uploader
Check uploader display modes for details.
For other Webix components as well as for on-page HTML elements you should provide custom logic.
Back to top