Angular FileUploader - File Validation
The FileUploader allows you to restrict the extension (allowedFileExtensions) and size (minFileSize and maxFileSize) of the file being uploaded. Note that the minimum and maximum file sizes should be specified in bytes:
jQuery
$(function() { $("#fileUploaderContainer").dxFileUploader({ // ... allowedFileExtensions: [".jpg", ".png"], minFileSize: 1024, // 1 KB maxFileSize: 1024 * 1024 // 1 MB }); });
Angular
<dx-file-uploader ... [allowedFileExtensions]="['.jpg', '.png']" [minFileSize]="1024" <!-- 1 KB --> [maxFileSize]="1024 * 1024"> <!-- 1 MB --> </dx-file-uploader>
import { DxFileUploaderModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxFileUploaderModule ], // ... })
Vue
<template> <DxFileUploader :allowed-file-extensions="allowedFileExtensions" :min-file-size="1024" :max-file-size="1024*1024" > </DxFileUploader> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxFileManager } from 'devextreme-vue/file-uploader'; export default { components: { DxFileUploader }, data() { return { allowedFileExtensions: ['.jpeg', '.png'] }; } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import FileUploader from 'devextreme-react/file-uploader'; const allowedFileExtensions = ['.jpeg', '.png']; class App extends React.Component { render() { return ( <FileUploader allowedFileExtensions={allowedFileExtensions} maxFileSize={1024*1024} minFileSize={1024} > </FileUploader> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().FileUploader() .AllowedFileExtensions(new[] { ".jpeg", ".png" }) .MaxFileSize(1024*1024) .MinFileSize(1024) // ... )
ASP.NET Core Controls
@(Html.DevExtreme().FileUploader() .AllowedFileExtensions(new[] { ".jpeg", ".png" }) .MaxFileSize(1024*1024) .MinFileSize(1024) // ... )
Files are validated on the client. However, you should also implement server-side validation. Refer to the demo below to see an example for an ASP.NET server.
If you have technical questions, please create a support ticket in the DevExpress Support Center.