FEAT: add upload function for logo

does not work yet, we always get back a 400 when
logo or image are not null in json format

have to find out how the exact format and encoding has to be to update
a show inlcuding files

src/components/ShowManagerModalShow.vue

@@ -474,6 +474,7 @@ export default {
     },
     saveCategories (event) {
       if (this.array.length !== this.show.category.length || !this.array.every((value, index) => value === this.show.category[index])) {
+        event.preventDefault()
         this.backuparray = this.show.category
         this.show.category = this.array
         axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', this.show, {
@@ -492,6 +493,7 @@ export default {
     },
     saveTopics (event) {
       if (this.array.length !== this.show.topic.length || !this.array.every((value, index) => value === this.show.topic[index])) {
+        event.preventDefault()
         this.backuparray = this.show.topic
         this.show.topic = this.array
         axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', this.show, {
@@ -510,6 +512,7 @@ export default {
     },
     saveMusicFocus (event) {
       if (this.array.length !== this.show.musicfocus.length || !this.array.every((value, index) => value === this.show.musicfocus[index])) {
+        event.preventDefault()
         this.backuparray = this.show.musicfocus
         this.show.musicfocus = this.array
         axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', this.show, {
@@ -528,6 +531,7 @@ export default {
     },
     saveLanguages (event) {
       if (this.array.length !== this.show.language.length || !this.array.every((value, index) => value === this.show.language[index])) {
+        event.preventDefault()
         this.backuparray = this.show.language
         this.show.language = this.array
         axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', this.show, {
@@ -546,6 +550,7 @@ export default {
     },
     saveHosts (event) {
       if (this.array.length !== this.show.hosts.length || !this.array.every((value, index) => value === this.show.hosts[index])) {
+        event.preventDefault()
         this.backuparray = this.show.hosts
         this.show.hosts = this.array
         axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', this.show, {
@@ -563,7 +568,51 @@ export default {
       }
     },
     saveLogo (event) {
-      alert('Not yet implemented')
+      event.preventDefault()
+      if (this.file === null) alert('Please provide a file to upload')
+      else if (this.file.type !== 'image/jpeg' && this.file.type !== 'image/png') alert('Please provide a valid image file (JPEG or PNG)')
+      else {
+        let formData = new FormData()
+        this.backupstring = this.string
+        // work in progress:
+        // as it seems we have to use multipart webform data and add all items in order
+        // but this is still not working
+        // have to find out what exact format and encoding is needed to upload a show with files included
+        formData.append('name', this.show.name)
+        formData.append('slug', this.show.slug)
+        formData.append('image', this.show.image)
+        formData.append('logo', this.file, this.file.name);
+        formData.append('short_description', this.show.short_description)
+        formData.append('description', this.show.description)
+        formData.append('email', this.show.email)
+        formData.append('website', this.show.website)
+        formData.append('type', this.show.type)
+        formData.append('fundingcategory', this.show.fundingcategory)
+        formData.append('predecessor', this.show.predecessor)
+        formData.append('cba_series_id', this.show.cba_series_id)
+        formData.append('fallback_id', this.show.fallback_id)
+        formData.append('category', this.show.category)
+        formData.append('host', this.show.host)
+        formData.append('language', this.show.language)
+        formData.append('topic', this.show.topic)
+        formData.append('musicfocus', this.show.musicfocus)
+        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', formData, {
+          withCredentials: true,
+          headers: {
+            'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token,
+            'Content-Type': 'multipart/form-data'
+          }
+        }).then(response => {
+          //this.$parent.getHosts()
+          this.$refs.modalLogo.hide()
+        }).catch(error => {
+          this.file = null
+          this.string = this.backupstring
+          console.log('Error:')
+          console.log(error)
+          alert('Error: could not save the new logo')
+        })
+      }
     },
     saveImage (event) {
       alert('Not yet implemented')