Vue FileManager - Remote.Configuration

This section describes properties that configure the Remote file system provider.

beforeAjaxSend

Specifies a function that customizes an Ajax 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 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.

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

endpointUrl

Specifies the URL of an endpoint used to access and modify a file system located on the server.

Type:

String

hasSubDirectoriesExpr

Specifies which data field provides information about whether a directory has subdirectories.

Type:

String

|

Function

isDirectoryExpr

Specifies which data field provides information about whether a file system item is a directory.

Type:

String

|

Function

keyExpr

Specifies the data field that provides keys.

Type:

String

|

Function

nameExpr

Specifies which data field provides file and directory names.

Type:

String

|

Function

requestHeaders

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: