Add a @minFileSizeKB argument to the <AuFileUpload> component (#532)

Author: aatauil

addon/components/au-file-upload.gts

@@ -20,6 +20,7 @@ export interface AuFileUploadSignature {
     helpTextDragDrop?: string;
     helpTextFileNotSupported?: string;
     maxFileSizeMB?: number;
+    minFileSizeKB?: number;
     multiple?: boolean;
     onFinishUpload?: (uploadedFile: number, queueInfo: QueueInfo) => void;
     onQueueUpdate?: (queueInfo: QueueInfo) => void;
@@ -87,6 +88,10 @@ export default class AuFileUpload extends Component<AuFileUploadSignature> {
     return this.args.maxFileSizeMB || 20;
   }
 
+  get minFileSizeKB() {
+    return this.args.minFileSizeKB || 0;
+  }
+
   get hasErrors() {
     return this.uploadErrorData.length > 0;
   }
@@ -138,7 +143,17 @@ export default class AuFileUpload extends Component<AuFileUploadSignature> {
       }
     }
 
-    if (!isValidFileSize(file.size, this.maxFileSizeMB)) {
+    if (file.size === 0) {
+      this.addError(file, 'Bestand is leeg (0 bytes)');
+      return false;
+    }
+
+    if (file.size < this.minFileSizeKB * 1024) {
+      this.addError(file, `Bestand is te klein (min ${this.minFileSizeKB} KB)`);
+      return false;
+    }
+
+    if (file.size >= this.maxFileSizeMB * Math.pow(1024, 2)) {
       this.addError(file, `Bestand is te groot (max ${this.maxFileSizeMB} MB)`);
       return false;
     }
@@ -301,7 +316,3 @@ function isValidExtension(
 ): boolean {
   return validExtensions.includes(extension);
 }
-
-function isValidFileSize(fileSize: number, maximumSize: number): boolean {
-  return fileSize < maximumSize * Math.pow(1024, 2);
-}

stories/5-components/Forms/AuFileUpload.stories.js

@@ -25,6 +25,10 @@ export default {
       control: 'number',
       description: 'Maximum filesize allowed (in MB)',
     },
+    minFileSizeKB: {
+      control: 'number',
+      description: 'Minimum filesize allowed (in KB)',
+    },
     multiple: {
       control: 'boolean',
       description: 'Whether multiple files can be selected when uploading',
@@ -52,6 +56,7 @@ const Template = (args) => ({
       @helpTextDragDrop={{this.helpTextDragDrop}}
       @helpTextFileNotSupported={{this.helpTextFileNotSupported}}
       @maxFileSizeMB={{this.maxFileSizeMB}}
+      @minFileSizeKB={{this.minFileSizeKB}}
       @multiple={{this.multiple}}
       @onFinishUpload={{this.onFinishUpload}}
       @onQueueUpdate={{this.onQueueUpdate}}
@@ -67,6 +72,7 @@ Component.args = {
   helpTextDragDrop: 'Sleep de bestanden naar hier om toe te voegen',
   helpTextFileNotSupported: 'Dit bestandsformaat wordt niet ondersteund.',
   maxFileSizeMB: 20,
+  minFileSizeKB: 0,
   multiple: false,
   onFinishUpload: null,
   onQueueUpdate: null,