DevExtreme Vue - 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
JavaScript
$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        allowedFileExtensions: [".jpg", ".png"],
        minFileSize: 1024, // 1 KB
        maxFileSize: 1024 * 1024 // 1 MB
    });
});
Angular
HTML
TypeScript
<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
    ],
    // ...
})

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.

View Demo