Upload / Modes of Operation
material theme

Modes of Operation

The Upload enables you to manage the files for upload that will be rendered by setting the Upload into its controlled or uncontrolled mode.

Controlled Mode

To enable the controlled mode of the files for upload:

  1. Set the files property.
  2. Subscribe to the following events for updates:
import React from 'react';
import ReactDOM from 'react-dom';
import { Upload } from '@progress/kendo-react-upload';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            files: []
        };
    }
    onAdd = (event) => {
        console.log('onAdd: ', event.affectedFiles);

        this.setState({
            files: event.newState
        });
    }

    onRemove = (event) => {
        console.log('onRemove: ', event.affectedFiles);

        this.setState({
            files: event.newState
        });
    }

    onProgress = (event) => {
        console.log('onProgress: ', event.affectedFiles, event.serverResponse);

        this.setState({
            files: event.newState
        });
    }

    onStatusChange = (event) => {
        console.log('onStatusChange: ', event.affectedFiles, event.serverResponse);

        this.setState({
            files: event.newState
        });
    }

    render() {
        return (
            <Upload
                batch={false}
                multiple={true}
                files={this.state.files}
                onAdd={this.onAdd}
                onRemove={this.onRemove}
                onProgress={this.onProgress}
                onStatusChange={this.onStatusChange}
                withCredentials={false}
                saveUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/save'}
                removeUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Uncontrolled Mode

To enable uncontrolled mode of the files for upload, set the initial list of files by using the defaultFiles property.

import React from 'react';
import ReactDOM from 'react-dom';
import { Upload, UploadFileStatus } from '@progress/kendo-react-upload';

class App extends React.Component {
    render() {
        return (
            <Upload
                batch={false}
                multiple={true}
                defaultFiles={[
                    { name: 'Picture1', extention: '.jpg', size: 4000, progress: 0, status: UploadFileStatus.Initial }
                ]}
                withCredentials={false}
                saveUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/save'}
                removeUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /