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}
>
- {dropText || "Drop image to upload"}
+ {dropText || "Drop image to import"}
)}
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({
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 }) {
handleImagesUpload(event.target.files)}
type="file"
- accept="image/*"
+ accept="image/jpeg, image/gif, image/png, image/webp"
style={{ display: "none" }}
ref={fileInputRef}
multiple