Avatar, background, banner filesize errors

src/components/user_settings/user_settings.js

@@ -1,9 +1,13 @@
 import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
+import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 
 const UserSettings = {
   data () {
     return {
+      avataruploaderror: null,
+      backgrounduploaderror: null,
+      banneruploaderror: null,
       newname: this.$store.state.users.currentUser.name,
       newbio: this.$store.state.users.currentUser.description,
       newlocked: this.$store.state.users.currentUser.locked,
@@ -69,6 +73,29 @@ const UserSettings = {
     uploadFile (slot, e) {
       const file = e.target.files[0]
       if (!file) { return }
+      var limit = 0
+      var error = () => {}
+      switch (slot) {
+        case 0:
+          limit = this.$store.state.instance.avatarlimit
+          error = (error) => { this.avataruploaderror = error }
+          break
+        case 1:
+          limit = this.$store.state.instance.bannerlimit
+          error = (error) => { this.banneruploaderror = error }
+          break
+        case 2:
+          limit = this.$store.state.instance.backgroundlimit
+          error = (error) => { this.backgrounduploaderror = error }
+      }
+      console.log(this.$store)
+      console.log(file.size + ' ' + slot + ' ' + limit)
+      if (file.size > limit) {
+        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
+        const allowedsize = fileSizeFormatService.fileSizeFormat(limit)
+        error(this.$t('post_status.upload_error_file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit}))
+        return
+      }
       // eslint-disable-next-line no-undef
       const reader = new FileReader()
       reader.onload = ({target}) => {
@@ -107,6 +134,19 @@ const UserSettings = {
         this.uploading[0] = false
       })
     },
+    clearUploadError (slot) {
+      switch (slot) {
+        case 0:
+          this.avataruploaderror = null
+          break
+        case 1:
+          this.banneruploaderror = null
+          break
+        case 2:
+          this.backgrounduploaderror = null
+          break
+      }
+    },
     submitBanner () {
       if (!this.previews[1]) { return }
 

src/components/user_settings/user_settings.vue

@@ -43,6 +43,10 @@
             </div>
             <i class="icon-spin4 animate-spin" v-if="uploading[0]"></i>
             <button class="btn btn-default" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
+            <div class='alert error' v-if="avataruploaderror">
+              Error: {{ avataruploaderror }}
+              <i class="icon-cancel" @click="clearUploadError(0)"></i>
+            </div>
           </div>
           <div class="setting-item">
             <h2>{{$t('settings.profile_banner')}}</h2>
@@ -56,6 +60,10 @@
             </div>
             <i class=" icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
             <button class="btn btn-default" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
+            <div class='alert error' v-if="banneruploaderror">
+              Error: {{ banneruploaderror }}
+              <i class="icon-cancel" @click="clearUploadError(1)"></i>
+            </div>
           </div>
           <div class="setting-item">
             <h2>{{$t('settings.profile_background')}}</h2>
@@ -67,6 +75,10 @@
             </div>
             <i class=" icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
             <button class="btn btn-default" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
+            <div class='alert error' v-if="backgrounduploaderror">
+              Error: {{ backgrounduploaderror }}
+              <i class="icon-cancel" @click="clearUploadError(2)"></i>
+            </div>
           </div>
         </div>