JavaScript/jQuery 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>
Configuration
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
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.