DevExtreme Vue - 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.js
  • 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';
  • const allowedFileExtensions = ['.txt', '.doc', '.png'];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <FileManager allowedFileExtensions={allowedFileExtensions}>
  • <Upload maxFileSize={1000000} />
  • <Permissions
  • create={true}
  • copy={true}
  • download={true}
  • move={true}
  • remove={true}
  • rename={true}
  • download={true} />
  • </FileManager>
  • );
  • }
  • }
  • export default App;