show gallery preview while uploading

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 ||