The Upload enables you to manage the files for upload that will be rendered by setting the Upload into its controlled or uncontrolled mode.
To enable the controlled mode of the files for upload:
files property.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')
);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')
);