React FileManager - Remote.Configuration
beforeAjaxSend
Type:
Function parameters:
options:
Object structure:
Name | Type | Description |
---|---|---|
formData |
Custom data (key/value pairs) that is sent to the server with the request. |
|
headers |
The request headers. |
|
xhrFields |
An object (fieldName/fieldValue pairs) to set on the native XMLHttpRequest object. |
NOTE
Use the beforeSubmit function to customize the file download requests.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import FileManager from 'devextreme-react/file-manager';
- import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';
- const remoteFileProvider = new RemoteFileSystemProvider({
- endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts",
- beforeAjaxSend: function({ headers, formData, xhrFields }) {
- headers.RequestVerificationToken = document.getElementsByName("__RequestVerificationToken")[0].value;
- formData.dataValue = "some data";
- xhrFields.withCredentials = true;
- }
- });
- class App extends React.Component {
- render() {
- return (
- <FileManager
- fileSystemProvider={remoteFileProvider}>
- {/* ... */}
- </FileManager>
- );
- }
- }
- export default App;
beforeSubmit
Type:
NOTE
Use the beforeSubmit function to customize the file download requests only. To customize other Ajax requests (for example, file upload requests), use the beforeAjaxSend function.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import FileManager from 'devextreme-react/file-manager';
- import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';
- const remoteFileProvider = new RemoteFileSystemProvider({
- endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts",
- beforeSubmit: function({ formData }) {
- formData.value = document.getElementsByName("__RequestVerificationToken")[0].value;
- }
- });
- class App extends React.Component {
- render() {
- return (
- <FileManager
- fileSystemProvider={remoteFileProvider}>
- {/* ... */}
- </FileManager>
- );
- }
- }
- export default App;
requestHeaders
Type:
any
Default Value: {}
NOTE
The requestHeaders option is not in effect for the file download requests.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import FileManager from 'devextreme-react/file-manager';
- import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';
- const remoteFileProvider = new RemoteFileSystemProvider({
- endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts",
- requestHeaders: {
- YourHeaderName: "YourHeaderValue"
- }
- });
- class App extends React.Component {
- render() {
- return (
- <FileManager
- fileSystemProvider={remoteFileProvider}>
- {/* ... */}
- </FileManager>
- );
- }
- }
- export default App;
thumbnailExpr
The data field can contain one of the following:
- The icon's URL
- The icon's name if the icon is from the DevExtreme icon library
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
- The icon in the Base64 format
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.