Angular FileManager - Validation

Permissions

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

The UI component also has the allowedFileExtensions property that allows you to specify file extensions allowed for display and upload in the FileManager UI component. The UI component 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 UI component allows you to configure upload settings:

  • maxFileSize Specifies the maximum upload file size. The UI component 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;