Documentation

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 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: "$$('uploader_1').send()";
        }
    ]
});

Related sample:  Sending on custom action

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

The benefit of manual sending are as follows:

  • you can vizualize the response of uploading script on client side;
  • you can enable consecutive saving of uploader and form data if a form contains extra field exept for uploader.

Defining additional data to send

Uploader control allows defining extra data to send to server together with the file data.

In the autosend mode

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

During manual sending

The above metioned code can be used for manual sending as well, but alternativaly you can provide extra as the second parameter of the send method:

//either when a single file is sent to server
$$("uploader").send(id, { param1:"value1", param2:"value2"});

The id parameter is file ID in the uploader files array.

//or with callback function as first parameter
$$("uploader").send(function(res){
        /*callback function*/
    }, 
    { param1:"value1", 
      param2:"value2"
    }
);

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/jpg",
                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.

Related sample:  Uploader - configure to accept the filetype

Related Articles

Back to top