Credentials and Additional Data

During file upload or removal, you can control whether or not to send cookies and headers for cross-site requests, or additional data.

Attaching Credentials to Requests

You can control whether or not the request will use credentials by setting the withCredentials option. By default, withCredentials is set to true.

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

class App extends React.Component {
    render() {
        return (
            <Upload
                batch={false}
                multiple={true}
                defaultFiles={[]}
                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')
);

Attaching Additional Data to Requests

You can also send additional data in the form of key/value pairs and modify the request headers.

Depending on when the data will be sent:

  • In the onBeforeUpload event handler, update the additionalData or headers property of the event
  • In the onBeforeRemove event handler, update the additionalData or headers property of the event
import React from 'react';
import ReactDOM from 'react-dom';
import { Upload } from '@progress/kendo-react-upload';

class App extends React.Component {
    onBeforeUpload = (event) => {
        event.additionalData.description = 'File upload';
    }

    onBeforeRemove = (event) => {
        event.additionalData.description = 'File remove';
    }

    render() {
        return (
            <Upload
                batch={false}
                multiple={true}
                defaultFiles={[]}
                onBeforeUpload={this.onBeforeUpload}
                onBeforeRemove={this.onBeforeRemove}
                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')
);
 /