Configures the ability to upload a file(s) in an asynchronous manner. Please refer to the async mode help topic for more details.

The selected files will be uploaded immediately by default. You can change this behavior by setting autoUpload to false.

The selected files will be uploaded in separate requests, if this is supported by the browser. You can change this behavior by setting batch to true.

The name of the form field submitted to the Remove URL.

The URL of the handler responsible for removing uploaded files (if any). The handler must accept POST requests containing one or more "fileNames" fields specifying the files to be deleted.

The HTTP verb to be used by the remove action.

The name of the form field submitted to the save URL. The default value is the input name.

The URL of the handler that will receive the submitted files. The handler must accept POST requests containing one or more fields with the same name as the original input name.

Enables (true) or disables (false) an Upload. A disabled Upload may be re-enabled via enable().

Sets the strings rendered by the Upload.

Sets the text of the cancel button text.

Sets the drop zone hint.

Sets the text of the remove button text.

Sets the text of the retry button text.

Sets the "Select..." button text.

Sets the status message for failed uploads.

Sets the status message for uploaded files.

Sets the status message for files that are being uploaded.

Sets the text of the "Upload files" button.

Enables (true) or disables (false) the ability to select multiple files. If false, users will be able to select only one file at a time. Note: This option does not limit the total number of uploaded files in an asynchronous configuration.

Enables (true) or disables (false) the ability to display a file listing for uploading a file(s). Disabling a file listing may be useful you wish to customize the UI; use the client-side events to build your own UI.

Prepares the Upload for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.

Example

var upload = $("#upload").data("kendoUpload");

// detach events
upload.destroy();

Disables the upload.

Example

var upload = $("#upload").data("kendoUpload");

// disables the upload
upload.disable();

Enables the upload.

Example

var upload = $("#upload").data("kendoUpload");

// enables the upload
upload.enable();

Toggles the upload enabled state.

Example

var upload = $("#upload").data("kendoUpload");

// toggles the upload enabled state
upload.toggle();

Fires when the upload has been cancelled while in progress.

Note: The cancel event fires only when the upload is in async mode.

Example

$("#photos").kendoUpload({
    // ...
    cancel: onCancel
});

function onCancel(e) {
    // Array with information about the uploaded files
    var files = e.files;

    // Process the Cancel event
}

Fires when all active uploads have completed either successfully or with errors.

Note: The complete event fires only when the upload is in async mode.

Example

$("#photos").kendoUpload({
    // ...
    complete: onComplete
});

function onComplete(e) {
    // The upload is now idle
}

Fires when an upload / remove operation has failed.

Note: The error event fires only when the upload is in async mode.

Example

$("#photos").kendoUpload({
    // ...
    error: onError
});

function onError(e) {
    // Array with information about the uploaded files
    var files = e.files;

    if (e.operation == "upload") {
        alert("Failed to uploaded " + files.length + " files");
    }
}

Fires when upload progress data is available.

Note: The progress event fires only when the upload is in async mode.

Note: The progress event is not fired in IE. See Supported Browsers

Example

$("#photos").kendoUpload({
    // ...
    progress: onProgress
});

function onProgress(e) {
    // Array with information about the uploaded files
    var files = e.files;

    console.log(e.percentComplete);
}

Fires when an uploaded file is about to be removed. Cancelling the event will prevent the remove.

Example

$("#photos").kendoUpload({
    // ...
    remove: onRemove
});

function onRemove(e) {
    // Array with information about the removed files
    var files = e.files;

    // Process the Remove event
    // Optionally cancel the remove operation by calling
    // e.preventDefault()
}

Triggered when a file(s) is selected. Note: Cancelling this event will prevent the selection from occurring.

Wire-up an event handler that triggered when a user selects a file(s)

var onSelect = function(e) {
    $.each(e.files, function(index, value) {
        console.log("Name: " + value.name);
        console.log("Size: " + value.size + " bytes");
        console.log("Extension: " + value.extension);
    });
};

// initialize and configure an Upload widget with a select event handler
$("#photos").kendoUpload({
    // ...
    select: onSelect
});

Fires when an upload / remove operation has been completed successfully.

Note: The success event fires only when the upload is in async mode.

Example

$("#photos").kendoUpload({
    // ...
    success: onSuccess
});

function onSuccess(e) {
    // Array with information about the uploaded files
    var files = e.files;

    if (e.operation == "upload") {
        alert("Successfully uploaded " + files.length + " files");
    }
}

Fires when one or more files are about to be uploaded. Cancelling the event will prevent the upload.

Note: The upload event fires only when the upload is in async mode.

Example

$("#photos").kendoUpload({
    // ...
    upload: onUpload
});

function onUpload(e) {
    // Array with information about the uploaded files
    var files = e.files;

    // Check the extension of each file and abort the upload if it is not .jpg
    $.each(files, function() {
        if (this.extension != ".jpg") {
            alert("Only .jpg files can be uploaded")
            e.preventDefault();
        }
    });
}

Example

$("#photos").kendoUpload({
    // ...
    upload: onUpload
});

function onUpload(e) {
    var xhr = e.XMLHttpRequest;
    if (xhr) {
        xhr.addEventListener("readystatechange", function(e) {
            if (xhr.readyState == 1 /* OPENED */) {
                xhr.setRequestHeader("X-Foo", "Bar");
            }
        });
    }
}