fix user background upload fail + display them

src/components/settings_modal/tabs/appearance_tab.js

@@ -67,6 +67,7 @@ const AppearanceTab = {
       })),
       backgroundUploading: false,
       background: null,
+      backgroundError: null,
       backgroundPreview: null,
     }
   },
@@ -474,6 +475,9 @@ const AppearanceTab = {
     resetUploadedBackground() {
       this.backgroundPreview = null
     },
+    clearBackgroundError() {
+      this.backgroundError = null
+    },
     submitBackground(background) {
       if (!this.backgroundPreview && background !== '') {
         return
@@ -486,8 +490,11 @@ const AppearanceTab = {
           this.$store.commit('addNewUsers', [data])
           this.$store.commit('setCurrentUser', data)
           this.backgroundPreview = null
+          this.backgroundError = null
+        })
+        .catch((e) => {
+          this.backgroundError = e
         })
-        .catch(this.displayUploadError)
         .finally(() => {
           this.backgroundUploading = false
         })

src/components/settings_modal/tabs/appearance_tab.vue

@@ -208,6 +208,23 @@
               {{ $t('settings.reset') }}
             </button>
           </div>
+          <div
+            v-if="backgroundError"
+            class="alert error -dismissible"
+          >
+            <span>
+              {{ backgroundError }}
+            </span>
+            <button
+              class="button-unstyled"
+              @click="clearBackgroundError"
+            >
+              <FAIcon
+                class="fa-scale-110 fa-old-padding"
+                icon="times"
+              />
+            </button>
+          </div>
           <button
             v-if="!isDefaultBackground"
             class="btn button-default reset-button"