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.

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

|

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