StatelessFIleInput: add maxSize and showIcon (#544)

plugins/fileUtils.js

@@ -0,0 +1,27 @@
+import { formatBytes } from '~/plugins/shorthands'
+
+/**
+ * @param {File | Blob} file the file to validate
+ * @param {{ maxSize: number, alertOnInvalid: boolean }} validationOptions the
+ * constraints to validate the file against
+ * @param validationOptions.maxSize the max file size in bytes
+ * @param validationOptions.alertOnInvalid if an alert should pop up describing
+ * each validation error
+ * @returns `true` if the file is valid; `false` otherise
+ */
+export const fileIsValid = (file, validationOptions) => {
+  const { maxSize, alertOnInvalid } = validationOptions
+  if (maxSize !== null && maxSize !== undefined && file.size > maxSize) {
+    console.log(`File size: ${file.size}, max size: ${maxSize}`)
+    if (alertOnInvalid) {
+      alert(
+        `File ${file.name} is too big! Must be less than ${formatBytes(
+          maxSize
+        )}`
+      )
+    }
+    return false
+  }
+
+  return true
+}

plugins/shorthands.js

@@ -2,16 +2,7 @@ export default ({ store }, inject) => {
   inject('user', store.state.user)
   inject('tag', store.state.tag)
   inject('auth', store.state.auth)
-  inject('formatNumber', (number) => {
-    const x = +number
-    if (x >= 1000000) {
-      return (x / 1000000).toFixed(2).toString() + 'M'
-    } else if (x >= 10000) {
-      return (x / 1000).toFixed(1).toString() + 'K'
-    } else {
-      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    }
-  })
+  inject('formatNumber', formatNumber)
   inject('formatVersion', (versionArray) => {
     const allVersions = store.state.tag.gameVersions.slice().reverse()
     const allReleases = allVersions.filter((x) => x.version_type === 'release')
@@ -98,15 +89,28 @@ export default ({ store }, inject) => {
 
     return output.join(', ')
   })
-  inject('formatBytes', (bytes, decimals = 2) => {
-    if (bytes === 0) return '0 Bytes'
-
-    const k = 1024
-    const dm = decimals < 0 ? 0 : decimals
-    const sizes = ['Bytes', 'KiB', 'MiB', 'GiB']
-
-    const i = Math.floor(Math.log(bytes) / Math.log(k))
-
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
-  })
+  inject('formatBytes', formatBytes)
+}
+
+export const formatNumber = (number) => {
+  const x = +number
+  if (x >= 1000000) {
+    return (x / 1000000).toFixed(2).toString() + 'M'
+  } else if (x >= 10000) {
+    return (x / 1000).toFixed(1).toString() + 'K'
+  } else {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  }
+}
+
+export const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KiB', 'MiB', 'GiB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }