Permissions
Use the permissions property to specify whether to allow or deny a user to manage files and directories 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
index.js
$(function () {
$("#file-manager").dxFileManager({
permissions: {
create: true,
copy: true,
download: true,
move: true,
remove: true,
rename: true,
upload: true
},
allowedFileExtensions: [".txt", ".doc", ".png"]
// ...
});
}); Angular
app.component.html
app.component.ts
app.module.ts
<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
App.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.light.css';
import {
DxFileManager,
DxPermissions
} from 'devextreme-vue/file-manager';
export default {
components: {
DxFileManager,
DxPermissions
},
data() {
return {
allowedFileExtensions: ['.txt', '.doc', '.png']
};
}
};
</script>React
App.js
import React from 'react';
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
index.js
$(function () {
$("#file-manager").dxFileManager({
permissions: {
upload: true
},
upload: {
maxFileSize: 1000000,
chunkSize: 500000
},
// ...
});
}); Angular
app.component.html
app.component.ts
app.module.ts
<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
App.vue
<template>
<DxFileManager>
<DxUpload :max-file-size="1000000" :chunk-size="500000" />
<DxPermissions :upload="true" />
</DxFileManager>
</template>
<script>
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
App.js
import React from 'react';
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;Feedback