Get avatar upload working from frontend to backend

- there are several things to work on still
- the upload sets the avatar as the background image of the previewElement, which means that you must refresh the page to upload a different avatar
- the CSS is slightly different before and after successful upload
- the CSS is slightly broken in that the avatar is not in the "ideal" place, it is entirely inside the card, instead of half in, half out on the top

backend/src/middleware/validation/index.js

@@ -3,7 +3,7 @@ import { UserInputError } from 'apollo-server'
 const USERNAME_MIN_LENGTH = 3
 
 const validateUsername = async (resolve, root, args, context, info) => {
-  if (!('name' in args) || args.name && args.name.length >= USERNAME_MIN_LENGTH) {
+  if (!('name' in args) || (args.name && args.name.length >= USERNAME_MIN_LENGTH)) {
     /* eslint-disable-next-line no-return-await */
     return await resolve(root, args, context, info)
   } else {

backend/src/resolvers/users.js

@@ -1,14 +1,13 @@
 import { neo4jgraphql } from 'neo4j-graphql-js'
 import { createWriteStream } from 'fs'
 
-
-const storeUpload = ({ stream, fileLocation}) =>
+const storeUpload = ({ stream, fileLocation }) =>
   new Promise((resolve, reject) =>
     stream
-    .pipe(createWriteStream(`public${fileLocation}`))
-    .on("finish", () => resolve())
-    .on("error", reject)
-  );
+      .pipe(createWriteStream(`public${fileLocation}`))
+      .on('finish', resolve)
+      .on('error', reject)
+  )
 
 export default {
   Mutation: {
@@ -16,14 +15,14 @@ export default {
       const { avatarUpload } = params
 
       if (avatarUpload) {
-        const { stream, filename } = await avatarUpload ;
+        const { stream, filename } = await avatarUpload
         const fileLocation = `/uploads/${filename}`
-        await storeUpload({ stream, fileLocation });
+        await storeUpload({ stream, fileLocation })
         delete params.avatarUpload
 
         params.avatar = fileLocation
       }
-      return await neo4jgraphql(object, params, context, resolveInfo, false)
+      return neo4jgraphql(object, params, context, resolveInfo, false)
     }
-  },
-};
+  }
+}

webapp/components/Empty.vue

@@ -11,7 +11,7 @@
         class="hc-empty-icon"
         style="margin-bottom: 5px"
         alt="Empty"
-      /><br>
+      ><br>
       <ds-text
         v-show="message"
         class="hc-empty-message"

webapp/components/Upload/index.vue

@@ -8,7 +8,6 @@
       :style="backgroundImage"
       @vdropzone-thumbnail="thumbnail"
       @vdropzone-drop="vddrop"
-      @vdropzone-success="vsuccess"
     />
   </div>
 </template>
@@ -37,7 +36,7 @@ export default {
     backgroundImage() {
       const { avatar } = this.user || {}
       return {
-        backgroundImage: `url(${avatar})`
+        backgroundImage: `url(/api/${avatar})`
       }
     }
   },
@@ -84,27 +83,25 @@ export default {
         )
       }
     },
-    vsuccess(file, response) {
-      console.log('file', file.upload.filename, 'response', response)
-    },
     vddrop([file]) {
-      this.dDrop = true
-      console.log('this is a file', file)
-      const uploadFileMutation = gql`
-        mutation($file: Upload!) {
-          uploadFile(file: $file)
-        }
-      `
       this.$apollo
-        .mutate({ mutation: uploadFileMutation, variables: { file } })
-        .then(reponse => {
-          console.log(response)
-          this.$toast.success('Upload successful')
+        .mutate({
+          mutation: gql`
+            mutation($id: ID!, $avatarUpload: Upload) {
+              UpdateUser(id: $id, avatarUpload: $avatarUpload) {
+                id
+              }
+            }
+          `,
+          variables: {
+            avatarUpload: file,
+            id: this.user.id
+          }
+        })
+        .then(response => {
+          this.$toast.success(this.$t('user.avatar.submitted'))
         })
         .catch(error => this.$toast.error(error.message))
-    },
-    verror(file) {
-      console.log(file)
     }
   }
 }

webapp/locales/en.json

@@ -247,5 +247,10 @@
   },
   "shoutButton": {
     "shouted": "shouted"
+  },
+  "user": {
+    "avatar": {
+      "submitted": "Upload successful"
+    }
   }
 }

webapp/pages/profile/_id/_slug.vue

@@ -14,14 +14,7 @@
           :class="{'disabled-content': user.disabled}"
           style="position: relative; height: auto;"
         >
-          <hc-upload :user="user">
-            <ds-avatar
-              :image="user.avatar"
-              :name="userName"
-              class="profile-avatar"
-              size="x-large"
-            />
-          </hc-upload>
+          <hc-upload :user="user" />
           <no-ssr>
             <content-menu
               placement="bottom-end"