Angular FileManager - Remote

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

import RemoteFileSystemProvider from "devextreme/file_management/remote_provider"

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:

Code

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

Fields in this structure have predefined names that FileManager uses in the default configuration. To use custom field names, configure [fieldName]Expr properties such as the following:

The following code snippet binds the FileManager to a RemoteFileSystemProvider:

jQuery

index.js

$("#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

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

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

@Component({
    imports: [DxFileManagerModule], // ...
})
export class AppComponent {
    remoteFileProvider: RemoteFileSystemProvider;

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

Vue

App.vue

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

<script setup lang="ts">
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'
});
</script>

React

App.tsx

import React from 'react';
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'
});

export default function App() {
    return (
        <FileManager 
            fileSystemProvider={remoteFileProvider}
        />
    );
}

ASP.NET MVC Controls

Razor C#

FileSystemApiController.cs

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

[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#

FileSystemApiController.cs

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

[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, process file management requests. DevExtreme includes request-processing helpers for ASP.NET MVC and ASP.NET Core. For an implementation example, enable the Backend API toggle in the following demo and review FileManagerScriptsApiController.cs:

View Demo

You can also use remote file system providers with other DevExtreme components. The following example integrates RemoteFileSystemProvider with the DevExtreme TreeList:

View on GitHub

Properties

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

Name	Description
beforeAjaxSend	Specifies a function that customizes an Ajax request before it is sent to the server.
beforeSubmit	Specifies a function that customizes a form submit request before it is sent to the server.
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.
requestHeaders	Specifies the request headers.
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 directories.
createDirectory()	Creates a directory.
deleteItems()	Deletes files or directories.
downloadItems()	Downloads files.
getItems()	Gets file system items.
getItemsContent()	Gets items content.
moveItems()	Moves files and directories.
renameItem()	Renames a file or directory.
uploadFileChunk()	Uploads a file in chunks.