Add nuxt-dropzone, Upload component

webapp/components/Upload.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <vue-dropzone
+      ref="el"
+      id="dropzone"
+      :include-styling="false"
+      :options="dropzoneOptions"
+    >
+    <!-- <ds-icon name="image" size="xxx-large"/> -->
+    </vue-dropzone>
+  </div>
+</template>
+<script>
+
+import vueDropzone from 'nuxt-dropzone'
+import 'nuxt-dropzone/dropzone.css'
+
+export default {
+  components: {
+    vueDropzone
+  },
+  props: {
+    user: { type: Object, default: null }
+  },
+  data() {
+    return {
+      dropzoneOptions: {
+        url: 'https://httpbin.org/post',
+        thumbnailWidth: 150,
+        maxFilesize: 0.5,
+        dictDefaultMessage: "<img src='https://s3.amazonaws.com/uifaces/faces/twitter/envex/128.jpg' />"
+      }
+    }
+  },
+  mounted() {
+    // Everything is mounted and you can access the dropzone instance
+    const instance = this.$refs.el.dropzone
+  }
+}
+</script>
+<style>
+img {
+  border-radius: 50%;
+}
+</style>

webapp/package.json

@@ -66,6 +66,7 @@
     "jsonwebtoken": "~8.5.1",
     "linkify-it": "~2.1.0",
     "nuxt": "~2.6.3",
+    "nuxt-dropzone": "^1.0.2",
     "nuxt-env": "~0.1.0",
     "stack-utils": "^1.0.2",
     "string-hash": "^1.1.3",
@@ -75,6 +76,7 @@
     "vue-count-to": "~1.0.13",
     "vue-izitoast": "1.1.2",
     "vue-sweetalert-icons": "~3.2.0",
+    "vue2-dropzone": "^3.5.9",
     "vuex-i18n": "~1.11.0",
     "zxcvbn": "^4.4.2"
   },
@@ -104,4 +106,4 @@
     "vue-jest": "~3.0.4",
     "vue-svg-loader": "~0.12.0"
   }
-}
+}

webapp/pages/profile/_id/_slug.vue

@@ -14,12 +14,13 @@
           :class="{'disabled-content': user.disabled}"
           style="position: relative; height: auto;"
         >
-          <ds-avatar
+          <hc-upload :user="user"/>
+          <!-- <ds-avatar
             :image="user.avatar"
             :name="userName"
             class="profile-avatar"
-            size="120px"
+            size="x-large"
-          />
+          /> -->
           <no-ssr>
             <content-menu
               placement="bottom-end"
@@ -327,6 +328,7 @@ import HcBadges from '~/components/Badges.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
 import HcEmpty from '~/components/Empty.vue'
 import ContentMenu from '~/components/ContentMenu'
+import HcUpload from '~/components/Upload'
 
 export default {
   components: {
@@ -337,7 +339,8 @@ export default {
     HcBadges,
     HcLoadMore,
     HcEmpty,
-    ContentMenu
+    ContentMenu,
+    HcUpload
   },
   transition: {
     name: 'slide-up',

webapp/yarn.lock

@@ -3928,6 +3928,11 @@ dotenv@^6.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
   integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
 
+dropzone@^5.5.1:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/dropzone/-/dropzone-5.5.1.tgz#06e2f513e61d6aa363d4b556f18574f47cf7ba26"
+  integrity sha512-3VduRWLxx9hbVr42QieQN25mx/I61/mRdUSuxAmDGdDqZIN8qtP7tcKMa3KfpJjuGjOJGYYUzzeq6eGDnkzesA==
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -7418,6 +7423,13 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
+nuxt-dropzone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/nuxt-dropzone/-/nuxt-dropzone-1.0.2.tgz#7b39014ebf4c2084ea5c976f8d9f7b3cead2c7af"
+  integrity sha512-Oj6YrQxNH5KhCyFSFz2O809u23+cFAevBTdcld88qakbR2l5stTQjrv8VJ9beaqfenT9kKEkhYQT0mXc3nUdKw==
+  dependencies:
+    vue2-dropzone "3.5.8"
+
 nuxt-env@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/nuxt-env/-/nuxt-env-0.1.0.tgz#8ac50b9ff45391ad3044ea932cbd05f06a585f87"
@@ -10996,6 +11008,20 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue2-dropzone@3.5.8:
+  version "3.5.8"
+  resolved "https://registry.yarnpkg.com/vue2-dropzone/-/vue2-dropzone-3.5.8.tgz#cbe92d5424b5cc62c4d4ad62814d0cf6f3bb6cda"
+  integrity sha512-32rLGSx+mLKhyzxRz4CdeNT9JmbO6NsYX8m83WYqrf2ilRbm6KSZmUqZ8EIT+2dwq8EzY9jdrWlWuZJRBFPUGw==
+  dependencies:
+    dropzone "^5.5.1"
+
+vue2-dropzone@^3.5.9:
+  version "3.5.9"
+  resolved "https://registry.yarnpkg.com/vue2-dropzone/-/vue2-dropzone-3.5.9.tgz#a63999a45a7aad24d4c21e3d35be409b4e6bdce8"
+  integrity sha512-nJz6teulVKlZIAeKgvPU7wBI/gzfIgqDOrEp1okSkQIkdprDVCoM0U7XWM0NOM4AAVX+4XGRtMoocYWdTYb3bQ==
+  dependencies:
+    dropzone "^5.5.1"
+
 vue@^2.6.10, vue@^2.6.6:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"