diff --git a/frontend/src/lib/components/AdventureModal.svelte b/frontend/src/lib/components/AdventureModal.svelte index 9e014e8..824e04e 100644 --- a/frontend/src/lib/components/AdventureModal.svelte +++ b/frontend/src/lib/components/AdventureModal.svelte @@ -228,6 +228,37 @@ } } + async function handleMultipleFiles(event: Event) { + const files = (event.target as HTMLInputElement).files; + if (files) { + for (const file of files) { + await uploadImage(file); + } + } + } + + async function uploadImage(file: File) { + let formData = new FormData(); + formData.append('image', file); + formData.append('adventure', adventure.id); + + let res = await fetch(`/adventures?/image`, { + method: 'POST', + body: formData + }); + if (res.ok) { + let newData = deserialize(await res.text()) as { data: { id: string; image: string } }; + console.log(newData); + let newImage = { id: newData.data.id, image: newData.data.image, is_primary: false }; + console.log(newImage); + images = [...images, newImage]; + adventure.images = images; + addToast('success', $t('adventures.image_upload_success')); + } else { + addToast('error', $t('adventures.image_upload_error')); + } + } + async function fetchImage() { try { let res = await fetch(url); @@ -241,39 +272,10 @@ formData.append('image', file); formData.append('adventure', adventure.id); - let res2 = await fetch(`/adventures?/image`, { - method: 'POST', - body: formData - }); - let data2 = await res2.json(); - - if (data2.type === 'success') { - console.log('Response Data:', data2); - - // Deserialize the nested data - let rawData = JSON.parse(data2.data); // Parse the data field - console.log('Deserialized Data:', rawData); - - // Assuming the first object in the array is the new image - let newImage = { - id: rawData[1], - image: rawData[2], // This is the URL for the image - is_primary: false - }; - console.log('New Image:', newImage); - - // Update images and adventure - images = [...images, newImage]; - adventure.images = images; - - addToast('success', $t('adventures.image_upload_success')); - url = ''; - } else { - addToast('error', $t('adventures.image_upload_error')); - } - } catch (error) { - console.error('Error in fetchImage:', error); - addToast('error', $t('adventures.image_upload_error')); + await uploadImage(file); + url = ''; + } catch (e) { + imageError = $t('adventures.image_fetch_failed'); } } @@ -830,7 +832,7 @@ it would also work to just use on:click on the MapLibre component itself. --> {$t('adventures.mark_visited')} {/if} - {#if !reverseGeocodePlace.region_visited || (!reverseGeocodePlace.city_visited && willBeMarkedVisited)} + {#if (willBeMarkedVisited && !reverseGeocodePlace.region_visited) || (!reverseGeocodePlace.city_visited && willBeMarkedVisited)}