Vue FileManager - 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

Props

This section describes options that configure the Array file provider.

Name Description
data

Specifies an array of data objects that represent files and directories.
dateModifiedExpr

Specifies which data field provides timestamps that indicate when a file was last modified.
isDirectoryExpr

Specifies which data field provides information about whether a file system item is a directory.
itemsExpr

Specifies which data field provides information about nested files and directories.
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
getItemContent()

Gets the specified items' content.