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

Upload

configuration

Configures the composite Upload widget of the FileManager. Accepts the same options as the kendoUpload widget.

upload

Object

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            multiple: true,
            showFileList: true,
            async: {
                saveUrl: baseUrl + "Upload",
                removeUrl: baseUrl + "Remove"
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

upload.cancel

Function

Fires when the upload was cancelled while in progress. Upload Events.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            cancel: function(e) {
                console.log("Upload cancelled: " + e.files[0].name);
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

upload.clear

Function

Fires when the files are cleared by clicking on the Clear button. Upload Events.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            clear: function(e) {
                console.log("Upload list cleared");
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

upload.complete

Function

Fires when all active uploads complete—either successfully or with errors. Upload Events.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            complete: function(e) {
                console.log("Upload completed");
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

upload.error

Function

Fires when an upload or remove operation fails. Upload Events.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            error: function(e) {
                console.log("Upload error: " + e.files[0].name);
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

upload.pause

Function

Fires when the files are cleared by clicking the Pause button. The button is visible if chunksize is set. Upload Events.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            pause: function(e) {
                console.log("Upload paused: " + e.files[0].name);
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

upload.progress

Function

Fires when the data about the progress of the upload is available. Upload Events.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            progress: function(e) {
                console.log("Upload progress: " + Math.round(e.percentComplete) + "%");
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

upload.remove

Function

Fires when an uploaded file is about to be removed. If the event is canceled, the remove operation is prevented. Upload Events.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            remove: function(e) {
                console.log("File removed: " + e.files[0].name);
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

upload.resume

Function

Fires when the files are resumed through clicking the Resume button. The button is visible if chunksize is set and the file upload is paused. Upload Events.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            resume: function(e) {
                console.log("Upload resumed: " + e.files[0].name);
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

upload.select

Function

Fires when a file is selected. Upload Events.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            select: function(e) {
                console.log("Files selected: " + e.files.length);
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

upload.success

Function

Fires when an upload or remove operation is completed successfully. Upload Events.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            success: function(e) {
                console.log("Upload successful: " + e.files[0].name);
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

upload.upload

Function

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

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        upload: {
            upload: function(e) {
                console.log("Starting upload: " + e.files[0].name);
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>