From 14ddbc49ec3753fda077e17fde4e27cffb91fbad Mon Sep 17 00:00:00 2001
From: Joshua Wehner <joshua@forem.com>
Date: Fri, 4 Nov 2022 11:06:16 +0100
Subject: [PATCH] Tweak image upload validation experience (#18675)

* Restore file control when image upload is invalid

* Tweak invalid file type message when type empty
---
 app/javascript/article-form/components/ArticleCoverImage.jsx | 2 ++
 app/javascript/packs/validateFileInputs.js                   | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/javascript/article-form/components/ArticleCoverImage.jsx b/app/javascript/article-form/components/ArticleCoverImage.jsx
index 4c9939156..9cd6152d6 100644
--- a/app/javascript/article-form/components/ArticleCoverImage.jsx
+++ b/app/javascript/article-form/components/ArticleCoverImage.jsx
@@ -78,6 +78,8 @@ export const ArticleCoverImage = ({ onMainImageUrlChange, mainImage }) => {
         successCb: onImageUploadSuccess,
         failureCb: onUploadError,
       });
+    } else {
+      setUploadingImage(false);
     }
   };
 
diff --git a/app/javascript/packs/validateFileInputs.js b/app/javascript/packs/validateFileInputs.js
index 88d064cd9..a256eeeca 100644
--- a/app/javascript/packs/validateFileInputs.js
+++ b/app/javascript/packs/validateFileInputs.js
@@ -101,7 +101,9 @@ function handleFileTypeError(
   if (fileTypeErrorHandler) {
     fileTypeErrorHandler();
   } else {
-    const errorMessage = `Invalid file format (${fileType}). Only ${permittedFileTypes.join(
+    const fileTypeBracketed =
+      fileType && fileType.length !== 0 ? ` (${fileType})` : '';
+    const errorMessage = `Invalid file format${fileTypeBracketed}. Only ${permittedFileTypes.join(
       ', ',
     )} files are permitted.`;
     addErrorMessage(errorMessage);