WIP: allow multiple media per event

components/MediaInput.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 span
+  span {{ value }}
   v-dialog(v-model='openMediaDetails' :fullscreen="$vuetify.breakpoint.xsOnly" width='1000px')
     v-card
       v-card-title {{$t('common.media')}}
@@ -38,23 +39,27 @@ span
   div.col-12.pt-0(v-if='mediaPreview')
     img.col-12.pa-0(:src='mediaPreview' v-if='!showPreview')
     img.col-12.mediaPreview.pa-0(:src='mediaPreview' v-else :style="{ 'object-position': savedPosition }")
-    span.text-center {{event.media[0].name}}
+  div(v-else)
-  v-file-input(
+    v-text-field(
-    v-else
+      v-model='value.url'
-    :label="$t('common.media')"
+      :label="$t('common.media')"
-    :hint="$t('event.media_description')"
+    )
-    :prepend-icon="mdiCamera"
+    v-file-input(
-    :value='value.image'
+      multiple
-    @change="selectMedia"
+      :label="$t('common.media')"
-    persistent-hint
+      :hint="$t('event.media_description')"
-    accept='image/*')
+      :prepend-icon="mdiCamera"
+      :value='images'
+      @change="selectMedia"
+      persistent-hint
+      accept='image/*')
 </template>
 <script>
 import { mdiCamera } from '@mdi/js'
 export default {
   name: 'MediaInput',
   props: {
-    value: { type: Object, default: () => ({ image: null }) },
+    value: { type: Array, default: () => ([{ image: null }]) },
     event: { type: Object, default: () => ({}) }
   },
   data () {
@@ -72,9 +77,12 @@ export default {
       if (!this.value.url && !this.value.image) {
         return false
       }
-      const url = this.value.image ? URL.createObjectURL(this.value.image) : /^https?:\/\//.test(this.value.url) ? this.value.url : `/media/thumb/${this.value.url}`
+      const url = this.value.image ? URL.createObjectURL(this.value.image[0]) : /^https?:\/\//.test(this.value.url) ? this.value.url : `/media/thumb/${this.value.url}`
       return url
     },
+    images () {
+      return this.value.map(i => i.image)
+    },
     top () {
       return ((this.focalpoint[1] + 1) * 50) + '%'
     },

pages/add/_edit.vue

@@ -45,7 +45,7 @@ v-container.container.pa-0.pa-md-3
 
             //- MEDIA / FLYER / POSTER
             v-col(cols=12 md=6)
-              MediaInput(v-model='event.media[0]' :event='event' @remove='event.media = []')
+              MediaInput(v-model='event.media' :event='event')
 
             //- tags
             v-col(cols=12 md=6)

server/api/controller/event.js

@@ -437,19 +437,19 @@ const eventController = {
       }
 
       // modify associated media only if a new file is uploaded or remote image_url is used
-      if (req.file || (body.image_url && /^https?:\/\//.test(body.image_url))) {
+      if (req.files || (body.image_url && /^https?:\/\//.test(body.image_url))) {
-        if (!req.file && body.image_url) {
+        if (!req.files && body.image_url) {
-          req.file = await helpers.getImageFromURL(body.image_url)
+          req.files = await helpers.getImageFromURL(body.image_url)
         }
 
         let focalpoint = body.image_focalpoint ? body.image_focalpoint.split(',') : ['0', '0']
         focalpoint = [parseFloat(parseFloat(focalpoint[0]).toFixed(2)), parseFloat(parseFloat(focalpoint[1]).toFixed(2))]
         eventDetails.media = [{
-          url: req.file.filename,
+          url: req.files[0].filename,
-          height: req.file.height,
+          height: req.files[0].height,
-          width: req.file.width,
+          width: req.files[0].width,
           name: body.image_name || body.title || '',
-          size: req.file.size || 0,
+          size: req.files[0].size || 0,
           focalpoint
         }]
       } else if (!body.image) {

server/api/index.js

@@ -136,11 +136,11 @@ module.exports = () => {
      */
 
     // allow anyone to add an event (anon event has to be confirmed, flood protection)
-    api.post('/event', eventController.isAnonEventAllowed, SPAMProtectionApiRateLimiter, upload.single('image'), eventController.add)
+    api.post('/event', eventController.isAnonEventAllowed, SPAMProtectionApiRateLimiter, upload.array('image', 5), eventController.add)
 
     // api.get('/event/search', eventController.search)
 
-    api.put('/event', isAuth, upload.single('image'), eventController.update)
+    api.put('/event', isAuth, SPAMProtectionApiRateLimiter, upload.array('image', 5), eventController.update)
     api.get('/event/import', eventController.isAnonEventAllowed, helpers.importURL)
 
     // remove event