Vue FileManager - Custom
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 file system provider and bind the FileManager UI component to it:
jQuery
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 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 }, // ... }) }); });
Angular
<dx-file-manager [fileSystemProvider]="fileSystemProvider"> </dx-file-manager>
import { Component } from '@angular/core'; import CustomFileSystemProvider from 'devextreme/file_management/custom_provider'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { fileSystemProvider: CustomFileSystemProvider; constructor(http: HttpClient) { this.fileSystemProvider = new CustomFileSystemProvider({ getItems, createDirectory, renameItem, deleteItem, // ... }); } } function getItems(parentDirectory) { // ... } // other functions
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="fileSystemProvider"> </DxFileManager> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxFileManager } from 'devextreme-vue/file-manager'; import CustomFileSystemProvider from 'devextreme/file_management/custom_provider'; export default { components: { DxFileManager }, data() { return { fileSystemProvider: new CustomFileSystemProvider({ getItems, createDirectory, renameItem, deleteItem, // ... }), }; } }; function getItems(parentDirectory) { // ... } // other functions </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import FileManager from 'devextreme-react/file-manager'; import CustomFileSystemProvider from 'devextreme/file_management/custom_provider'; class App extends React.Component { render() { constructor() { super(); this.fileSystemProvider = new CustomFileSystemProvider({ getItems, createDirectory, renameItem, deleteItem, // ... }); } return ( <FileManager fileSystemProvider={fileSystemProvider}> </FileManager> ); } } function getItems(parentDirectory) { // ... } // other functions export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .GetItems("getItems") .CreateDirectory("createDirectory") .RenameItem("renameItem") .DeleteItem("deleteItem") // ... ) ) <script> function getItems(parentDirectory) { // ... } // other functions </script>
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .GetItems("getItems") .CreateDirectory("createDirectory") .RenameItem("renameItem") .DeleteItem("deleteItem") // ... ) ) <script> function getItems(parentDirectory) { // ... } // other functions </script>
Configuration
Name | Description |
---|---|
abortFileUpload |
A function that cancels the file upload. |
copyItem |
A function that copies files or directories. |
createDirectory |
A function that creates a directory. |
dateModifiedExpr |
Specifies which data field provides timestamps that indicate when a file was last modified. |
deleteItem |
A function that deletes a file or directory. |
downloadItems |
A function that downloads files. |
getItems |
A function that gets file system items. |
getItemsContent |
A function that get items content. |
hasSubDirectoriesExpr |
A function or the name of a data source field that provides information on whether a file or directory contains sub directories. |
isDirectoryExpr |
Specifies which data field provides information about whether a file system item is a directory. |
keyExpr |
Specifies the data field that provides keys. |
moveItem |
A function that moves files and directories. |
nameExpr |
Specifies which data field provides file and directory names. |
renameItem |
A function that renames files and directories. |
sizeExpr |
Specifies which data field provides file sizes. |
thumbnailExpr |
Specifies which data field provides icons to be used as thumbnails. |
uploadFileChunk |
A function that uploads a file in chunks. |
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.