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
}

Event data

files : Array

List of the files that were uploaded or removed . Each file has:

name
extension - the file extension inlcuding the leading dot - ".jpg", ".png", etc.
size - the file size in bytes (null if not available)

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");
    }

    // Suppress the default error message
    e.preventDefault();
}

Event data

files : Array

List of the files that were uploaded or removed . Each file has:

name
extension - the file extension inlcuding the leading dot - ".jpg", ".png", etc.
size - the file size in bytes (null if not available)

operation : String

- "upload" or "remove".

XMLHttpRequest : Object

This is either the original XHR used for the operation or a stub containing:

responseText
status
statusText

Verify that this is an actual XHR before accessing any other fields.

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()
}

Event data

files : Array

List of the files that were uploaded or removed . Each file has:

name
extension - the file extension inlcuding the leading dot - ".jpg", ".png", etc.
size - the file size in bytes (null if not available)

data : Object

Optional object that will be sent to the save handler in the form of key/value pairs.

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
});

Event data

files : Array

An array of the selected files.

name - the name of a selected file, including its extension
extension - the file extension of a selected file, including the leading dot (i.e. ".jpg")
size - the size (in bytes) of a selected file (null, if unavailable)
rawFile - an in-memory representation of a selected file

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");
    }
}

Event data

files : Array

List of the files that were uploaded or removed . Each file has:

name
extension - the file extension inlcuding the leading dot - ".jpg", ".png", etc.
size - the file size in bytes (null if not available)

operation : String

"upload" or "remove".

response : String

the response object returned by the server.

XMLHttpRequest : Object

This is either the original XHR used for the operation or a stub containing:

responseText
status
statusText

Verify that this is an actual XHR before accessing any other fields.

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();
        }
    });
}

Event data

files : Array

List of the files that will be uploaded. Each file has:

name
extension - the file extension inlcuding the leading dot - ".jpg", ".png", etc.
size - the file size in bytes (null if not available)

data : Object

Optional object that will be sent to the save handler in the form of key/value pairs.