upload

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.

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.

Example - disallowing certain files

<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>

Example - adding the request header

<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>

Example - changing saveUrl before upload

<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>

Example - replacing the payload

<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>