Show error if background image is too large

dashboard/src/views/BrandingView.vue

@@ -19,9 +19,11 @@ const name = ref('');
 const footer = ref('');
 const avatarUrl = ref(`${API_ORIGIN}/api/v1/cloudron/avatar?${String(Math.random()).slice(2)}`);
 const backgroundUrl = ref(`${API_ORIGIN}/api/v1/cloudron/background?${String(Math.random()).slice(2)}`);
+const backgroundError = ref('');
 
 async function onSubmit() {
   busy.value = true;
+  backgroundError.value = '';
 
   let [error] = await brandingModel.setName(name.value);
   if (error) return console.error(error);
@@ -31,7 +33,16 @@ async function onSubmit() {
 
   if (newBackgroundDataUrl) {
     const [error] = await brandingModel.setBackground(newBackgroundDataUrl);
-    if (error) return console.error(error);
+    if (error) {
+      // TODO fetch() returns no proper status if entity is too large ??
+      // if (error.status === 413) {
+        backgroundError.value = 'Image is too large';
+        busy.value = false;
+      // } else {
+        // return console.error(error);
+      // }
+      return;
+    }
   }
 
   if (newAvatarDataUrl) {
@@ -81,7 +92,8 @@ onMounted(async () => {
 
           <FormGroup>
             <label class="control-label">{{ $t('branding.backgroundImage') }}</label>
-            <ImagePicker :src="backgroundUrl" @changed="onBackgroundChanged" fallback-src="/img/background-image-placeholder.svg" :max-size="4096"/>
+            <ImagePicker :src="backgroundUrl" @changed="onBackgroundChanged" fallback-src="/img/background-image-placeholder.svg" :max-size="1280"/>
+            <div class="has-error" v-if="backgroundError">{{ backgroundError }}</div>
           </FormGroup>
 
           <FormGroup>