From be70088dd7d5f07a55fd8c3ad64da550eee42995 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Thu, 20 Jun 2019 17:04:03 -0300
Subject: [PATCH] Get imageUpload working for Posts

---
 .../src/schema/resolvers/fileUpload/index.js  |  1 -
 webapp/components/ContributionForm/index.vue  | 66 +++++++++++++++++--
 webapp/graphql/PostMutations.js               | 27 ++++++--
 webapp/pages/post/_id/_slug/index.vue         |  2 +-
 4 files changed, 84 insertions(+), 12 deletions(-)

diff --git a/backend/src/schema/resolvers/fileUpload/index.js b/backend/src/schema/resolvers/fileUpload/index.js
index c37d87e39..fa78238c3 100644
--- a/backend/src/schema/resolvers/fileUpload/index.js
+++ b/backend/src/schema/resolvers/fileUpload/index.js
@@ -12,7 +12,6 @@ const storeUpload = ({ createReadStream, fileLocation }) =>
 
 export default async function fileUpload(params, { file, url }, uploadCallback = storeUpload) {
   const upload = params[file]
-
   if (upload) {
     const { createReadStream, filename } = await upload
     const { name } = path.parse(filename)
diff --git a/webapp/components/ContributionForm/index.vue b/webapp/components/ContributionForm/index.vue
index de5c5d75f..e0aaf8c79 100644
--- a/webapp/components/ContributionForm/index.vue
+++ b/webapp/components/ContributionForm/index.vue
@@ -7,9 +7,16 @@
           ref="el"
           id="postdropzone"
           :use-custom-slot="true"
+          @vdropzone-thumbnail="thumbnail"
+          @vdropzone-success="vsuccess"
           @vdropzone-error="verror"
         >
-          <div class="dz-message" @mouseover="hover = true" @mouseleave="hover = false">
+          <div
+            v-if="!teaser"
+            class="dz-message"
+            @mouseover="hover = true"
+            @mouseleave="hover = false"
+          >
             <div class="hc-attachments-upload-area">
               <div class="hc-drag-marker">
                 <ds-icon v-if="hover" name="image" size="xxx-large" />
@@ -95,11 +102,13 @@ export default {
       slug: null,
       users: [],
       dropzoneOptions: {
-        url: this.vddrop,
+        url: 'https://httpbin.org/post',
         maxFilesize: 5.0,
         previewTemplate: this.template(),
       },
       hover: false,
+      error: false,
+      teaser: false,
     }
   },
   watch: {
@@ -116,6 +125,12 @@ export default {
         this.form.language = this.locale
       },
     },
+    error() {
+      let that = this
+      setTimeout(function() {
+        that.error = false
+      }, 2000)
+    },
   },
   computed: {
     locale() {
@@ -140,6 +155,7 @@ export default {
             title: this.form.title,
             content: this.form.content,
             language: this.form.language ? this.form.language.value : this.$i18n.locale(),
+            imageUpload: this.form.teaserImage,
           },
         })
         .then(res => {
@@ -172,15 +188,31 @@ export default {
               </div>
       `
     },
-    vddrop(file) {
-      this.form.teaserImage = file[0]
+    verror(file, message) {
+      this.error = true
+      this.$toast.error(file.status, message)
     },
-    verror(file, message) {},
     availableLocales() {
       orderBy(locales, 'name').map(locale => {
         this.form.languageOptions.push({ label: locale.name, value: locale.code })
       })
     },
+    vsuccess(file, response) {
+      this.form.teaserImage = file
+    },
+    thumbnail: function(file, dataUrl) {
+      this.teaser = true
+      var j, len, ref, thumbnailElement
+      if (file.previewElement) {
+        ref = document.querySelectorAll('#postdropzone')
+        for (j = 0, len = ref.length; j < len; j++) {
+          thumbnailElement = ref[j]
+          thumbnailElement.classList.add('image-preview')
+          thumbnailElement.alt = file.name
+          thumbnailElement.style.backgroundImage = 'url("' + dataUrl + '")'
+        }
+      }
+    },
   },
   apollo: {
     User: {
@@ -215,10 +247,31 @@ export default {
 }
 
 #postdropzone {
-  height: 160px;
+  min-height: 160px;
   background-color: $background-color-softest;
 }
 
+#postdropzone.image-preview {
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 600px;
+  transition: all 0.2s ease-out;
+
+  width: 100%;
+}
+
+@media only screen and (max-width: 400px) {
+  #postdropzone.image-preview {
+    height: 200px;
+  }
+}
+
+@media only screen and (min-width: 401px) and (max-width: 960px) {
+  #postdropzone.image-preview {
+    height: 400px;
+  }
+}
+
 .hc-attachments-upload-area {
   position: relative;
   display: flex;
@@ -269,6 +322,7 @@ export default {
   .hc-attachments-upload-area:hover & {
     opacity: 1;
   }
+}
 .contribution-form-footer {
   border-top: $border-size-base solid $border-color-softest;
 }
diff --git a/webapp/graphql/PostMutations.js b/webapp/graphql/PostMutations.js
index ad629bee7..31e618bfb 100644
--- a/webapp/graphql/PostMutations.js
+++ b/webapp/graphql/PostMutations.js
@@ -3,26 +3,45 @@ import gql from 'graphql-tag'
 export default () => {
   return {
     CreatePost: gql`
-      mutation($title: String!, $content: String!, $language: String) {
-        CreatePost(title: $title, content: $content, language: $language) {
+      mutation($title: String!, $content: String!, $language: String, $imageUpload: Upload) {
+        CreatePost(
+          title: $title
+          content: $content
+          language: $language
+          imageUpload: $imageUpload
+        ) {
           id
           title
           slug
           content
           contentExcerpt
           language
+          imageUpload
         }
       }
     `,
     UpdatePost: gql`
-      mutation($id: ID!, $title: String!, $content: String!, $language: String) {
-        UpdatePost(id: $id, title: $title, content: $content, language: $language) {
+      mutation(
+        $id: ID!
+        $title: String!
+        $content: String!
+        $language: String
+        $imageUpload: Upload
+      ) {
+        UpdatePost(
+          id: $id
+          title: $title
+          content: $content
+          language: $language
+          imageUpload: $imageUpload
+        ) {
           id
           title
           slug
           content
           contentExcerpt
           language
+          imageUpload
         }
       }
     `,
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 5751f42b0..0019157c7 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -2,7 +2,7 @@
   <transition name="fade" appear>
     <ds-card
       v-if="post && ready"
-      :image="post.image"
+      :image="post.image | proxyApiUrl"
       :class="{ 'post-card': true, 'disabled-content': post.disabled }"
     >
       <ds-space margin-bottom="small" />