React FileManager - Object
The Object file system provider works with a file system represented by an in-memory array of JSON objects.
Assign the array to the data property. Data object fields should have conventional names listed in the data description. Otherwise, specify [fieldName]Expr properties: nameExpr, sizeExpr, dateModifiedExpr, and so on.
The following code shows how to bind the FileManager to the Object file system provider:
jQuery
$(function() { $("#file-manager").dxFileManager({ fileSystemProvider: fileSystem, // ... }); });
var fileSystem = [ { name: "Documents", isDirectory: true, items: [{ name: "Projects", isDirectory: true, items: [{ name: "About.rtf", isDirectory: false, size: 1024 }, { name: "Passwords.rtf", isDirectory: false, size: 2048 }] }, { name: "About.xml", isDirectory: false, size: 1024 }] }];
Angular
<dx-file-manager id="fileManager" [fileSystemProvider]="fileItems"> </dx-file-manager>
import { Component } from '@angular/core'; import ObjectFileSystemProvider from 'devextreme/file_management/object_provider'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { fileItems = [{ name: "Documents", isDirectory: true, items: [{ name: "Projects", isDirectory: true, items: [{ name: "About.rtf", isDirectory: false, size: 1024 }, { name: "Passwords.rtf", isDirectory: false, size: 2048 }] },{ name: "About.xml", isDirectory: false, size: 1024 }] }]; }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxFileManagerModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxFileManagerModule ], //... }) export class AppModule { }
Vue
<template> <DxFileManager :file-system-provider="fileItems"> </DxFileManager> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxFileManager } from 'devextreme-vue/file-manager'; import { fileItems } from "./data.js"; export default { components: { DxFileManager }, data() { return { fileItems }; } }; </script>
export const fileItems = [{ 'name': 'Documents', 'isDirectory': true, 'items': [{ 'name': 'Projects', 'isDirectory': true, 'items': [{ 'name': 'About.rtf', 'isDirectory': false, 'size': 1024 }, { 'name': 'Passwords.rtf', 'isDirectory': false, 'size': 2048 }] }, { 'name': 'About.xml', 'isDirectory': false, 'size': 1024 }] }];
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import FileManager from 'devextreme-react/file-manager'; import ObjectFileSystemProvider from 'devextreme/file_management/object_provider'; class App extends React.Component { render() { return ( <FileManager fileSystemProvider={fileItems}> </FileManager> ); } } export default App;
export const fileItems = [{ 'name': 'Documents', 'isDirectory': true, 'items': [{ 'name': 'Projects', 'isDirectory': true, 'items': [{ 'name': 'About.rtf', 'isDirectory': false, 'size': 1024 }, { 'name': 'Passwords.rtf', 'isDirectory': false, 'size': 2048 }] }, { 'name': 'About.xml', 'isDirectory': false, 'size': 1024 }] }];
ASP.NET MVC Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(new JS("fileSystem")) ) <script src="~/data/fileSystem.js"></script>
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(new JS("fileSystem")) ) <script src="~/data/fileSystem.js"></script>
Props
This section describes properties that configure the Object file system provider.
Name | Description |
---|---|
contentExpr | Specifies which data field provides information about files content. |
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 |
---|---|
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. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.