diff --git a/webapp/components/Upload.vue b/webapp/components/Upload.vue index 3b2c84683..0b15dc2ad 100644 --- a/webapp/components/Upload.vue +++ b/webapp/components/Upload.vue @@ -7,6 +7,7 @@ :include-styling="false" :style="{ backgroundImage: backgroundImage(`${user.avatar}`)}" @vdropzone-thumbnail="thumbnail" + @vdropzone-success="vsuccess" > @@ -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%; diff --git a/webapp/package.json b/webapp/package.json index 217bb4037..d4e3f20ad 100644 --- a/webapp/package.json +++ b/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", diff --git a/webapp/plugins/apollo-config.js b/webapp/plugins/apollo-config.js index f65700ab4..a005063e1 100644 --- a/webapp/plugins/apollo-config.js +++ b/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' diff --git a/webapp/yarn.lock b/webapp/yarn.lock index 804c1518f..863b3428b 100644 --- a/webapp/yarn.lock +++ b/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==