Add a global image drop for dropping directly to the map screen

src/modals/ImageTypeModal.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Box, Label, Flex, Button } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+function ImageTypeModal({
+  isOpen,
+  onRequestClose,
+  multiple,
+  onTokens,
+  onMaps,
+}) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      style={{ maxWidth: "300px" }}
+    >
+      <Box>
+        <Label py={2}>Import image{multiple ? "s" : ""} as</Label>
+        <Flex py={2}>
+          <Button sx={{ flexGrow: 1 }} m={1} ml={0} onClick={onTokens}>
+            Token{multiple ? "s" : ""}
+          </Button>
+          <Button sx={{ flexGrow: 1 }} m={1} mr={0} onClick={onMaps}>
+            Map{multiple ? "s" : ""}
+          </Button>
+        </Flex>
+      </Box>
+    </Modal>
+  );
+}
+
+export default ImageTypeModal;

src/modals/SelectMapModal.js

@@ -7,9 +7,10 @@ import EditMapModal from "./EditMapModal";
 import ConfirmModal from "./ConfirmModal";
 
 import Modal from "../components/Modal";
-import ImageDrop from "../components/ImageDrop";
 import LoadingOverlay from "../components/LoadingOverlay";
 
+import ImageDrop from "../components/file/ImageDrop";
+
 import MapTiles from "../components/map/MapTiles";
 import MapEditBar from "../components/map/MapEditBar";
 import SelectMapSelectButton from "../components/map/SelectMapSelectButton";
@@ -198,7 +199,7 @@ function SelectMapModal({
       onRequestClose={handleClose}
       style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
     >
-      <ImageDrop onDrop={handleImagesUpload} dropText="Drop map to upload">
+      <ImageDrop onDrop={handleImagesUpload} dropText="Drop map to import">
         <input
           onChange={(event) => handleImagesUpload(event.target.files)}
           type="file"

src/modals/SelectTokensModal.js

@@ -7,9 +7,10 @@ import EditTokenModal from "./EditTokenModal";
 import ConfirmModal from "./ConfirmModal";
 
 import Modal from "../components/Modal";
-import ImageDrop from "../components/ImageDrop";
 import LoadingOverlay from "../components/LoadingOverlay";
 
+import ImageDrop from "../components/file/ImageDrop";
+
 import TokenTiles from "../components/token/TokenTiles";
 import TokenEditBar from "../components/token/TokenEditBar";
 
@@ -199,7 +200,7 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
       onRequestClose={onRequestClose}
       style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
     >
-      <ImageDrop onDrop={handleImagesUpload} dropText="Drop token to upload">
+      <ImageDrop onDrop={handleImagesUpload} dropText="Drop token to import">
         <input
           onChange={(event) => handleImagesUpload(event.target.files)}
           type="file"