Name	Type	Description
formData	Object	Custom data (key/value pairs) that is sent to the server with the request.
headers	Object	The request headers.
xhrFields	Object	An object (fieldName/fieldValue pairs) to set on the native XMLHttpRequest object.

Name

Type

Description

formData

Object

Custom data (key/value pairs) that is sent to the server with the request.

headers

Object

The request headers.

xhrFields

Object

An object (fieldName/fieldValue pairs) to set on the native XMLHttpRequest object.

NOTE

Use the beforeSubmit function to customize the file download requests.

jQuery

index.js

$(function() {
    $("#fileManagerContainer").dxFileManager({
        fileSystemProvider: new DevExpress.fileManagement.RemoteFileSystemProvider({
            // ...
            beforeAjaxSend: function({ headers, formData, xhrFields }) {
                headers.RequestVerificationToken = document.getElementsByName("__RequestVerificationToken")[0].value;
                formData.dataValue = "some data";
                xhrFields.withCredentials = true;
            }  
        })
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-file-manager id="fileManager"
    [fileSystemProvider]="remoteFileProvider">
    <!-- ... -->
</dx-file-manager>

import { Component } from '@angular/core';
import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';

@Component({
    selector: 'app-root',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css']
})  

export class AppComponent {
    remoteFileProvider: RemoteFileSystemProvider;

    constructor(http: HttpClient) {
        this.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;
            }  
        });
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileManagerModule } from 'devextreme-angular';

@NgModule({
    imports: [
        BrowserModule,
        DxFileManagerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxFileManager
        :file-system-provider="remoteFileProvider">
        <!-- ... -->
    </DxFileManager>
</template>

<script>
import 'devextreme/dist/css/dx.light.css'; 

import { DxFileManager } from 'devextreme-vue/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;
    }  
});

export default {
    components: {
        DxFileManager
    },
    data() {
        return {
            remoteFileProvider
        };
    }
};
</script>

React

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

Specifies a function that customizes a form submit request before it is sent to the server.

Type:

Function

Function parameters:

options:

Object

The request parameters.

Object structure:

Name	Type	Description
formData	Object	Custom data (key-value pairs) that are sent to the server with the request.

Name

Type

Description

formData

Object

Custom data (key-value pairs) that are sent to the server with the request.

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.

jQuery

index.js

$(function() {
    $("#fileManagerContainer").dxFileManager({
        fileSystemProvider: new DevExpress.fileManagement.RemoteFileSystemProvider({
            // ...
            beforeSubmit: function({ formData }) {
                formData.value = document.getElementsByName("__RequestVerificationToken")[0].value;
            }  
        })
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-file-manager id="fileManager"
    [fileSystemProvider]="remoteFileProvider">
    <!-- ... -->
</dx-file-manager>

import { Component } from '@angular/core';
import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';

@Component({
    selector: 'app-root',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css']
})  

export class AppComponent {
    remoteFileProvider: RemoteFileSystemProvider;

    constructor(http: HttpClient) {
        this.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;
            }  
        });
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileManagerModule } from 'devextreme-angular';

@NgModule({
    imports: [
        BrowserModule,
        DxFileManagerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxFileManager
        :file-system-provider="remoteFileProvider">
        <!-- ... -->
    </DxFileManager>
</template>

<script>
import 'devextreme/dist/css/dx.light.css'; 

import { DxFileManager } from 'devextreme-vue/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;
    }  
});

export default {
    components: {
        DxFileManager
    },
    data() {
        return {
            remoteFileProvider
        };
    }
};
</script>

React

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;

dateModifiedExpr

Specifies which data field provides timestamps that indicate when a file was last modified.

Type:

String

Function

Specifies the request headers.

Type: any

Default Value: {}

NOTE

The requestHeaders option is not in effect for the file download requests.

jQuery

index.js

$(function() {
    $("#fileManagerContainer").dxFileManager({
        fileSystemProvider: new DevExpress.fileManagement.RemoteFileSystemProvider({
            endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts",
            requestHeaders: {
                YourHeaderName: "YourHeaderValue"
            },
            // ...
        })
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-file-manager id="fileManager"
    [fileSystemProvider]="remoteFileProvider">
    <!-- ... -->
</dx-file-manager>

import { Component } from '@angular/core';
import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';

@Component({
    selector: 'app-root',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css']
})  

export class AppComponent {
    remoteFileProvider: RemoteFileSystemProvider;

    constructor(http: HttpClient) {
        this.remoteFileProvider = new RemoteFileSystemProvider({
            endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts",
            requestHeaders: {
                YourHeaderName: "YourHeaderValue"
            }
        });
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileManagerModule } from 'devextreme-angular';

@NgModule({
    imports: [
        BrowserModule,
        DxFileManagerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxFileManager
        :file-system-provider="remoteFileProvider">
        <!-- ... -->
    </DxFileManager>
</template>

<script>
import 'devextreme/dist/css/dx.light.css'; 

import { DxFileManager } from 'devextreme-vue/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"
    }
});

export default {
    components: {
        DxFileManager
    },
    data() {
        return {
            remoteFileProvider
        };
    }
};
</script>

React

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;

sizeExpr

Specifies which data field provides file sizes.

Type:

String

Function

thumbnailExpr

Specifies which data field provides icons to be used as thumbnails.

Type:

String

Function

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

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery FileManager - Remote.Configuration

beforeAjaxSend

jQuery

Angular

Vue

React

beforeSubmit

jQuery

Angular

Vue

React

dateModifiedExpr

endpointUrl

hasSubDirectoriesExpr

isDirectoryExpr

keyExpr

nameExpr

requestHeaders

jQuery

Angular

Vue

React

sizeExpr

thumbnailExpr