From 25a04f2294a4ed4d9cf527d8ee2d2899400447dd Mon Sep 17 00:00:00 2001
From: Rinpatch <rinpatch@sdf.org>
Date: Tue, 11 Dec 2018 16:02:35 +0300
Subject: Avatar, background, banner filesize errors

---
 src/components/user_settings/user_settings.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'src/components/user_settings/user_settings.vue')

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 234a7d86..12bc953e 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/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>
 
-- 
cgit v1.2.3-70-g09d2


From bf8bb9ce134c8712885e52d005c6d130fca4e553 Mon Sep 17 00:00:00 2001
From: Rinpatch <rinpatch@sdf.org>
Date: Wed, 12 Dec 2018 16:38:01 +0300
Subject: Moved upload errors in user_settings to an array. Moved upload error
 strings to its separate section in i18n

---
 src/components/media_upload/media_upload.js        |  4 +--
 .../post_status_form/post_status_form.js           |  2 +-
 src/components/user_settings/user_settings.js      | 41 ++++------------------
 src/components/user_settings/user_settings.vue     | 12 +++----
 src/i18n/en.json                                   | 22 +++++++-----
 5 files changed, 29 insertions(+), 52 deletions(-)

(limited to 'src/components/user_settings/user_settings.vue')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 31d36487..42d900d3 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -25,7 +25,7 @@ const mediaUpload = {
       if (file.size > store.state.instance.uploadlimit) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(store.state.instance.uploadlimit)
-        self.$emit('upload-failed', 'upload_error_file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit})
+        self.$emit('upload-failed', 'file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit})
         return
       }
       const formData = new FormData()
@@ -39,7 +39,7 @@ const mediaUpload = {
           self.$emit('uploaded', fileData)
           self.uploading = false
         }, (error) => { // eslint-disable-line handle-callback-err
-          self.$emit('upload-failed', 'upload_error_generic')
+          self.$emit('upload-failed', 'default')
           self.uploading = false
         })
     },
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index f8225fb2..3899027f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -264,7 +264,7 @@ const PostStatusForm = {
     },
     uploadFailed (errString, templateArgs) {
       templateArgs = templateArgs || {}
-      this.error = this.$t('post_status.upload_error') + ' ' + this.$t('post_status.' + errString, templateArgs)
+      this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
       this.enableSubmit()
     },
     disableSubmit () {
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index ed9178fa..424d0b85 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -5,9 +5,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 const UserSettings = {
   data () {
     return {
-      avataruploaderror: null,
-      backgrounduploaderror: null,
-      banneruploaderror: null,
+      uploaderror: [null, null, null],
       newname: this.$store.state.users.currentUser.name,
       newbio: this.$store.state.users.currentUser.description,
       newlocked: this.$store.state.users.currentUser.locked,
@@ -73,27 +71,12 @@ 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) {
+      var limit = [this.$store.state.instance.avatarlimit, this.$store.state.instance.bannerlimit, this.$store.state.instance.backgroundlimit]
+      console.log(file.size, limit)
+      if (file.size > limit[slot]) {
         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}))
+        const allowedsize = fileSizeFormatService.fileSizeFormat(limit[slot])
+        this.$set(this.uploaderror, slot, this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit}))
         return
       }
       // eslint-disable-next-line no-undef
@@ -135,17 +118,7 @@ const UserSettings = {
       })
     },
     clearUploadError (slot) {
-      switch (slot) {
-        case 0:
-          this.avataruploaderror = null
-          break
-        case 1:
-          this.banneruploaderror = null
-          break
-        case 2:
-          this.backgrounduploaderror = null
-          break
-      }
+      this.$set(this.uploaderror, slot, null)
     },
     submitBanner () {
       if (!this.previews[1]) { return }
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 12bc953e..22c4fe41 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -43,8 +43,8 @@
             </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 }}
+            <div class='alert error' v-if="uploaderror[0]">
+              Error: {{ uploaderror[0] }}
               <i class="icon-cancel" @click="clearUploadError(0)"></i>
             </div>
           </div>
@@ -60,8 +60,8 @@
             </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 }}
+            <div class='alert error' v-if="uploaderror[1]">
+              Error: {{ uploaderror[1] }}
               <i class="icon-cancel" @click="clearUploadError(1)"></i>
             </div>
           </div>
@@ -75,8 +75,8 @@
             </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 }}
+            <div class='alert error' v-if="uploaderror[2]">
+              Error: {{ uploaderror[2] }}
               <i class="icon-cancel" @click="clearUploadError(2)"></i>
             </div>
           </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 5697bae7..dae2f286 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -52,9 +52,6 @@
     "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
     "account_not_locked_warning_link": "locked",
     "attachments_sensitive": "Mark attachments as sensitive",
-    "upload_error": "Upload failed.",
-    "upload_error_file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
-    "upload_error_generic": "Try again later",
     "content_type": {
       "plain_text": "Plain text"
     },
@@ -230,11 +227,18 @@
     "favorite": "Favorite",
     "user_settings": "User Settings"
   },
-  "file_size_units": {
-    "B": "B",
-    "KiB": "KiB",
-    "MiB": "MiB",
-    "GiB": "GiB",
-    "TiB": "TiB"
+  "upload":{
+    "error": {
+    "base": "Upload failed.",
+    "file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+    "default": "Try again later"
+    },
+    "file_size_units": {
+      "B": "B",
+      "KiB": "KiB",
+      "MiB": "MiB",
+      "GiB": "GiB",
+      "TiB": "TiB"
+    }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 48edc0c8fcc6c63e432c9b6d78f14af086b56900 Mon Sep 17 00:00:00 2001
From: Rinpatch <rinpatch@sdf.org>
Date: Thu, 13 Dec 2018 11:25:03 +0300
Subject: Refactor arrays to individual options

---
 src/components/user_settings/user_settings.js  | 94 ++++++++++++++++++--------
 src/components/user_settings/user_settings.vue | 32 ++++-----
 2 files changed, 83 insertions(+), 43 deletions(-)

(limited to 'src/components/user_settings/user_settings.vue')

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 504976a5..0f3f0859 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -5,7 +5,6 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 const UserSettings = {
   data () {
     return {
-      uploaderror: [null, null, null],
       newname: this.$store.state.users.currentUser.name,
       newbio: this.$store.state.users.currentUser.description,
       newlocked: this.$store.state.users.currentUser.locked,
@@ -15,8 +14,16 @@ const UserSettings = {
       followImportError: false,
       followsImported: false,
       enableFollowsExport: true,
-      uploading: [ false, false, false, false ],
-      previews: [ null, null, null ],
+      avatarUploading: false,
+      bannerUploading: false,
+      backgroundUploading: false,
+      followListUploading: false,
+      avatarPreview: null,
+      bannerPreview: null,
+      backgroundPreview: null,
+      avatarUploadError: null,
+      bannerUploadError: null,
+      backgroundUploadError: null,
       deletingAccount: false,
       deleteAccountConfirmPasswordInput: '',
       deleteAccountError: false,
@@ -71,26 +78,49 @@ const UserSettings = {
     uploadFile (slot, e) {
       const file = e.target.files[0]
       if (!file) { return }
+      var error = () => {}
+      switch (slot) {
+        case 0:
+          error = (error) => { this.avatarUploadError = error }
+          break
+        case 1:
+          error = (error) => { this.bannerUploadError = error }
+          break
+        case 2:
+          error = (error) => { this.backgroundUploadError = error }
+          break
+      }
       var limit = [this.$store.state.instance.avatarlimit, this.$store.state.instance.bannerlimit, this.$store.state.instance.backgroundlimit]
       if (file.size > limit[slot]) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(limit[slot])
-        this.$set(this.uploaderror, slot, this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit}))
+        error(this.$t('upload.error.base') + ' ' + this.$t('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}) => {
         const img = target.result
-        this.previews[slot] = img
-        this.$forceUpdate() // just changing the array with the index doesn't update the view
+        var preview = () => {}
+        switch (slot) {
+          case 0:
+            preview = (preview) => { this.avatarPreview = preview }
+            break
+          case 1:
+            preview = (preview) => { this.bannerPreview = preview }
+            break
+          case 2:
+            preview = (preview) => { this.backgroundPreview = preview }
+            break
+        }
+        preview(img)
       }
       reader.readAsDataURL(file)
     },
     submitAvatar () {
-      if (!this.previews[0]) { return }
+      if (!this.avatarPreview) { return }
 
-      let img = this.previews[0]
+      let img = this.avatarPreview
       // eslint-disable-next-line no-undef
       let imginfo = new Image()
       let cropX, cropY, cropW, cropH
@@ -106,25 +136,35 @@ const UserSettings = {
         cropX = Math.floor((imginfo.width - imginfo.height) / 2)
         cropW = imginfo.height
       }
-      this.uploading[0] = true
+      this.avatarUploading = true
       this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
-          this.previews[0] = null
+          this.avatarPreview = null
         } else {
-          this.$set(this.uploaderror, 0, this.$t('upload.error.base') + user.error)
+          this.avatarUploadError = this.$t('upload.error.base') + user.error
         }
-        this.uploading[0] = false
+        this.avatarUploading = false
       })
     },
     clearUploadError (slot) {
-      this.$set(this.uploaderror, slot, null)
+      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 }
+      if (!this.bannerPreview) { return }
 
-      let banner = this.previews[1]
+      let banner = this.bannerPreview
       // eslint-disable-next-line no-undef
       let imginfo = new Image()
       /* eslint-disable camelcase */
@@ -134,24 +174,24 @@ const UserSettings = {
       height = imginfo.height
       offset_top = 0
       offset_left = 0
-      this.uploading[1] = true
+      this.bannerUploading = true
       this.$store.state.api.backendInteractor.updateBanner({params: {banner, offset_top, offset_left, width, height}}).then((data) => {
         if (!data.error) {
           let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
           clone.cover_photo = data.url
           this.$store.commit('addNewUsers', [clone])
           this.$store.commit('setCurrentUser', clone)
-          this.previews[1] = null
+          this.bannerPreview = null
         } else {
-          this.$set(this.uploaderror, 1, this.$t('upload.error.base') + data.error)
+          this.bannerUploadError = this.$t('upload.error.base') + data.error
         }
-        this.uploading[1] = false
+        this.bannerUploading = false
       })
       /* eslint-enable camelcase */
     },
     submitBg () {
-      if (!this.previews[2]) { return }
-      let img = this.previews[2]
+      if (!this.backgroundPreview) { return }
+      let img = this.backgroundPreview
       // eslint-disable-next-line no-undef
       let imginfo = new Image()
       let cropX, cropY, cropW, cropH
@@ -160,22 +200,22 @@ const UserSettings = {
       cropY = 0
       cropW = imginfo.width
       cropH = imginfo.width
-      this.uploading[2] = true
+      this.backgroundUploading = true
       this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => {
         if (!data.error) {
           let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
           clone.background_image = data.url
           this.$store.commit('addNewUsers', [clone])
           this.$store.commit('setCurrentUser', clone)
-          this.previews[2] = null
+          this.backgroundPreview = null
         } else {
-          this.$set(this.uploaderror, 2, this.$t('upload.error.base') + data.error)
+          this.backgroundUploadError = this.$t('upload.error.base') + data.error
         }
-        this.uploading[2] = false
+        this.backgroundUploading = false
       })
     },
     importFollows () {
-      this.uploading[3] = true
+      this.followListUploading = true
       const followList = this.followList
       this.$store.state.api.backendInteractor.followImport({params: followList})
         .then((status) => {
@@ -184,7 +224,7 @@ const UserSettings = {
           } else {
             this.followImportError = true
           }
-          this.uploading[3] = false
+          this.followListUploading = false
         })
     },
     /* This function takes an Array of Users
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 22c4fe41..5883775c 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -36,15 +36,15 @@
             <p>{{$t('settings.current_avatar')}}</p>
             <img :src="user.profile_image_url_original" class="old-avatar"></img>
             <p>{{$t('settings.set_new_avatar')}}</p>
-            <img class="new-avatar" v-bind:src="previews[0]" v-if="previews[0]">
+            <img class="new-avatar" v-bind:src="avatarPreview" v-if="avatarPreview">
             </img>
             <div>
               <input type="file" @change="uploadFile(0, $event)" ></input>
             </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="uploaderror[0]">
-              Error: {{ uploaderror[0] }}
+            <i class="icon-spin4 animate-spin" v-if="avatarUploading"></i>
+            <button class="btn btn-default" v-else-if="avatarPreview" @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>
@@ -53,30 +53,30 @@
             <p>{{$t('settings.current_profile_banner')}}</p>
             <img :src="user.cover_photo" class="banner"></img>
             <p>{{$t('settings.set_new_profile_banner')}}</p>
-            <img class="banner" v-bind:src="previews[1]" v-if="previews[1]">
+            <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview">
             </img>
             <div>
               <input type="file" @change="uploadFile(1, $event)" ></input>
             </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="uploaderror[1]">
-              Error: {{ uploaderror[1] }}
+            <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i>
+            <button class="btn btn-default" v-else-if="bannerPreview" @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>
             <p>{{$t('settings.set_new_profile_background')}}</p>
-            <img class="bg" v-bind:src="previews[2]" v-if="previews[2]">
+            <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview">
             </img>
             <div>
               <input type="file" @change="uploadFile(2, $event)" ></input>
             </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="uploaderror[2]">
-              Error: {{ uploaderror[2] }}
+            <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i>
+            <button class="btn btn-default" v-else-if="backgroundPreview" @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>
@@ -125,7 +125,7 @@
             <form v-model="followImportForm">
               <input type="file" ref="followlist" v-on:change="followListChange"></input>
             </form>
-            <i class=" icon-spin4 animate-spin uploading" v-if="uploading[3]"></i>
+            <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i>
             <button class="btn btn-default" v-else @click="importFollows">{{$t('general.submit')}}</button>
             <div v-if="followsImported">
               <i class="icon-cross" @click="dismissImported"></i>
-- 
cgit v1.2.3-70-g09d2


From 457132fb378b70a630fd4dc1b723488901b95c83 Mon Sep 17 00:00:00 2001
From: rinpatch <rinpatch@sdf.org>
Date: Thu, 13 Dec 2018 15:44:37 +0100
Subject: get rid of slots

---
 src/components/user_settings/user_settings.js  | 40 ++------------------------
 src/components/user_settings/user_settings.vue | 12 ++++----
 2 files changed, 9 insertions(+), 43 deletions(-)

(limited to 'src/components/user_settings/user_settings.vue')

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 0f3f0859..88cdb3bf 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -78,42 +78,18 @@ const UserSettings = {
     uploadFile (slot, e) {
       const file = e.target.files[0]
       if (!file) { return }
-      var error = () => {}
-      switch (slot) {
-        case 0:
-          error = (error) => { this.avatarUploadError = error }
-          break
-        case 1:
-          error = (error) => { this.bannerUploadError = error }
-          break
-        case 2:
-          error = (error) => { this.backgroundUploadError = error }
-          break
-      }
       var limit = [this.$store.state.instance.avatarlimit, this.$store.state.instance.bannerlimit, this.$store.state.instance.backgroundlimit]
       if (file.size > limit[slot]) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(limit[slot])
-        error(this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit}))
+        this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('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}) => {
         const img = target.result
-        var preview = () => {}
-        switch (slot) {
-          case 0:
-            preview = (preview) => { this.avatarPreview = preview }
-            break
-          case 1:
-            preview = (preview) => { this.bannerPreview = preview }
-            break
-          case 2:
-            preview = (preview) => { this.backgroundPreview = preview }
-            break
-        }
-        preview(img)
+        this[slot + 'Preview'] = img
       }
       reader.readAsDataURL(file)
     },
@@ -149,17 +125,7 @@ const UserSettings = {
       })
     },
     clearUploadError (slot) {
-      switch (slot) {
-        case 0:
-          this.avatarUploadError = null
-          break
-        case 1:
-          this.bannerUploadError = null
-          break
-        case 2:
-          this.backgroundUploadError = null
-          break
-      }
+      this[slot + 'UploadError'] = null
     },
     submitBanner () {
       if (!this.bannerPreview) { return }
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 5883775c..1a98b788 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -39,13 +39,13 @@
             <img class="new-avatar" v-bind:src="avatarPreview" v-if="avatarPreview">
             </img>
             <div>
-              <input type="file" @change="uploadFile(0, $event)" ></input>
+              <input type="file" @change="uploadFile('avatar', $event)" ></input>
             </div>
             <i class="icon-spin4 animate-spin" v-if="avatarUploading"></i>
             <button class="btn btn-default" v-else-if="avatarPreview" @click="submitAvatar">{{$t('general.submit')}}</button>
             <div class='alert error' v-if="avatarUploadError">
               Error: {{ avatarUploadError }}
-              <i class="icon-cancel" @click="clearUploadError(0)"></i>
+              <i class="icon-cancel" @click="clearUploadError('avatar')"></i>
             </div>
           </div>
           <div class="setting-item">
@@ -56,13 +56,13 @@
             <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview">
             </img>
             <div>
-              <input type="file" @change="uploadFile(1, $event)" ></input>
+              <input type="file" @change="uploadFile('banner', $event)" ></input>
             </div>
             <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i>
             <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
             <div class='alert error' v-if="bannerUploadError">
               Error: {{ bannerUploadError }}
-              <i class="icon-cancel" @click="clearUploadError(1)"></i>
+              <i class="icon-cancel" @click="clearUploadError('banner')"></i>
             </div>
           </div>
           <div class="setting-item">
@@ -71,13 +71,13 @@
             <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview">
             </img>
             <div>
-              <input type="file" @change="uploadFile(2, $event)" ></input>
+              <input type="file" @change="uploadFile('background', $event)" ></input>
             </div>
             <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i>
             <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
             <div class='alert error' v-if="backgroundUploadError">
               Error: {{ backgroundUploadError }}
-              <i class="icon-cancel" @click="clearUploadError(2)"></i>
+              <i class="icon-cancel" @click="clearUploadError('background')"></i>
             </div>
           </div>
         </div>
-- 
cgit v1.2.3-70-g09d2

