Expose invalid image type warning to UI

src/components/ImageUpload.vue

@@ -24,6 +24,7 @@
         </div>
       </div>
     </div>
+    <div v-show="invalidType">One or more files have invalid types.</div>
     <ul v-if="imageList.length" v-cloak>
       <li
         v-for="(image, index) in imageList"
@@ -60,6 +61,7 @@ export default {
     return {
       imageList: [],
       urls: [],
+      invalidType: false,
     };
   },
   computed: {
@@ -81,9 +83,11 @@ export default {
         : [...this.$refs.imageInput.files];
       for (let i = 0; i < imageList.length; i++) {
         if (!acceptedTypes.includes(imageList[i].type)) {
+          this.invalidType = true;
           return false;
         }
       }
+      this.invalidType = false;
       return true;
     },
     removeImage(index) {
@@ -95,6 +99,8 @@ export default {
         formData.set("image", this.imageList[i]);
         this.postImage(formData);
       }
+      // Clean up
+      this.invalidType = false;
       this.imageList = [];
     },
     async postImage(fd) {