StatelessFIleInput: add maxSize and showIcon (#544)

components/ui/StatelessFileInput.vue

@@ -2,7 +2,7 @@
   <div class="columns">
     <label class="button" @drop.prevent="handleDrop" @dragover.prevent>
       <span>
-        <UploadIcon />
+        <UploadIcon v-if="showIcon" />
         {{ prompt }}
       </span>
       <input
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import { fileIsValid } from '~/plugins/fileUtils'
 import UploadIcon from '~/assets/images/utils/upload.svg?inline'
 
 export default {
@@ -36,24 +37,46 @@ export default {
       type: String,
       default: null,
     },
+    /**
+     * The max file size in bytes
+     */
+    maxSize: {
+      type: Number,
+      default: null,
+    },
+    showIcon: {
+      type: Boolean,
+      default: true,
+    },
   },
   methods: {
     onChange(addedFiles) {
       this.$emit('change', addedFiles)
     },
+    /**
+     * @param {FileList} filesToAdd
+     */
     addFiles(filesToAdd) {
       if (!filesToAdd) return
 
-      if (!this.multiple && filesToAdd.length > 0) {
-        this.onChange([filesToAdd[0]])
-        return
-      }
+      const validationOptions = { maxSize: this.maxSize, alertOnInvalid: true }
+      const validFiles = [...filesToAdd].filter((file) =>
+        fileIsValid(file, validationOptions)
+      )
 
-      this.onChange(filesToAdd)
+      if (validFiles.length > 0) {
+        this.onChange(this.multiple ? validFiles : [validFiles[0]])
+      }
     },
+    /**
+     * @param {DragEvent} e
+     */
     handleDrop(e) {
       this.addFiles(e.dataTransfer.files)
     },
+    /**
+     * @param {Event} e native file input event
+     */
     handleChange(e) {
       this.addFiles(e.target.files)
     },