Vue FileManager - Remote

The Remote file system provider works with a file system located on the server.

import RemoteFileSystemProvider from "devextreme/file_management/remote_provider"

Type:

Set the endpointUrl property to specify the endpoint used to access and modify the file system.

The server should return data objects of the following structure:

{
    name: "MyFile.jpg",
    size: 1024,
    dateModified: "2019/05/08",
    thumbnail: "/thumbnails/images/jpeg.ico",
    isDirectory: true,
    hasSubDirectories: true
}

Fields in this structure have conventional names that you can change via [fieldName]Expr properties: nameExpr, sizeExpr, dateModifiedExpr, and so on.

The following code shows how to bind the FileManager to the Remote file system provider:

jQuery

index.js

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

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() {
        this.remoteFileProvider = new RemoteFileSystemProvider({
            endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts"
        });
    }
}

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'
});

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'
});

class App extends React.Component {
    render() {
        return (
            <FileManager 
                fileSystemProvider={remoteFileProvider}>
                {/* ... */}
            </FileManager>
        );
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Remote()
        .Url(Url.RouteUrl("FileManagerDBProviderApi")))
)

<!--FileManagerDBProviderApiController-->
[Route("api/file-manager-file-system", Name = "FileManagementFileSystemApi")]
public object FileSystem(FileSystemCommand command, string arguments) {
    var config = new FileSystemConfiguration {
        Request = Request,
        FileSystemProvider = new PhysicalFileSystemProvider(_hostingEnvironment.ContentRootPath + "/wwwroot"),
        // ...
    };
    var processor = new FileSystemCommandProcessor(config);
    var result = processor.Execute(command, arguments);
    return result.GetClientCommandResult();
}

ASP.NET Core Controls

Razor C#

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Remote()
        .Url(Url.RouteUrl("FileManagerDBProviderApi")))
)

<!--FileManagerDBProviderApiController-->
[Route("api/file-manager-file-system", Name = "FileManagementFileSystemApi")]
public object FileSystem(FileSystemCommand command, string arguments) {
    var config = new FileSystemConfiguration {
        Request = Request,
        FileSystemProvider = new PhysicalFileSystemProvider(_hostingEnvironment.ContentRootPath + "/wwwroot"),
        // ...
    };
    var processor = new FileSystemCommandProcessor(config);
    var result = processor.Execute(command, arguments);
    return result.GetClientCommandResult();
}

On the server-side, you need to process file management requests. DevExtreme provides helpers for ASP.NET MVC and ASP.NET Core that do this. To view the server-side code, navigate to the FileManagerApiController.cs tab in the following demo:

View Demo

Props

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

Name	Description
dateModifiedExpr	Specifies which data field provides timestamps that indicate when a file was last modified.
endpointUrl	Specifies the URL of an endpoint used to access and modify a file system located on the server.
hasSubDirectoriesExpr	Specifies which data field provides information about whether a directory has subdirectories.
isDirectoryExpr	Specifies which data field provides information about whether a file system item is a directory.
keyExpr	Specifies the data field that provides keys.
nameExpr	Specifies which data field provides file and directory names.
sizeExpr	Specifies which data field provides file sizes.
thumbnailExpr	Specifies which data field provides icons to be used as thumbnails.

Methods

This section describes members used to manage file system items.

Name	Description
abortFileUpload()	Cancels the file upload.
copyItems()	Copies files or folders.
createDirectory()	Creates a directory.
deleteItems()	Deletes files or folders.
downloadItems()	Downloads files.
getItems()	Gets file system items.
getItemsContent()	Gets items content.
moveItems()	Moves files and folders.
renameItem()	Renames a file or folder.
uploadFileChunk()	Uploads a file in chunks.