diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx index 9351551..8ab3dbf 100644 --- a/src/components/Map/MapView.jsx +++ b/src/components/Map/MapView.jsx @@ -1113,6 +1113,34 @@ export default function MapView({ }); }; + const replaceMediaUrl = (from, to) => { + if (!from || !to || from === to) return; + setDraftMediaUrls((prev) => { + let replaced = false; + const next = prev.map((value) => { + if (value === from) { + replaced = true; + return to; + } + return value; + }); + if (!replaced) next.push(to); + updateImageVariantsFromGallery(next); + return next; + }); + }; + + const readFileAsDataURL = (file) => { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onloadend = () => { + resolve(reader.result || ""); + }; + reader.onerror = reject; + reader.readAsDataURL(file); + }); + }; + const handleAddCustomImageUrl = () => { const raw = (draftImage || "").trim(); if (!raw) { @@ -1148,11 +1176,18 @@ export default function MapView({ } setDraftImageFile(file); - const reader = new FileReader(); - reader.onloadend = () => { - setDraftImagePreview(reader.result); - }; - reader.readAsDataURL(file); + let placeholder = ""; + try { + const dataUrl = await readFileAsDataURL(file); + if (typeof dataUrl === "string" && dataUrl) { + placeholder = dataUrl; + setDraftImagePreview(dataUrl); + addMediaUrlToGallery(dataUrl); + } + } catch (err) { + console.error("File read error:", err); + setSaveError("Failed to read image"); + } try { const formData = new FormData(); @@ -1189,7 +1224,8 @@ export default function MapView({ const fallbackRef = largeRef || mediumRef || smallRef; const selected = fallbackRef || mediumRef || smallRef; if (selected) { - addMediaUrlToGallery(selected); + replaceMediaUrl(placeholder, selected); + setDraftImagePreview(selected); } } catch (err) { console.error("Image upload error:", err); @@ -1390,6 +1426,7 @@ export default function MapView({ const galleryPreviewImage = draftMediaUrls[0] || + draftImagePreview || draftImageLarge || draftImageMedium || draftImageSmall ||