DevExtreme React - Validation

Permissions

Use the permissions option to specify whether a user is allowed to copy, create, download, move, remove, rename, or upload files and folders in the FileManager widget.

The widget also allows you to specify the following restrictions:

  • allowedFileExtensions option - Specifies file extensions that can be displayed and uploaded in the FileManager widget. The widget cannot upload and displays an error message if a user attempts to upload files with restricted extensions.

    DevExtreme File Manager - Allowed File Extension

  • maxFileSize option - Specifies the maximum upload file size. The widget does not upload a file and displays the following error message when the file's size exceeds the allowed size:

    DevExtreme File Manager - Max File Size

App.vue
  • <template>
  • <DxFileManager :allowed-file-extensions="allowedFileExtensions">
  • <DxUpload :max-file-size="1000000" />
  • <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,
  • DxUpload
  • } from 'devextreme-vue/file-manager';
  •  
  • export default {
  • components: {
  • DxFileManager,
  • DxPermissions,
  • DxUpload
  • },
  • data() {
  • return {
  • allowedFileExtensions: ['.txt', '.doc', '.png']
  • };
  • }
  • };
  • </script>