<kendo:upload>

A JSP wrapper for Kendo UI Upload.

Configuration Attributes

directory boolean

Enables the selection of folders instead of files. When the user selects a directory, its entire content hierarchy of files is included in the set of selected items. The directory setting is available only in browsers which support webkitdirectory.

Example

<kendo:upload directory="directory">
</kendo:upload>

directoryDrop boolean

Enables the dropping of folders over the Upload and its drop zone. When a directory is dropped, its entire content hierarchy of files is included in the set of selected items. The directoryDrop setting is available only in browsers which support DataTransferItem and webkitGetAsEntry.

Example

<kendo:upload directoryDrop="directoryDrop">
</kendo:upload>

dropZone java.lang.String

Initializes a drop-zone element based on a given selector, which provides the drag-and-drop file upload.

Example

<kendo:upload dropZone="dropZone">
</kendo:upload>

enabled boolean

Enables (if set to true) or disables (if set to false) an Upload. To re-enable a disabled Upload, use enable().

Example

<kendo:upload enabled="enabled">
</kendo:upload>

multiple boolean

Enables (if set to true) or disables (if set to false) the selection of multiple files. If set to false, the user can select only one file at a time.

Example

<kendo:upload multiple="multiple">
</kendo:upload>

showFileList boolean

Enables (if set to true) or disables (if set to false) the display of a file listing for the file upload. The disabling of a file listing might be useful if you want to customize the UI. To build your own UI, use the client-side events.

Example

<kendo:upload showFileList="showFileList">
</kendo:upload>

template java.lang.String

Sets a template for rendering the files in the file list.The template data Array consists of: name - The name of the file. If in batch upload mode, represents a string combination of all file names separated with comma.; size - The file size in bytes. If in batch upload mode, represents the total file size. If not available, the value is null. or files - An array which contains information about all selected files (name, size, and extension)..

Example

<kendo:upload template="template">
</kendo:upload>

Configuration JSP Tags

kendo:upload-async

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

More documentation is available at kendo:upload-async.

Example

<kendo:upload>
    <kendo:upload-async></kendo:upload-async>
</kendo:upload>

kendo:upload-files

The list of files that will be initially rendered in the files list of the Upload.Each file object in the array has to contain the following properties: name; size or extension.

More documentation is available at kendo:upload-files.

Example

<kendo:upload>
    <kendo:upload-files></kendo:upload-files>
</kendo:upload>

kendo:upload-localization

Sets the strings rendered by the Upload.

More documentation is available at kendo:upload-localization.

Example

<kendo:upload>
    <kendo:upload-localization></kendo:upload-localization>
</kendo:upload>

kendo:upload-validation

Configures the validation options for uploaded files.

More documentation is available at kendo:upload-validation.

Example

<kendo:upload>
    <kendo:upload-validation></kendo:upload-validation>
</kendo:upload>

Event Attributes

cancel String

Fires when the upload was cancelled while in progress.

For additional information check the cancel event documentation.

Example

<kendo:upload cancel="handle_cancel">
</kendo:upload>
<script>
    function handle_cancel(e) {
        // Code to handle the cancel event.
    }
</script>

clear String

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

For additional information check the clear event documentation.

Example

<kendo:upload clear="handle_clear">
</kendo:upload>
<script>
    function handle_clear(e) {
        // Code to handle the clear event.
    }
</script>

complete String

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

For additional information check the complete event documentation.

Example

<kendo:upload complete="handle_complete">
</kendo:upload>
<script>
    function handle_complete(e) {
        // Code to handle the complete event.
    }
</script>

error String

Fires when an upload or remove operation fails.

For additional information check the error event documentation.

Example

<kendo:upload error="handle_error">
</kendo:upload>
<script>
    function handle_error(e) {
        // Code to handle the error event.
    }
</script>

pause String

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

For additional information check the pause event documentation.

Example

<kendo:upload pause="handle_pause">
</kendo:upload>
<script>
    function handle_pause(e) {
        // Code to handle the pause event.
    }
</script>

progress String

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

For additional information check the progress event documentation.

Example

<kendo:upload progress="handle_progress">
</kendo:upload>
<script>
    function handle_progress(e) {
        // Code to handle the progress event.
    }
</script>

resume String

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.

For additional information check the resume event documentation.

Example

<kendo:upload resume="handle_resume">
</kendo:upload>
<script>
    function handle_resume(e) {
        // Code to handle the resume event.
    }
</script>

remove String

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

For additional information check the remove event documentation.

Example

<kendo:upload remove="handle_remove">
</kendo:upload>
<script>
    function handle_remove(e) {
        // Code to handle the remove event.
    }
</script>

select String

Fires when a file is selected.

For additional information check the select event documentation.

Example

<kendo:upload select="handle_select">
</kendo:upload>
<script>
    function handle_select(e) {
        // Code to handle the select event.
    }
</script>

success String

Fires when an upload or remove operation is completed successfully.

For additional information check the success event documentation.

Example

<kendo:upload success="handle_success">
</kendo:upload>
<script>
    function handle_success(e) {
        // Code to handle the success event.
    }
</script>

upload String

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

For additional information check the upload event documentation.

Example

<kendo:upload upload="handle_upload">
</kendo:upload>
<script>
    function handle_upload(e) {
        // Code to handle the upload event.
    }
</script>

Event Tags

kendo:upload-cancel

Fires when the upload was cancelled while in progress.

For additional information check the cancel event documentation.

Example

<kendo:upload>
    <kendo:upload-cancel>
        <script>
            function(e) {
                // Code to handle the cancel event.
            }
        </script>
    </kendo:upload-cancel>
</kendo:upload>

kendo:upload-clear

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

For additional information check the clear event documentation.

Example

<kendo:upload>
    <kendo:upload-clear>
        <script>
            function(e) {
                // Code to handle the clear event.
            }
        </script>
    </kendo:upload-clear>
</kendo:upload>

kendo:upload-complete

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

For additional information check the complete event documentation.

Example

<kendo:upload>
    <kendo:upload-complete>
        <script>
            function(e) {
                // Code to handle the complete event.
            }
        </script>
    </kendo:upload-complete>
</kendo:upload>

kendo:upload-error

Fires when an upload or remove operation fails.

For additional information check the error event documentation.

Example

<kendo:upload>
    <kendo:upload-error>
        <script>
            function(e) {
                // Code to handle the error event.
            }
        </script>
    </kendo:upload-error>
</kendo:upload>

kendo:upload-pause

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

For additional information check the pause event documentation.

Example

<kendo:upload>
    <kendo:upload-pause>
        <script>
            function(e) {
                // Code to handle the pause event.
            }
        </script>
    </kendo:upload-pause>
</kendo:upload>

kendo:upload-progress

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

For additional information check the progress event documentation.

Example

<kendo:upload>
    <kendo:upload-progress>
        <script>
            function(e) {
                // Code to handle the progress event.
            }
        </script>
    </kendo:upload-progress>
</kendo:upload>

kendo:upload-resume

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.

For additional information check the resume event documentation.

Example

<kendo:upload>
    <kendo:upload-resume>
        <script>
            function(e) {
                // Code to handle the resume event.
            }
        </script>
    </kendo:upload-resume>
</kendo:upload>

kendo:upload-remove

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

For additional information check the remove event documentation.

Example

<kendo:upload>
    <kendo:upload-remove>
        <script>
            function(e) {
                // Code to handle the remove event.
            }
        </script>
    </kendo:upload-remove>
</kendo:upload>

kendo:upload-select

Fires when a file is selected.

For additional information check the select event documentation.

Example

<kendo:upload>
    <kendo:upload-select>
        <script>
            function(e) {
                // Code to handle the select event.
            }
        </script>
    </kendo:upload-select>
</kendo:upload>

kendo:upload-success

Fires when an upload or remove operation is completed successfully.

For additional information check the success event documentation.

Example

<kendo:upload>
    <kendo:upload-success>
        <script>
            function(e) {
                // Code to handle the success event.
            }
        </script>
    </kendo:upload-success>
</kendo:upload>

kendo:upload-upload

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

For additional information check the upload event documentation.

Example

<kendo:upload>
    <kendo:upload-upload>
        <script>
            function(e) {
                // Code to handle the upload event.
            }
        </script>
    </kendo:upload-upload>
</kendo:upload>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy