Custom Rendering

The Upload enables you to customize the user interface of its file-list items.

To customize the appearance of the files for upload, pass a custom component to the listItemUI property. The component will receive the UploadListItemProps properties.

The following example demonstrates how to customize the rendering of the files.

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

class CustomListItemUI extends React.Component {
    render() {
        const { files } = this.props;

        return (
        <ul>
            {
                files.map(file => <li key={file.name}>{file.name}</li>)
            }
        </ul>);
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                sometext
                <Upload
                    batch={true}
                    multiple={true}
                    defaultFiles={[]}
                    withCredentials={false}
                    listItemUI={CustomListItemUI}
                    saveUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/save'}
                    removeUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'}
                />
            </div>
        );
    }
}

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