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

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 { }