DevExtreme Angular - 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

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"],
        upload: {
            maxFileSize: 1000000
        },
        // ...
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-file-manager id="fileManager" 
    [allowedFileExtensions]="allowedFileExtensions" >
    <dxo-upload [maxFileSize]="1000000"></dxo-upload>
    <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">   
        <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>
React
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;