adds filename fallback for trail upload

web/src/lib/components/trail/map_with_elevation.svelte

@@ -2,7 +2,11 @@
     import { page } from "$app/stores";
     import { Settings } from "$lib/models/settings";
     import type { Trail } from "$lib/models/trail";
-    import { createMarkerFromWaypoint, endIcon, startIcon } from "$lib/util/leaflet_util";
+    import {
+        createMarkerFromWaypoint,
+        endIcon,
+        startIcon,
+    } from "$lib/util/leaflet_util";
     import "$lib/vendor/leaflet-elevation/src/index.css";
     import type AutoGraticule from "$lib/vendor/leaflet-graticule/leaflet-auto-graticule";
     import type { Map, Marker } from "leaflet";
@@ -27,7 +31,7 @@
     let selectedMetric: "altitude" | "slope" | "speed" | false = "altitude";
 
     $: gpxData = trail?.expand.gpx_data;
-    $: if (gpxData && controlElevation) {        
+    $: if (gpxData && controlElevation) {
         controlElevation.updateOptions({
             autofitBounds: options.autofitBounds ?? true,
         });
@@ -103,7 +107,9 @@
         const baseMaps: Record<string, L.TileLayer> = {
             OpenStreetMaps: baseLayer,
             OpenTopoMaps: topoLayer,
-            ...($page.data.settings as Settings)?.tilesets?.reduce< Record<string, string>>((t, current) => {
+            ...($page.data.settings as Settings)?.tilesets?.reduce<
+                Record<string, string>
+            >((t, current) => {
                 t[current.name] = L.tileLayer(current.url);
                 return t;
             }, {}),
@@ -139,7 +145,7 @@
             closeBtn: false,
             followMarker: true,
             autofitBounds: true,
-            imperial: $page.data.settings.unit == "imperial",
+            imperial: ($page.data.settings?.unit ?? "metric") == "imperial",
             reverseCoords: false,
             acceleration: false,
             slope: true,
@@ -174,7 +180,7 @@
             trkStart: {
                 interactive: false,
                 className: "hihi",
-                icon: startIcon()
+                icon: startIcon(),
             },
             trkEnd: {
                 icon: endIcon(),
@@ -241,4 +247,4 @@
         <slot />
         <div class="basis-[300px] flex-grow flex-shrink-0" id="elevation"></div>
     </div>
-</div>
+</div>

web/src/lib/components/trail/map_with_elevation_multiple.svelte

@@ -129,7 +129,7 @@
         const baseMaps: Record<string, L.TileLayer> = {
             OpenStreetMaps: baseLayer,
             OpenTopoMaps: topoLayer,
-            ...($page.data.settings as Settings)?.tilesets?.reduce<
+            ...($page.data?.settings as Settings)?.tilesets?.reduce<
                 Record<string, string>
             >((t, current) => {
                 t[current.name] = L.tileLayer(current.url);

web/src/lib/stores/trail_store.ts

@@ -346,12 +346,14 @@ export async function trails_get_bounding_box(f: (url: RequestInfo | URL, config
 }
 
 export async function trails_upload(file: File, f: (url: RequestInfo | URL, config?: RequestInit) => Promise<Response> = fetch): Promise<TrailFilterValues> {
+    const fd = new FormData()
+
+    fd.append("name", file.name),
+    fd.append("file", file)
+    
     const r = await f('/api/v1/trail/upload', {
-        headers: {
-            "Content-Type": "multipart/form-data"
-        },
         method: 'PUT',
-        body: file
+        body: fd
     })
 
     if (r.ok) {

web/src/lib/util/gpx_util.ts

@@ -15,7 +15,8 @@ import * as xmldom from 'xmldom'
 import type { Feature, FeatureCollection, GeoJsonProperties, Position } from 'geojson';
 
 
-export async function gpx2trail(gpxString: string) {
+export async function gpx2trail(gpxString: string, fallbackName?: string) {
+   
     const gpx = await GPX.parse(gpxString);
 
     if (gpx instanceof Error) {
@@ -24,7 +25,7 @@ export async function gpx2trail(gpxString: string) {
 
     const trail = new Trail("");
 
-    trail.name = gpx.metadata?.name || gpx.trk?.at(0)?.name || gpx.rte?.at(0)?.name || `trail-${new Date().toISOString()}`;
+    trail.name = gpx.metadata?.name || gpx.trk?.at(0)?.name || gpx.rte?.at(0)?.name || fallbackName || `trail-${new Date().toISOString()}`;
 
     trail.description = gpx.metadata?.desc;
 

web/src/routes/api/v1/trail/upload/+server.ts

@@ -6,9 +6,9 @@ import { ClientResponseError } from "pocketbase";
 
 export async function PUT(event: RequestEvent) {
     try {
-        const data = await event.request.blob();
-        const fileBuffer = await data.arrayBuffer();
-        const fileContent = await data.text();
+        const data = await event.request.formData();
+        const fileBuffer = await (data.get("file") as Blob).arrayBuffer();
+        const fileContent = await (data.get("file") as Blob).text();
         let gpxData = ""
         let gpxFile: Blob;
         if (isFITFile(fileBuffer)) {           
@@ -29,14 +29,14 @@ export async function PUT(event: RequestEvent) {
             });
         } else {
             gpxData = fileContent;
-            gpxFile = data
+            gpxFile = data.get("file") as Blob
         }
         if (!gpxData.length) {
             throw new ClientResponseError({ status: 400, response: { message: "Empty file" } })
         }
         let trail: Trail;
         try {
-            trail = (await gpx2trail(gpxData)).trail;
+            trail = (await gpx2trail(gpxData, data.get("name") as string | undefined)).trail;
         } catch (e: any) {
             throw new ClientResponseError({ status: 400, response: { message: "Invalid file" } })
         }

web/src/routes/trail/edit/[id]/+page.svelte

@@ -285,7 +285,7 @@
         let gpxData = await parseFile(selectedFile);
 
         try {
-            const parseResult = await gpx2trail(gpxData);
+            const parseResult = await gpx2trail(gpxData, selectedFile.name);
             $form = parseResult.trail;
             $form.expand.gpx_data = gpxData;
             $form.category = $page.data.settings.category || $categories[0].id;