Moved to storing maps as uint arrays instead of blobs

src/helpers/useDataSource.js

@@ -11,7 +11,7 @@ function useDataSource(data, defaultSources) {
     }
     let url = null;
     if (data.type === "file") {
-      url = URL.createObjectURL(data.file);
+      url = URL.createObjectURL(new Blob([data.file]));
     } else if (data.type === "default") {
       url = defaultSources[data.key];
     }

src/modals/SelectMapModal.js

@@ -11,6 +11,7 @@ import MapSettings from "../components/map/MapSettings";
 import AuthContext from "../contexts/AuthContext";
 
 import usePrevious from "../helpers/usePrevious";
+import blobToBuffer from "../helpers/blobToBuffer";
 
 import { maps as defaultMaps } from "../maps";
 
@@ -141,31 +142,34 @@ function SelectMapModal({
     let image = new Image();
     setImageLoading(true);
 
-    // Copy file to avoid permissions issues
-    const copy = new Blob([file], { type: file.type });
-    // Create and load the image temporarily to get its dimensions
-    const url = URL.createObjectURL(copy);
-    image.onload = function () {
-      handleMapAdd({
-        file: copy,
-        name,
-        type: "file",
-        gridX: fileGridX,
-        gridY: fileGridY,
-        width: image.width,
-        height: image.height,
-        id: shortid.generate(),
-        created: Date.now(),
-        lastModified: Date.now(),
-        owner: userId,
-        ...defaultMapProps,
-      });
-      setImageLoading(false);
-      URL.revokeObjectURL(url);
-    };
-    image.src = url;
-    // Set file input to null to allow adding the same image 2 times in a row
-    fileInputRef.current.value = null;
+    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);
+      image.onload = function () {
+        handleMapAdd({
+          file: buffer,
+          name,
+          type: "file",
+          gridX: fileGridX,
+          gridY: fileGridY,
+          width: image.width,
+          height: image.height,
+          id: shortid.generate(),
+          created: Date.now(),
+          lastModified: Date.now(),
+          owner: userId,
+          ...defaultMapProps,
+        });
+        setImageLoading(false);
+        URL.revokeObjectURL(url);
+      };
+      image.src = url;
+
+      // Set file input to null to allow adding the same image 2 times in a row
+      fileInputRef.current.value = null;
+    });
   }
 
   function openImageDialog() {

src/routes/Game.js

@@ -289,9 +289,7 @@ function Game() {
     if (data.id === "mapResponse") {
       setMapLoading(false);
       if (data.data && data.data.type === "file") {
-        // Convert file back to blob after peer transfer
-        const file = new Blob([data.data.file]);
-        const newMap = { ...data.data, file };
+        const newMap = { ...data.data, file: data.data.file };
         // Store in db
         db.table("maps")
           .put(newMap)