Merge PR #488: KMZ/KML place import

Resolves conflicts with Naver list import (PR #662) — kept both unified list-import dialog and new KMZ/KML dialog. Dropped duplicate react-dom import and unused CustomSelect import from PlacesSidebar.
2026-06-19 13:21:46 +00:00 · 2026-04-15 05:09:45 +02:00
parent 4491b109ee 0e3e6df1f0
commit a1a7795945
25 changed files with 983 additions and 28 deletions
@@ -14,13 +14,14 @@ import {
  updatePlace,
  deletePlace,
  importGpx,
+  importMapFile,
  importGoogleList,
  importNaverList,
  searchPlaceImage,
 } from '../services/placeService';
 import { onPlaceCreated, onPlaceUpdated, onPlaceDeleted } from '../services/journeyService';

-const gpxUpload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 10 * 1024 * 1024 } });
+const uploadMulter = multer({ storage: multer.memoryStorage(), limits: { fileSize: 10 * 1024 * 1024 } });

 const router = express.Router({ mergeParams: true });

@@ -56,7 +57,7 @@ router.post('/', authenticate, requireTripAccess, validateStringLengths({ name:
 });

 // Import places from GPX file with full track geometry (must be before /:id)
-router.post('/import/gpx', authenticate, requireTripAccess, gpxUpload.single('file'), (req: Request, res: Response) => {
+router.post('/import/gpx', authenticate, requireTripAccess, uploadMulter.single('file'), (req: Request, res: Response) => {
  const authReq = req as AuthRequest;
  if (!checkPermission('place_edit', authReq.user.role, authReq.trip!.user_id, authReq.user.id, authReq.trip!.user_id !== authReq.user.id))
    return res.status(403).json({ error: 'No permission' });
@@ -76,6 +77,32 @@ router.post('/import/gpx', authenticate, requireTripAccess, gpxUpload.single('fi
  }
 });

+router.post('/import/map', authenticate, requireTripAccess, uploadMulter.single('file'), async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  if (!checkPermission('place_edit', authReq.user.role, authReq.trip!.user_id, authReq.user.id, authReq.trip!.user_id !== authReq.user.id)) {
+    return res.status(403).json({ error: 'No permission' });
+  }
+
+  const { tripId } = req.params;
+  const file = (req as any).file;
+  if (!file) return res.status(400).json({ error: 'No file uploaded' });
+
+  try {
+    const result = await importMapFile(tripId, file.buffer, file.originalname);
+    if (result.count === 0) {
+      return res.status(400).json({ error: 'No valid Placemarks found in map file', summary: result.summary });
+    }
+
+    res.status(201).json(result);
+    for (const place of result.places) {
+      broadcast(tripId, 'place:created', { place }, req.headers['x-socket-id'] as string);
+    }
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : 'Failed to import map file';
+    res.status(400).json({ error: message });
+  }
+});
+
 // Import places from a shared Google Maps list URL
 router.post('/import/google-list', authenticate, requireTripAccess, async (req: Request, res: Response) => {
  const authReq = req as AuthRequest;
@@ -0,0 +1,175 @@
+import { TextDecoder } from 'util';
+
+export interface ParsedKmlPlacemark {
+  name: string | null;
+  description: string | null;
+  lat: number | null;
+  lng: number | null;
+  folderName: string | null;
+}
+
+export interface KmlPlacemarkNode {
+  placemark: any;
+  folderName: string | null;
+}
+
+export interface KmlImportSummary {
+  totalPlacemarks: number;
+  createdCount: number;
+  skippedCount: number;
+  warnings: string[];
+  errors: string[];
+}
+
+const UTF8_DECODER_FATAL = new TextDecoder('utf-8', { fatal: true });
+const UTF8_DECODER_LOOSE = new TextDecoder('utf-8');
+
+const ENTITY_MAP: Record<string, string> = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&#39;': "'",
+  '&nbsp;': ' ',
+};
+
+function asArray<T>(value: T | T[] | null | undefined): T[] {
+  if (value == null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+function asTrimmedString(value: unknown): string | null {
+  if (value == null) return null;
+  const text = String(value).trim();
+  return text.length > 0 ? text : null;
+}
+
+function decodeHtmlEntities(value: string): string {
+  const withNamedEntities = value.replace(/&(amp|lt|gt|quot|#39|nbsp);/g, (m) => ENTITY_MAP[m] || m);
+
+  return withNamedEntities
+    .replace(/&#(\d+);/g, (_, dec) => {
+      const code = Number(dec);
+      return Number.isFinite(code) ? String.fromCharCode(code) : _;
+    })
+    .replace(/&#x([0-9a-fA-F]+);/g, (_, hex) => {
+      const code = Number.parseInt(hex, 16);
+      return Number.isFinite(code) ? String.fromCharCode(code) : _;
+    });
+}
+
+export function stripXmlNamespaces(xml: string): string {
+  // KML exports vary heavily; stripping namespace declarations/prefixes makes parsing resilient.
+  return xml
+    .replace(/\sxmlns(:\w+)?="[^"]*"/g, '')
+    .replace(/\sxmlns(:\w+)?='[^']*'/g, '')
+    .replace(/<(\/?)\w+:/g, '<$1');
+}
+
+export function decodeUtf8WithWarning(fileBuffer: Buffer): { text: string; warning: string | null } {
+  try {
+    return { text: UTF8_DECODER_FATAL.decode(fileBuffer), warning: null };
+  } catch {
+    return {
+      text: UTF8_DECODER_LOOSE.decode(fileBuffer),
+      warning: 'The uploaded file is not valid UTF-8. Some characters may be shown incorrectly.',
+    };
+  }
+}
+
+export function sanitizeKmlDescription(value: unknown): string | null {
+  const raw = asTrimmedString(value);
+  if (!raw) return null;
+
+  const withLineBreaks = raw.replace(/<br\s*\/?>/gi, '\n');
+  const stripped = withLineBreaks.replace(/<[^>]+>/g, '');
+  const decoded = decodeHtmlEntities(stripped)
+    .replace(/\r\n/g, '\n')
+    .replace(/\r/g, '\n')
+    .replace(/[\t\f\v]+/g, ' ')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+
+  return decoded || null;
+}
+
+export function parseKmlPointCoordinates(value: unknown): { lat: number; lng: number } | null {
+  const coordinates = asTrimmedString(value);
+  if (!coordinates) return null;
+
+  const firstCoordinate = coordinates.split(/\s+/)[0];
+  const [lngRaw, latRaw] = firstCoordinate.split(',');
+  if (lngRaw == null || latRaw == null) return null;
+
+  const lng = Number.parseFloat(lngRaw);
+  const lat = Number.parseFloat(latRaw);
+
+  if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null;
+  return { lat, lng };
+}
+
+export function createKmlImportSummary(totalPlacemarks: number): KmlImportSummary {
+  return {
+    totalPlacemarks,
+    createdCount: 0,
+    skippedCount: 0,
+    warnings: [],
+    errors: [],
+  };
+}
+
+export function buildCategoryNameLookup(categories: { id: number; name: string }[]): Map<string, number> {
+  const lookup = new Map<string, number>();
+  for (const category of categories) {
+    const normalizedName = category.name.trim().toLowerCase();
+    if (!normalizedName) continue;
+    if (!lookup.has(normalizedName)) {
+      lookup.set(normalizedName, category.id);
+    }
+  }
+  return lookup;
+}
+
+export function resolveCategoryIdForFolder(folderName: string | null, lookup: Map<string, number>): number | null {
+  if (!folderName) return null;
+  const normalizedFolder = folderName.trim().toLowerCase();
+  if (!normalizedFolder) return null;
+  return lookup.get(normalizedFolder) ?? null;
+}
+
+export function extractKmlPlacemarkNodes(kmlRoot: any): KmlPlacemarkNode[] {
+  const nodes: KmlPlacemarkNode[] = [];
+
+  const visitNode = (node: any, currentFolderName: string | null): void => {
+    if (!node || typeof node !== 'object') return;
+
+    for (const placemark of asArray(node.Placemark)) {
+      nodes.push({ placemark, folderName: currentFolderName });
+    }
+
+    for (const folder of asArray(node.Folder)) {
+      // Nested folders inherit/override folder context used for category matching.
+      const folderName = asTrimmedString(folder?.name) || currentFolderName;
+      visitNode(folder, folderName);
+    }
+
+    for (const childDocument of asArray(node.Document)) {
+      visitNode(childDocument, currentFolderName);
+    }
+  };
+
+  visitNode(kmlRoot, null);
+  return nodes;
+}
+
+export function parsePlacemarkNode(node: KmlPlacemarkNode): ParsedKmlPlacemark {
+  const coordinates = parseKmlPointCoordinates(node.placemark?.Point?.coordinates);
+
+  return {
+    name: asTrimmedString(node.placemark?.name),
+    description: sanitizeKmlDescription(node.placemark?.description),
+    lat: coordinates?.lat ?? null,
+    lng: coordinates?.lng ?? null,
+    folderName: node.folderName,
+  };
+}
@@ -1,8 +1,19 @@
-import { XMLParser } from 'fast-xml-parser';
+import { XMLParser, XMLValidator } from 'fast-xml-parser';
+import unzipper from 'unzipper';
 import { db, getPlaceWithTags } from '../db/database';
 import { loadTagsByPlaceIds } from './queryHelpers';
 import { checkSsrf } from '../utils/ssrfGuard';
 import { Place } from '../types';
+import {
+  buildCategoryNameLookup,
+  createKmlImportSummary,
+  decodeUtf8WithWarning,
+  extractKmlPlacemarkNodes,
+  parsePlacemarkNode,
+  resolveCategoryIdForFolder,
+  stripXmlNamespaces,
+  type KmlImportSummary,
+} from './kmlImport';

 interface PlaceWithCategory extends Place {
  category_name: string | null;
@@ -15,6 +26,12 @@ interface UnsplashSearchResponse {
  errors?: string[];
 }

+export interface PlaceImportResult {
+  places: any[];
+  count: number;
+  summary: KmlImportSummary;
+}
+
 // ---------------------------------------------------------------------------
 // List places
 // ---------------------------------------------------------------------------
@@ -234,6 +251,12 @@ const gpxParser = new XMLParser({
  isArray: (name) => ['wpt', 'trkpt', 'rtept', 'trk', 'trkseg', 'rte'].includes(name),
 });

+const kmlParser = new XMLParser({
+  ignoreAttributes: false,
+  attributeNamePrefix: '@_',
+  isArray: (name) => ['Placemark', 'Folder', 'Document'].includes(name),
+});
+
 export function importGpx(tripId: string, fileBuffer: Buffer) {
  const parsed = gpxParser.parse(fileBuffer.toString('utf-8'));
  const gpx = parsed?.gpx;
@@ -302,6 +325,110 @@ export function importGpx(tripId: string, fileBuffer: Buffer) {
  return created;
 }

+export function importKmlPlaces(tripId: string, fileBuffer: Buffer): PlaceImportResult {
+  const decoded = decodeUtf8WithWarning(fileBuffer);
+  const xmlWithoutNamespaces = stripXmlNamespaces(decoded.text);
+
+  const validationResult = XMLValidator.validate(xmlWithoutNamespaces);
+  if (validationResult !== true) {
+    throw new Error('Malformed KML: invalid XML structure');
+  }
+
+  const parsed = kmlParser.parse(xmlWithoutNamespaces);
+  const kmlRoot = parsed?.kml ?? parsed;
+
+  if (!kmlRoot || typeof kmlRoot !== 'object') {
+    throw new Error('Malformed KML: could not parse XML');
+  }
+
+  const placemarkNodes = extractKmlPlacemarkNodes(kmlRoot);
+  const summary = createKmlImportSummary(placemarkNodes.length);
+
+  if (decoded.warning) {
+    summary.warnings.push(decoded.warning);
+  }
+
+  const categories = db.prepare('SELECT id, name FROM categories').all() as { id: number; name: string }[];
+  const categoryLookup = buildCategoryNameLookup(categories);
+  const created: any[] = [];
+
+  const insertStmt = db.prepare(`
+    INSERT INTO places (trip_id, name, description, lat, lng, category_id, transport_mode)
+    VALUES (?, ?, ?, ?, ?, ?, 'walking')
+  `);
+
+  const insertAll = db.transaction(() => {
+    let fallbackIndex = 1;
+    for (const node of placemarkNodes) {
+      const parsedPlacemark = parsePlacemarkNode(node);
+
+      // KML geometry support is intentionally limited to <Placemark><Point> coordinates.
+      if (parsedPlacemark.lat === null || parsedPlacemark.lng === null) {
+        summary.skippedCount += 1;
+        summary.errors.push(`Skipped Placemark ${fallbackIndex}: missing Point coordinates.`);
+        fallbackIndex += 1;
+        continue;
+      }
+
+      const fallbackName = `Placemark ${fallbackIndex}`;
+      const name = parsedPlacemark.name || fallbackName;
+      const categoryId = resolveCategoryIdForFolder(parsedPlacemark.folderName, categoryLookup);
+
+      const result = insertStmt.run(
+        tripId,
+        name,
+        parsedPlacemark.description,
+        parsedPlacemark.lat,
+        parsedPlacemark.lng,
+        categoryId,
+      );
+
+      const place = getPlaceWithTags(Number(result.lastInsertRowid));
+      created.push(place);
+      summary.createdCount += 1;
+      fallbackIndex += 1;
+    }
+  });
+
+  insertAll();
+  summary.skippedCount = summary.totalPlacemarks - summary.createdCount;
+
+  if (summary.totalPlacemarks === 0) {
+    summary.errors.push('No Placemarks found in KML file.');
+  }
+
+  return { places: created, count: created.length, summary };
+}
+
+export async function unpackKmzToKml(kmzBuffer: Buffer): Promise<Buffer> {
+  let zip;
+  try {
+    zip = await unzipper.Open.buffer(kmzBuffer);
+  } catch {
+    throw new Error('Invalid KMZ archive.');
+  }
+
+  const kmlEntries = zip.files.filter((entry) => !entry.path.endsWith('/') && entry.path.toLowerCase().endsWith('.kml'));
+  if (kmlEntries.length === 0) {
+    throw new Error('KMZ archive does not contain a KML file.');
+  }
+
+  const preferredEntry = kmlEntries.find((entry) => entry.path.toLowerCase().endsWith('doc.kml')) || kmlEntries[0];
+  return preferredEntry.buffer();
+}
+
+export async function importKmzPlaces(tripId: string, kmzBuffer: Buffer): Promise<PlaceImportResult> {
+  const kmlBuffer = await unpackKmzToKml(kmzBuffer);
+  return importKmlPlaces(tripId, kmlBuffer);
+}
+
+export async function importMapFile(tripId: string, fileBuffer: Buffer, filename: string): Promise<PlaceImportResult> {
+  const ext = filename.toLowerCase().split('.').pop();
+  if (ext === 'kmz') return importKmzPlaces(tripId, fileBuffer);
+  if (ext === 'kml') return importKmlPlaces(tripId, fileBuffer);
+  throw new Error(`Unsupported map file format: .${ext}. Please upload a .kml or .kmz file.`);
+}
+
 // ---------------------------------------------------------------------------
 // Import Google Maps list
 // ---------------------------------------------------------------------------