All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

Upload Overview

The Upload helps users send files from local file systems to dedicated server handlers which are configured to receive them.

The Upload wrapper for React is a client-side wrapper for the Kendo UI Upload widget.

Basic Usage

The following example demonstrates the Upload in action.

class UploadContainer extends React.Component {

    constructor(props) {
        super(props);
        this.validation = {
            allowedExtensions: [".jpg", ".txt", ".pdf"]
        }

    }
    render() {
        return (
            <div>
                <Upload validation={this.validation}/>
            </div>
        );
    }
}
ReactDOM.render(
    <UploadContainer/>,
    document.querySelector('my-app')
);

Installation

  1. Download and install the package.

    npm install --save @progress/kendo-upload-react-wrapper
  2. Once installed, import the Upload component from the package.

    import { Upload } from '@progress/kendo-upload-react-wrapper';
  3. You are required to install one of the Kendo UI themes to style your components.

Dependencies

The Upload package requires you to install the following peer dependencies in your application:

  • @progress/kendo-ui

Features and Functionalities

Events

The following example demonstrates basic Upload events. You can subscribe to all Upload events by the handler name.

class UploadContainer extends React.Component {

    constructor(props) {
        super(props);
        this.onSelect = this.onSelect.bind(this);
        this.onRemove = this.onRemove.bind(this);
        this.onSuccess = this.onSuccess.bind(this);
    }

    onSelect = (e) => {
         console.log("event :: select");
         console.log(e);
    }

    onRemove = (e) => {
         console.log("event :: remove");
         console.log(e);
    }

    onSuccess = (e) => {
         console.log("event :: success");
         console.log(e);
    }
    render() {
        return (
            <div>
                <Upload select={this.onSelect}
                    remove={this.onRemove}
                    success={this.onSuccess}/>
            </div>
        );
    }
}
ReactDOM.render(
    <UploadContainer/>,
    document.querySelector('my-app')
);
In this article