Upload

Description

The Upload widget allows for a user-friendly experience for choosing files to upload.

Official Kendo UI Upload documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

This example demonstrates initializing an Upload widget with no additional options specified.

<form method="post" data-bind="kendoUpload: {}">
    <div>
        <input name="files[]" type="file" />
    </div>
</form>
var ViewModel = function() {};

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additional options in the data-bind attribute.

<input type="checkbox" data-bind="checked: enabled" /> Enabled
<hr/>
<form method="post" data-bind="kendoUpload: { enabled: enabled }">
    <div>
        <input class="btn" name="files[]" type="file" />
    </div>
</form>
var ViewModel = function() {
    this.enabled = ko.observable(true);
};

                            ko.applyBindings(new ViewModel());
Enabled

This example demonstrates setting global options in ko.bindingHandlers.kendoUpload.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<form method="post" data-bind="kendoUpload: {}">
    <div>
        <input name="files[]" type="file" />
    </div>
</form>
var ViewModel = function() {};

ko.bindingHandlers.kendoUpload.options.multiple = false;

                            ko.applyBindings(new ViewModel());

Live Options

The kendoUpload.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
enabled

Determines if users can interact with the field

widget

If specified, will populate an observable with a reference to the actual widget