New to Kendo UI for jQuery? Start a free 30-day trial

Async

configuration

Configures the asynchronous upload of files. For more details, refer to the article on the async mode of the Upload.

async

Object

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

async.autoRetryAfter

Number

If async.autoRetryAfter is set, the failed upload request is repeated after the declared amount of time in miliseconds.

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

async.autoUpload

Boolean

By default, the selected files are uploaded immediately. To change this behavior, set autoUpload to false.

Default: true

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

By default and if supported by the browser, the selected files are uploaded in separate requests. To change this behavior, set batch to true. As a result, all selected files are uploaded in one request.

The batch mode applies to multiple files which are selected simultaneously. Files that are selected one after the other are uploaded in separate requests.

Default: false

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

async.chunkSize

Number

When async.chunkSize is set, the selected files are uploaded chunk by chunk with the declared size. Each request sends a separate file blob and additional string metadata to the server. This metadata is in a stringified JSON format and contains the fileName, relativePath, chunkIndex, contentType, totalFileSize, totalChunks, and uploadUid properties. These properties enable the validation and combination of the file on the server side. The response also returns a JSON object with the uploaded and fileUid properties, which notifies the client what the next chunk is.

The async.chunkSize property is available only when async.batch is set to false.

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

async.concurrent

Boolean

By default, the selected files are uploaded one after the other. When async.concurrent is set to true, all selected files start to upload simultaneously.

The async.concurrent property is available only when async.chunkSize is set.

Default: false

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

async.maxAutoRetries

Number

Sets the maximum number of attempts that are performed if an upload fails.

The async.maxAutoRetries property is available only when async.autoRetryAfter is set.

Default: 1

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

async.removeField

String

The name of the form field that is submitted to removeUrl.

Default: "fileNames"

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

async.removeUrl

String

The URL of the handler which is responsible for the removal of the uploaded files (if any). The handler must accept POST requests with one or more "fileNames" fields which specify the files that will be deleted.

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

async.removeVerb

String

The HTTP verb that will be used by the remove action.

Default: "POST"

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

async.saveField

String

The name of the form field which is submitted to saveUrl. The default value is the input name.

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

async.saveUrl

String

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

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

async.useArrayBuffer

Boolean

By default, the files are uploaded as file data. When set to true, the files are read as a file buffer by using FileReader. This buffer is sent in the request body.

The FileReader consumes the memory of the browser. As a result, if the user uploads a large file, then all the available memory of the client might be consumed and the upload might fail.

Default: false

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

async.withCredentials

Boolean

Controls whether to send credentials (cookies, headers) for cross-site requests.

If the browser does not support the File API, async.withCredentials is ignored.

Default: true

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