From c1be600b0175aeb39c06165fb360a6c25c7683b8 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Tue, 21 Jul 2020 08:30:26 +1000
Subject: [PATCH] Don't show dialog when setting front movie image (#678)

---
 .../src/components/Movies/MovieDetails/Movie.tsx  | 15 ++++++++++-----
 ui/v2.5/src/utils/image.tsx                       |  7 ++++++-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
index e1aa07acc..5252cfd7b 100644
--- a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
@@ -138,7 +138,7 @@ export const Movie: React.FC = () => {
     }
   }, [data, updateMovieData]);
 
-  function onImageLoad(imageData: string) {
+  function showImageAlert(imageData: string) {
     setImageClipboard(imageData);
     setIsImageAlertOpen(true);
   }
@@ -161,7 +161,12 @@ export const Movie: React.FC = () => {
     setBackImage(imageData);
   }
 
-  const encodingImage = ImageUtils.usePasteImage(onImageLoad, isEditing);
+  function onFrontImageLoad(imageData: string) {
+    setImagePreview(imageData);
+    setFrontImage(imageData);
+  }
+
+  const encodingImage = ImageUtils.usePasteImage(showImageAlert, isEditing);
 
   if (!isNew && !isEditing) {
     if (!data || !data.findMovie || loading) return <LoadingIndicator />;
@@ -222,8 +227,8 @@ export const Movie: React.FC = () => {
     history.push(`/movies`);
   }
 
-  function onImageChange(event: React.FormEvent<HTMLInputElement>) {
-    ImageUtils.onImageChange(event, onImageLoad);
+  function onFrontImageChange(event: React.FormEvent<HTMLInputElement>) {
+    ImageUtils.onImageChange(event, onFrontImageLoad);
   }
 
   function onBackImageChange(event: React.FormEvent<HTMLInputElement>) {
@@ -388,7 +393,7 @@ export const Movie: React.FC = () => {
           isEditing={isEditing}
           onToggleEdit={onToggleEdit}
           onSave={onSave}
-          onImageChange={onImageChange}
+          onImageChange={onFrontImageChange}
           onBackImageChange={onBackImageChange}
           onDelete={onDelete}
         />
diff --git a/ui/v2.5/src/utils/image.tsx b/ui/v2.5/src/utils/image.tsx
index b6cfaed60..a7702c619 100644
--- a/ui/v2.5/src/utils/image.tsx
+++ b/ui/v2.5/src/utils/image.tsx
@@ -3,7 +3,12 @@ import Jimp from "jimp";
 
 const readImage = (file: File, onLoadEnd: (imageData: string) => void) => {
   const reader: FileReader = new FileReader();
-  reader.onloadend = () => onLoadEnd(reader.result as string);
+  reader.onloadend = () => {
+    // only proceed if no error encountered
+    if (!reader.error) {
+      onLoadEnd(reader.result as string);
+    }
+  };
   reader.readAsDataURL(file);
 };