You are viewing help content for pre-release software. This document and the features it describes are subject to change. Switch to the current version.
All docs
V20.1
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

Validation

Permissions

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

The widget also allows you to specify the following restrictions:

  • allowedFileExtensions option - Specifies file extensions allowed for display and upload in the FileManager widget. The widget fails to upload and displays the error message if a user tries 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 maximum upload file 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;