From acaf580ac76a9d65fda0fd103b79df076fbec09c Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sun, 6 Jun 2021 19:27:01 +1000
Subject: [PATCH] Add error toasts for image drag and more restrictive image
 mime type rejection

---
 src/components/ImageDrop.js     | 25 +++++++++++++++++++++----
 src/modals/SelectMapModal.js    |  2 +-
 src/modals/SelectTokensModal.js |  2 +-
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/ImageDrop.js b/src/components/ImageDrop.js
index 4cbc74b..7ee9c74 100644
--- a/src/components/ImageDrop.js
+++ b/src/components/ImageDrop.js
@@ -1,7 +1,12 @@
 import React, { useState } from "react";
 import { Box, Flex, Text } from "theme-ui";
+import { useToasts } from "react-toast-notifications";
+
+const supportFileTypes = ["image/jpeg", "image/gif", "image/png", "image/webp"];
 
 function ImageDrop({ onDrop, dropText, children }) {
+  const { addToast } = useToasts();
+
   const [dragging, setDragging] = useState(false);
   function handleImageDragEnter(event) {
     event.preventDefault();
@@ -35,15 +40,27 @@ function ImageDrop({ onDrop, dropText, children }) {
         if (response.ok) {
           const file = await response.blob();
           file.name = name;
-          imageFiles.push(file);
+          if (supportFileTypes.includes(file.type)) {
+            imageFiles.push(file);
+          } else {
+            addToast(`Unsupported file type for ${file.name}`);
+          }
         }
-      } catch {}
+      } catch (e) {
+        if (e.message === "Failed to fetch") {
+          addToast("Unable to import image: failed to fetch");
+        } else {
+          addToast("Unable to import image");
+        }
+      }
     }
 
     const files = event.dataTransfer.files;
     for (let file of files) {
-      if (file.type.startsWith("image")) {
+      if (supportFileTypes.includes(file.type)) {
         imageFiles.push(file);
+      } else {
+        addToast(`Unsupported file type for ${file.name}`);
       }
     }
     onDrop(imageFiles);
@@ -75,7 +92,7 @@ function ImageDrop({ onDrop, dropText, children }) {
           onDrop={handleImageDrop}
         >
           <Text sx={{ pointerEvents: "none" }}>
-            {dropText || "Drop image to upload"}
+            {dropText || "Drop image to import"}
           </Text>
         </Flex>
       )}
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js
index 0fa9931..468444a 100644
--- a/src/modals/SelectMapModal.js
+++ b/src/modals/SelectMapModal.js
@@ -202,7 +202,7 @@ function SelectMapModal({
         <input
           onChange={(event) => handleImagesUpload(event.target.files)}
           type="file"
-          accept="image/*"
+          accept="image/jpeg, image/gif, image/png, image/webp"
           style={{ display: "none" }}
           multiple
           ref={fileInputRef}
diff --git a/src/modals/SelectTokensModal.js b/src/modals/SelectTokensModal.js
index b379f6f..df27357 100644
--- a/src/modals/SelectTokensModal.js
+++ b/src/modals/SelectTokensModal.js
@@ -203,7 +203,7 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
         <input
           onChange={(event) => handleImagesUpload(event.target.files)}
           type="file"
-          accept="image/*"
+          accept="image/jpeg, image/gif, image/png, image/webp"
           style={{ display: "none" }}
           ref={fileInputRef}
           multiple