From 497f9cef19ab8b050cc5cb97b0ab5f7d45d8a2b8 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Sat, 18 Sep 2021 07:41:44 +0800
Subject: [PATCH] Display error when image exceeds
 `ASSETS_TRANSFORM_IMAGE_MAX_DIMENSION` limit (#8069)

* display error when image exceeds transform limit

* use img error event handler

* Use generic error translations

* Fix unknown translation check

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 app/src/interfaces/file-image/file-image.vue | 48 +++++++++++++++++++-
 app/src/lang/translations/en-US.yaml         |  3 +-
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/app/src/interfaces/file-image/file-image.vue b/app/src/interfaces/file-image/file-image.vue
index fb86ca50ff..a84cb550f8 100644
--- a/app/src/interfaces/file-image/file-image.vue
+++ b/app/src/interfaces/file-image/file-image.vue
@@ -7,7 +7,14 @@
 		</v-notice>
 
 		<div v-else-if="image" class="image-preview" :class="{ 'is-svg': image.type && image.type.includes('svg') }">
-			<img :src="src" alt="" role="presentation" />
+			<div v-if="imageError" class="image-error">
+				<v-icon large :name="imageError === 'UNKNOWN' ? 'error_outline' : 'info_outline'" />
+
+				<span class="message">
+					{{ t(`errors.${imageError}`) }}
+				</span>
+			</div>
+			<img v-else :src="src" alt="" role="presentation" @error="imageErrorHandler" />
 
 			<div class="shadow" />
 
@@ -85,12 +92,13 @@ export default defineComponent({
 	},
 	emits: ['input'],
 	setup(props, { emit }) {
-		const { t, n } = useI18n();
+		const { t, n, te } = useI18n();
 
 		const loading = ref(false);
 		const image = ref<Image | null>(null);
 		const lightboxActive = ref(false);
 		const editDrawerActive = ref(false);
+		const imageError = ref<string | null>(null);
 
 		const cacheBuster = ref(nanoid());
 
@@ -147,6 +155,8 @@ export default defineComponent({
 			loading,
 			image,
 			src,
+			imageError,
+			imageErrorHandler,
 			meta,
 			lightboxActive,
 			editDrawerActive,
@@ -185,6 +195,19 @@ export default defineComponent({
 			}
 		}
 
+		async function imageErrorHandler() {
+			if (!src.value) return;
+			try {
+				await api.get(src.value);
+			} catch (err: any) {
+				imageError.value = err.response?.data?.errors[0]?.extensions?.code;
+
+				if (!imageError.value || !te('errors.' + imageError.value)) {
+					imageError.value = 'UNKNOWN';
+				}
+			}
+		}
+
 		function changeCacheBuster() {
 			cacheBuster.value = nanoid();
 		}
@@ -255,6 +278,27 @@ img {
 	}
 }
 
+.image-error {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	// width: 100%;
+	height: 100%;
+	color: var(--foreground-subdued);
+	background-color: var(--background-normal);
+
+	.v-icon {
+		margin-bottom: 6px;
+	}
+
+	.message {
+		max-width: 300px;
+		padding: 0 16px;
+		text-align: center;
+	}
+}
+
 .shadow {
 	position: absolute;
 	bottom: 0;
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 789a739fb5..4b0f713897 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -461,10 +461,11 @@ errors:
   RECORD_NOT_UNIQUE: Duplicate value detected
   USER_SUSPENDED: User Suspended
   CONTAINS_NULL_VALUES: Field contains null values
-  UNKNOWN: Unexpected Error
   UNPROCESSABLE_ENTITY: Unprocessable entity
   INTERNAL_SERVER_ERROR: Unexpected Error
   NOT_NULL_VIOLATION: Value can't be null
+  ILLEGAL_ASSET_TRANSFORMATION: Image source too large to preview
+  UNKNOWN: Unexpected Error
 security: Security
 value_hashed: Value Securely Hashed
 bookmark_name: Bookmark name...