diff --git a/src/helpers/useDataSource.js b/src/helpers/useDataSource.js index 9eed094..4af57a1 100644 --- a/src/helpers/useDataSource.js +++ b/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]; } diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js index 89083e2..62a75b4 100644 --- a/src/modals/SelectMapModal.js +++ b/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() { diff --git a/src/routes/Game.js b/src/routes/Game.js index d83c7ca..8243889 100644 --- a/src/routes/Game.js +++ b/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)