Permissions
Use the permissions property to specify whether to allow or deny a user to manage files and folders in the FileManager UI component: copy, create, download, move, remove, rename, or upload.
The UI component also has the allowedFileExtensions property that allows you to specify file extensions allowed for display and upload in the FileManager UI component. The UI component fails to upload and displays the error message if a user tries to upload files with restricted extensions.
jQuery
$(function () { $("#file-manager").dxFileManager({ permissions: { create: true, copy: true, download: true, move: true, remove: true, rename: true, upload: true }, allowedFileExtensions: [".txt", ".doc", ".png"] // ... }); });
Angular
<dx-file-manager id="fileManager" [allowedFileExtensions]="allowedFileExtensions" > <dxo-permissions [create]="true" [copy]="true" [download]="true" [move]="true" [remove]="true" [rename]="true" [upload]="true"> </dxo-permissions> <!-- ... --> </dx-file-manager>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { allowedFileExtensions: string[]; constructor() { this.allowedFileExtensions = [".txt", ".doc", ".png"]; } //... }
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 :allowed-file-extensions="allowedFileExtensions"> <DxPermissions :create="true" :copy="true" :download="true" :move="true" :remove="true" :rename="true" :upload="true" /> </DxFileManager> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxFileManager, DxPermissions } from 'devextreme-vue/file-manager'; export default { components: { DxFileManager, DxPermissions }, data() { return { allowedFileExtensions: ['.txt', '.doc', '.png'] }; } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import FileManager, { Permissions } from 'devextreme-react/file-manager'; const allowedFileExtensions = ['.txt', '.doc', '.png']; class App extends React.Component { render() { return ( <FileManager allowedFileExtensions={allowedFileExtensions}> <Permissions create={true} copy={true} download={true} move={true} remove={true} rename={true} download={true} /> </FileManager> ); } } export default App;
Upload Settings
The UI component allows you to configure upload settings:
maxFileSize Specifies the maximum upload file size. The UI component does not upload a file and displays the following error message when the file's size exceeds the maximum upload file size.
chunkSize Specifies a chunk size to divide a large file in parts and upload them in separate requests.
jQuery
$(function () { $("#file-manager").dxFileManager({ permissions: { upload: true }, upload: { maxFileSize: 1000000, chunkSize: 500000 }, // ... }); });
Angular
<dx-file-manager id="fileManager"> <dxo-upload [maxFileSize]="1000000" [chunkSize]="500000"> </dxo-upload> <dxo-permissions [upload]="true"> </dxo-permissions> <!-- ... --> </dx-file-manager>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { //... }
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> <DxUpload :max-file-size="1000000" :chunk-size="500000" /> <DxPermissions :upload="true" /> </DxFileManager> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxFileManager, DxPermissions, DxUpload } from 'devextreme-vue/file-manager'; export default { components: { DxFileManager, DxPermissions, DxUpload }, data() { return { //... }; } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import FileManager, { Upload, Permissions } from 'devextreme-react/file-manager'; class App extends React.Component { render() { return ( <FileManager> <Upload maxFileSize={1000000} chunkSize={500000} /> <Permissions upload={true} /> </FileManager> ); } } export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.