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 has the allowedFileExtensions option that allows you to specify 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

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.common.css';
    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.common.css';
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 widget allows you to configure upload settings:

  • maxFileSize 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

  • 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.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 {
            //...
        };
    }            
};
</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';

class App extends React.Component {
    render() {
        return (
            <FileManager>
                <Upload 
                    maxFileSize={1000000} 
                    chunkSize={500000} />
                <Permissions
                    upload={true} />
            </FileManager>
        );
    }
}
export default App;