From 664d3d2c42d3e4963454620fe2db41a3c3f3a28c Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 4 Feb 2021 21:05:04 +0100
Subject: [PATCH] image type in frontend

---
 .../components/ContributionForm/ContributionForm.vue | 12 +++++++++++-
 webapp/components/ImageUploader/ImageUploader.vue    |  7 +++++--
 webapp/graphql/Fragments.js                          |  1 +
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 42ed2799e..d2cb419a4 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -19,6 +19,7 @@
             :class="[formData.imageBlurred && '--blur-image']"
             @addHeroImage="addHeroImage"
             @addImageAspectRatio="addImageAspectRatio"
+            @addImageType="addImageType"
           />
         </template>
         <div v-if="formData.image" class="blur-toggle">
@@ -84,7 +85,11 @@ export default {
   },
   data() {
     const { title, content, image } = this.contribution
-    const { sensitive: imageBlurred = false, aspectRatio: imageAspectRatio = null } = image || {}
+    const {
+      sensitive: imageBlurred = false,
+      aspectRatio: imageAspectRatio = null,
+      type: imageType = null,
+    } = image || {}
 
     return {
       links,
@@ -93,6 +98,7 @@ export default {
         content: content || '',
         image: image || null,
         imageAspectRatio,
+        imageType,
         imageBlurred,
       },
       formSchema: {
@@ -125,6 +131,7 @@ export default {
         if (this.imageUpload) {
           image.upload = this.imageUpload
           image.aspectRatio = this.formData.imageAspectRatio
+          image.type = this.formData.imageType
         }
       }
       this.loading = true
@@ -173,6 +180,9 @@ export default {
     addImageAspectRatio(aspectRatio) {
       this.formData.imageAspectRatio = aspectRatio
     },
+    addImageType(imageType) {
+      this.formData.imageType = imageType
+    },
   },
   apollo: {
     User: {
diff --git a/webapp/components/ImageUploader/ImageUploader.vue b/webapp/components/ImageUploader/ImageUploader.vue
index afcf1e507..c1492e5ba 100644
--- a/webapp/components/ImageUploader/ImageUploader.vue
+++ b/webapp/components/ImageUploader/ImageUploader.vue
@@ -90,6 +90,7 @@ export default {
     fileAdded(file) {
       this.$emit('addImageAspectRatio', file.width / file.height || 1.0)
       this.$emit('addHeroImage', file)
+      this.$emit('addImageType', file.type)
       this.file = file
       if (this.file.type === 'image/jpeg') this.imageCanBeCropped = true
       this.$nextTick((this.isLoadingImage = false))
@@ -113,9 +114,10 @@ export default {
     cropImage() {
       this.isLoadingImage = true
 
-      const onCropComplete = (aspectRatio, imageFile) => {
+      const onCropComplete = (aspectRatio, imageFile, imageType) => {
         this.$emit('addImageAspectRatio', aspectRatio)
         this.$emit('addHeroImage', imageFile)
+        this.$emit('addImageType', imageType)
         this.$nextTick((this.isLoadingImage = false))
         this.closeCropper()
       }
@@ -125,7 +127,7 @@ export default {
         canvas.toBlob((blob) => {
           const imageAspectRatio = canvas.width / canvas.height
           const croppedImageFile = new File([blob], this.file.name, { type: this.file.type })
-          onCropComplete(imageAspectRatio, croppedImageFile)
+          onCropComplete(imageAspectRatio, croppedImageFile, 'image/jpeg')
         }, 'image/jpeg')
       } else {
         // TODO: use cropped file instead of original file
@@ -140,6 +142,7 @@ export default {
     deleteImage() {
       this.$emit('addHeroImage', null)
       this.$emit('addImageAspectRatio', null)
+      this.$emit('addImageType', null)
     },
   },
 }
diff --git a/webapp/graphql/Fragments.js b/webapp/graphql/Fragments.js
index 2626581e1..e4c31bd4b 100644
--- a/webapp/graphql/Fragments.js
+++ b/webapp/graphql/Fragments.js
@@ -51,6 +51,7 @@ export const postFragment = gql`
       url
       sensitive
       aspectRatio
+      type
     }
     author {
       ...user