Vue FileManager File Providers

File providers are components that provide APIs used to access and modify virtual file systems. This section describes file providers supported by the FileManager.

Ajax

The Ajax file provider works with a virtual file system represented by an array of JSON objects loaded from a URL.

import AjaxFileProvider from "devextreme-vue/ajax"
Type: DxAjaxTypes.default

Assign the URL to the url option. Data object fields should have conventional names listed in the url description. Otherwise, specify [fieldName]Expr options: nameExpr, sizeExpr, dateModifiedExpr, and so on.

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

jQuery
index.js
$(function() {
    $("#fileManagerContainer").dxFileManager({
        fileProvider: new DevExpress.FileProviders.Ajax({
            url: "https://mydomain.com/data.json",
            thumbnailExpr: "icon",
            // ...
        })
        // A shortcut that can be used if object fields have conventional names
        fileProvider: "https://mydomain.com/data.json"
    });
});

Array

The Array file provider works with a virtual file system represented by an in-memory array of JSON objects.

import ArrayFileProvider from "devextreme-vue/array"
Type: DxArrayTypes.default

Assign the array to the data option. Data object fields should have conventional names listed in the data description. Otherwise, specify [fieldName]Expr options: nameExpr, sizeExpr, dateModifiedExpr, and so on.

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

jQuery
index.js
$(function() {
    $("#fileManagerContainer").dxFileManager({
        fileProvider: new DevExpress.FileProviders.Array({
            data: [ 
                // ...
                // Data objects that represent files and directories
                // ...
            ],
            thumbnailExpr: "icon",
            // ...
        })
        // A shortcut that can be used if object fields have conventional names
        fileProvider: [ 
            // ...
            // Data objects that represent files and directories
            // ...
        ]
    });
});

View Demo

Custom

A custom provider allows you to implement custom APIs to access and use file systems.

import CustomFileProvider from "devextreme-vue/custom"
Type: DxCustomTypes.default

Use the custom provider's methods to handle file operations (add, delete, rename, and so on).

The following code shows how to create a custom provider and bind the FileManager widget to it:

jQuery
index.js
$(function () {
    $("#file-manager").dxFileManager({ 
        fileProvider: new DevExpress.fileProviders.Custom({ 
            getItems: function(pathInfo) { 
                // Your code goes here
            }, 
            renameItem: function(item, name) { 
                // Your code goes here
            }, 
            createDirectory: function(parentDir, name) { 
                // Your code goes here
            }, 
            deleteItem: function(item) { 
                // Your code goes here
            }, 
            moveItem: function(item, destinationDir) { 
                // Your code goes here
            }, 
            copyItem: function(item, destinationDir) { 
                // Your code goes here
            }, 
            uploadFileChunk: function(fileData, chunksInfo, destinationDir) { 
                // Your code goes here
            }, 
            abortFileUpload: function(fileData, chunksInfo, destinationDir) { 
                // Your code goes here
            }, 
            uploadChunkSize: 1000 
        }) 
    });
});

Remote

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

import RemoteFileProvider from "devextreme-vue/remote"
Type: DxRemoteTypes.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: false,
    hasSubDirectories: false
}

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 Remote file provider:

jQuery
index.js
$(function() {
    $("#fileManagerContainer").dxFileManager({
        fileProvider: new DevExpress.FileProviders.Remote({
            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