When editing a adventure, prepopulate preview images with images from backend.

src/components/EventForm.vue

@@ -33,7 +33,7 @@
       </div>
 
 
-      <form-element-upload @newFiles="setFiles"></form-element-upload>
+      <form-element-upload @newFiles="setFiles" :adventureId="adventureId"></form-element-upload>
 
 
   <!--         <div class="form-button-wrapper form-button-wrapper--align-left">
@@ -76,6 +76,7 @@ export default {
   },
   data() {
     return {
+      adventureId: undefined,
       title: undefined,
       dateStart: undefined,
       dateEnd: undefined,
@@ -97,6 +98,7 @@ export default {
     
     console.log('formData', formData)
     if (formData) {
+      this.adventureId = formData.id;
       this.title = formData.title;
       this.dateStart = dateToDayMonthYearDashed(formData.dateStart);
       this.dateEnd = dateToDayMonthYearDashed(formData.dateEnd);

src/components/form/FormElementUpload.vue

@@ -17,9 +17,15 @@
 import axios from 'axios'
 import store from '@/store'
 
-import { createImages } from '@/utils/leifsbackend-api'
+import { imagesByAdventureId, createImages } from '@/utils/leifsbackend-api'
 
 export default {
+  props: {
+    adventureId: {
+      type: Number,
+      required: false
+    }
+  },
   data() {
     return {
       files: [],
@@ -31,6 +37,21 @@ export default {
       this.$emit('newFiles', this.files)
     }
   },
+  beforeMount() {
+    if (this.adventureId) {
+      imagesByAdventureId(this.adventureId)
+      .then(images => {
+        images.forEach(image => {
+          const url = `${'https://leifsopplevelser.no/assets'}/${filename}_thumb.${filextension}`;
+
+          this.files.push({
+            type: 'image',
+            url
+          })
+        })
+      })
+    }
+  },
   methods: {
     setPopoverAlbum: (album) => store.dispatch('setPopoverAlbum', album),
     setPopoverAlbumIndex: (index) => store.dispatch('setPopoverAlbumIndex', index),