image type in frontend

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: {

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)
     },
   },
 }

webapp/graphql/Fragments.js

@@ -51,6 +51,7 @@ export const postFragment = gql`
       url
       sensitive
       aspectRatio
+      type
     }
     author {
       ...user