Add apollo-upload-client

webapp/components/Upload.vue

@@ -7,6 +7,7 @@
       :include-styling="false"
       :style="{ backgroundImage: backgroundImage(`${user.avatar}`)}"
       @vdropzone-thumbnail="thumbnail"
+      @vdropzone-success="vsuccess"
     >
       <!-- <slot></slot> -->
     </vue-dropzone>
@@ -27,7 +28,6 @@ export default {
     return {
       dropzoneOptions: {
         url: 'https://httpbin.org/post',
-        thumbnailWidth: 150,
         maxFilesize: 0.5,
         previewTemplate: this.template(),
         dictDefaultMessage: ""
@@ -61,7 +61,6 @@ export default {
       var j, len, ref, thumbnailElement;
       this.$refs.el.dropzone.element.style['background-image'] = ''
       if (file.previewElement) {
-        console.log(file)
           file.previewElement.classList.remove("dz-file-preview");
           ref = file.previewElement.querySelectorAll("[data-dz-thumbnail-bg]");
           for (j = 0, len = ref.length; j < len; j++) {
@@ -75,6 +74,9 @@ export default {
               };
           })(this)), 1);
       }
+    },
+    vsuccess(file, response) {
+      console.log('file', file.upload.filename, 'response', response)
     }
   },
   mounted() {
@@ -108,15 +110,12 @@ export default {
   width: 122px;
   height: 122px;
   margin-left: -35px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 #customdropzone .dz-preview .dz-image > div {
   width: inherit;
   height: inherit;
   border-radius: 50%;
-  background-size: contain;
+  background-size: cover;
 }
 #customdropzone .dz-preview .dz-image > img {
   width: 100%;

webapp/package.json

@@ -58,6 +58,7 @@
     "accounting": "~0.4.1",
     "apollo-cache-inmemory": "~1.5.1",
     "apollo-client": "~2.5.1",
+    "apollo-upload-client": "^10.0.1",
     "cookie-universal-nuxt": "~2.0.14",
     "cross-env": "~5.2.0",
     "date-fns": "2.0.0-alpha.27",

webapp/plugins/apollo-config.js

@@ -1,6 +1,19 @@
+import { createUploadLink } from 'apollo-upload-client'
+import { ApolloClient } from 'apollo-client'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+
 export default ({ app }) => {
   const backendUrl = process.env.GRAPHQL_URI || 'http://localhost:4000'
+  const link = createUploadLink({ uri: 'http://localhost:4000' })
+  
+  const client = new ApolloClient({
+    link,
+    cache: new InMemoryCache(),
+  })
+
+  console.log(client)
   return {
+    client,
     httpEndpoint: process.server ? backendUrl : '/api',
     httpLinkOptions: {
       credentials: 'same-origin'

webapp/yarn.lock

@@ -2055,7 +2055,7 @@ apollo-tracing@0.6.0:
     apollo-server-env "2.3.0"
     graphql-extensions "0.6.0"
 
-apollo-upload-client@^10.0.0:
+apollo-upload-client@^10.0.0, apollo-upload-client@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/apollo-upload-client/-/apollo-upload-client-10.0.1.tgz#e8446288d03edb1c582c91c26a18b27533f85013"
   integrity sha512-K6WnuYQi0RRTNO+aSPVjoUWXp4QSr+eoKU4fE0OKQp25XRF2oXl2cTLs+Q4Nk0wOIHM76YGdo/IHtzuNR7jO+A==