Back to all docs
API Reference / ui / Upload / upload
New to Kendo UI for jQuery? Start a free 30-day trial

Upload

events

Fires when one or more files are about to be uploaded. The canceling of the event prevents the upload.

  • The upload event fires only when the upload is in async mode.
  • At this point, you can change the saveUrl.

upload

Event Data

e.files Array

A list of the files that will be uploaded.

The file fields are:

  • name
  • extension - The file extension including the leading dot. For example, .jpg, .png, and so on.
  • size - The file size in bytes. If not available, the value is null.
  • uid - The unique identifier of the file or batch of files.
data Object

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

e.formData Object

If set, e.formData replaces the payload of the upload request. You can set it to a FormData, ArrayBufferView, Blob, or other valid parameter for XMLHttpRequest.send.

If the browser does not support the File API, e.formData is ignored.

e.XMLHttpRequest Object

Represents the XMLHttpRequest instance that is used to carry out the upload. The request will be in the UNSENT state.

If the browser does not support the File API,, the values is undefined.

<input type="file" name="files" id="photos" />
<script>
    $("#photos").kendoUpload({
        async: {
            saveUrl: "http://my-app.localhost/save",
            removeUrl: "http://my-app.localhost/remove"
        },
        upload: onUpload
    });

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

        // Checks the extension of each file and aborts the upload if it is not .jpg
        $.each(files, function () {
            if (this.extension.toLowerCase() != ".jpg") {
                alert("Only .jpg files can be uploaded")
                e.preventDefault();
            }
        });
    }
</script>
<input type="file" name="files" id="photos" />
<script>
    $("#photos").kendoUpload({
        async: {
            saveUrl: "http://my-app.localhost/save",
            removeUrl: "http://my-app.localhost/remove"
        },
        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");
                }
            });
        }
    }
</script>
<input type="file" name="files" id="photos" />
<script>
    $("#photos").kendoUpload({
        async: {
            saveUrl: "http://my-app.localhost/save",
            removeUrl: "http://my-app.localhost/remove"
        },
        upload: onUpload
    });

    function onUpload(e) {
        e.sender.options.async.saveUrl = "save?id" + 1;
    }
</script>
<input type="file" name="files" id="photos" />
<script>
    $("#photos").kendoUpload({
        async: {
            saveUrl: "http://my-app.localhost/save",
            removeUrl: "http://my-app.localhost/remove"
        },
        upload: onUpload
    });

    function onUpload(e) {
        e.formData = new FormData();
        e.formData.append("foo", "bar");
    }
</script>
Not finding the help you need?
Contact Support