Vue FileManager - Web API

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

import WebApiFileProvider from "devextreme-vue/webapi"
Type: DxWebapiTypes.default

Set the endpointUrl option 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 options: nameExpr, sizeExpr, dateModifiedExpr, and so on.

The following code shows how to bind the FileManager to the Web API file provider:

jQuery
index.js
$(function() {
    $("fileManagerContainer").dxFileManager({
        fileProvider: new DevExpress.FileProviders.WebApi({
            endpointUrl: "https://mydomain.com/api/files",
            thumbnailExpr: "icon",
            // ...
        })
    });
});

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 options that configure the Web API file 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.
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.