Configuring Uploader

Single Upload

The uploader button initiates a window for browsing files on your machine and choosing the necessary one. By default, uploader supports uploading of multiple file at once and you can push this button and add as many file as you like to the uploader.

If the multiple property is set to false, it enables replacing of the previously added files with new ones.

webix.ui({ 
    view:"uploader",
    multiple:false
});

Related sample: Single Upload

Manual Send

By default, files are added to the uploader and get processed with the dedicated script at once. To prevent this, cancel the autosend:

webix.ui({ 
    rows: [
        { 
          view:"uploader",
          autosend:false
        },
        { 
            view:"button", 
            click:function(){
                $$('uploader_1').send();
            }
        }
    ]
});

Files are sent later when the send() function is called for this uploader. It triggers the upload script execution.

The benefits of manual sending are as follows:

you can visualize the response of uploading script on the client side;
you can enable consecutive saving of uploader and form data, if a form contains extra fields except for the uploader.

Defining Additional Data to Send

Form data

The Uploader control allows defining extra data to send to a server together with the file data in the body of a POST request. For these needs, the formData parameter is used.

webix.ui({ 
    view:"uploader",
    formData:{
        param1:value1,
        param2:value2
    }
});

The above configuration allows sending the same parameters with each file that is uploaded with this Uploader control.

If you need to send specific extra parameters for each file, you can add the formData property to the needed file items before the related files are sent (e.g. when autosend is switched off):

webix.ui({      
  view:"form", rows: [
    { 
      view: "uploader", id:"upl1",
      autosend:false,
      formData:{
        //add common parameters
        param1:value1
      } 
    },
    { view: "button", label: "Save files", click: function() {
      $$("upl1").files.data.each(function(obj){
        //add file specific additional parameters
        obj.formData = { param2:value2};
        //send the file
        $$("upl1").send(id);
      });
      //or send them all after the loop
      $$("upl1").send();
    }}
  ]
});

Url Data

The Uploader control allows defining extra data to send to server together with the file data in the query string of POST request. For these needs, the urlData parameter is used.

webix.ui({ 
    view:"uploader",
    urlData:{
        param1:value1
    }
});

Uploading Particular File Types

Uploader can be customized to accept only particular file types during the uploading. Types of files allowed for uploading are specified in the accept property:

webix.ui({
    maxWidth:800,
    cols:[{
        view:"form", rows: [
            { 
                view: "uploader", value: "Upload Images", 
                name:"files", accept:"image/png, image/gif, image/jpeg",
                link:"mylist",  upload:"php/upload.php" 
            }       
        ]
    }]
});

In the above example Uploader accepts only files of image type (.png, .gif and .jpg formats). The full list of common media types is given here.

Uploading Folders

Uploader allows uploading folders with all the files they contain. You can both select a folder from the list of drag it to the uploader.

By default, when you open the upload dialog, it provides a list of files for upload. You can configure the Uploader to provide a list of directories instead by setting the directory property to the true value.

webix.ui({
    view:"form", rows: [
        { 
            view: "uploader", value: "Upload", 
            name:"files",
            directory: true,
            autosend: true,
            link:"mylist",  upload:"php/upload.php" 
        }       
    ]
});

Related sample: Directory Upload