StatelessFIleInput: add maxSize and showIcon (#544)

components/ui/SmartFileInput.vue

@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import { fileIsValid } from '~/plugins/fileUtils'
 import UploadIcon from '~/assets/images/utils/upload.svg?inline'
 
 export default {
@@ -36,6 +37,9 @@ export default {
       type: String,
       default: null,
     },
+    /**
+     * The max file size in bytes
+     */
     maxSize: {
       type: Number,
       default: null,
@@ -54,22 +58,10 @@ export default {
     onChange(files, shouldNotReset) {
       if (!shouldNotReset) this.files = files.target.files
 
-      this.files = [...this.files].filter((file) => {
-        if (this.maxSize === null) {
-          return true
-        } else if (file.size > this.maxSize) {
-          console.log('File size: ' + file.size + ', max size: ' + this.maxSize)
-          alert(
-            'File ' +
-              file.name +
-              ' is too big! Must be less than ' +
-              this.$formatBytes(this.maxSize)
-          )
-          return false
-        } else {
-          return true
-        }
-      })
+      const validationOptions = { maxSize: this.maxSize, alertOnInvalid: true }
+      this.files = [...this.files].filter((file) =>
+        fileIsValid(file, validationOptions)
+      )
 
       if (this.files.length > 0) {
         this.$emit('change', this.files)

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)
     },