Added multiple simultaneous map and token upload support

src/components/ImageDrop.js

@@ -18,10 +18,14 @@ function ImageDrop({ onDrop, dropText, children }) {
   function handleImageDrop(event) {
     event.preventDefault();
     event.stopPropagation();
-    const file = event.dataTransfer.files[0];
-    if (file && file.type.startsWith("image")) {
-      onDrop(file);
+    const files = event.dataTransfer.files;
+    let imageFiles = [];
+    for (let file of files) {
+      if (file.type.startsWith("image")) {
+        imageFiles.push(file);
+      }
     }
+    onDrop(imageFiles);
     setDragging(false);
   }
 

src/modals/SelectMapModal.js

@@ -51,9 +51,17 @@ function SelectMapModal({
 
   const fileInputRef = useRef();
 
-  function handleImageUpload(file) {
+  async function handleImagesUpload(files) {
+    for (let file of files) {
+      await handleImageUpload(file);
+    }
+    // Set file input to null to allow adding the same image 2 times in a row
+    fileInputRef.current.value = null;
+  }
+
+  async function handleImageUpload(file) {
     if (!file) {
-      return;
+      return Promise.reject();
     }
     let fileGridX = defaultMapSize;
     let fileGridY = defaultMapSize;
@@ -86,11 +94,13 @@ function SelectMapModal({
     let image = new Image();
     setImageLoading(true);
 
-    blobToBuffer(file).then((buffer) => {
-      // Copy file to avoid permissions issues
-      const blob = new Blob([buffer]);
-      // Create and load the image temporarily to get its dimensions
-      const url = URL.createObjectURL(blob);
+    const buffer = await blobToBuffer(file);
+    // Copy file to avoid permissions issues
+    const blob = new Blob([buffer]);
+    // Create and load the image temporarily to get its dimensions
+    const url = URL.createObjectURL(blob);
+
+    return new Promise((resolve, reject) => {
       image.onload = function () {
         handleMapAdd({
           // Save as a buffer to send with msgpack
@@ -109,11 +119,10 @@ function SelectMapModal({
         });
         setImageLoading(false);
         URL.revokeObjectURL(url);
+        resolve();
       };
+      image.onerror = reject;
       image.src = url;
-
-      // Set file input to null to allow adding the same image 2 times in a row
-      fileInputRef.current.value = null;
     });
   }
 
@@ -172,12 +181,13 @@ function SelectMapModal({
 
   return (
     <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
-      <ImageDrop onDrop={handleImageUpload} dropText="Drop map to upload">
+      <ImageDrop onDrop={handleImagesUpload} dropText="Drop map to upload">
         <input
-          onChange={(event) => handleImageUpload(event.target.files[0])}
+          onChange={(event) => handleImagesUpload(event.target.files)}
           type="file"
           accept="image/*"
           style={{ display: "none" }}
+          multiple
           ref={fileInputRef}
         />
         <Flex

src/modals/SelectTokensModal.js

@@ -36,7 +36,15 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
     addToken(token);
   }
 
-  function handleImageUpload(file) {
+  async function handleImagesUpload(files) {
+    for (let file of files) {
+      await handleImageUpload(file);
+    }
+    // Set file input to null to allow adding the same image 2 times in a row
+    fileInputRef.current.value = null;
+  }
+
+  async function handleImageUpload(file) {
     let name = "Unknown Map";
     if (file.name) {
       // Remove file extension
@@ -49,11 +57,14 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
     }
     let image = new Image();
     setImageLoading(true);
-    blobToBuffer(file).then((buffer) => {
-      // Copy file to avoid permissions issues
-      const blob = new Blob([buffer]);
-      // Create and load the image temporarily to get its dimensions
-      const url = URL.createObjectURL(blob);
+    const buffer = await blobToBuffer(file);
+
+    // Copy file to avoid permissions issues
+    const blob = new Blob([buffer]);
+    // Create and load the image temporarily to get its dimensions
+    const url = URL.createObjectURL(blob);
+
+    return new Promise((resolve, reject) => {
       image.onload = function () {
         handleTokenAdd({
           file: buffer,
@@ -68,11 +79,10 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
           hideInSidebar: false,
         });
         setImageLoading(false);
+        resolve();
       };
+      image.onerror = reject;
       image.src = url;
-
-      // Set file input to null to allow adding the same image 2 times in a row
-      fileInputRef.current.value = null;
     });
   }
 
@@ -96,13 +106,14 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
 
   return (
     <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
-      <ImageDrop onDrop={handleImageUpload} dropText="Drop token to upload">
+      <ImageDrop onDrop={handleImagesUpload} dropText="Drop token to upload">
         <input
-          onChange={(event) => handleImageUpload(event.target.files[0])}
+          onChange={(event) => handleImagesUpload(event.target.files)}
           type="file"
           accept="image/*"
           style={{ display: "none" }}
           ref={fileInputRef}
+          multiple
         />
         <Flex
           sx={{